@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="container-fluid py-3">
        <div class="card shadow-sm mb-3">
            <div class="card-body p-3">
                <div class="row align-items-center">
                    <div class="col-lg">
                        @if ($authorize->add == '1')
                            <button class="btn btn-primary mb-0" onclick="event.preventDefault(); document.getElementById('{{ $dmenu }}-form').submit();">
                                <i class="fas fa-bolt me-1"></i>
                                Execute
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="card shadow-sm" style="max-width: 560px;">
            <div class="card-body p-3">
                <h6 class="mb-3 text-dark font-weight-bold">Filter Layout Report</h6>
                <hr class="horizontal dark mt-0">

                <form method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form">
                    @csrf
                    <div class="form-group mb-3">
                        <label class="form-control-label font-weight-bold">Tanggal Mulai</label>
                        <input class="form-control" type="date" name="tanggal_mulai" value="{{ old('tanggal_mulai', $filter['tanggal_mulai'] ?? '') }}">
                        @error('tanggal_mulai')
                            <p class="text-danger text-xs pt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-control-label font-weight-bold">Tanggal Akhir</label>
                        <input class="form-control" type="date" name="tanggal_akhir" value="{{ old('tanggal_akhir', $filter['tanggal_akhir'] ?? '') }}">
                        @error('tanggal_akhir')
                            <p class="text-danger text-xs pt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-control-label font-weight-bold">Karyawan</label>
                        <input class="form-control" type="text" name="karyawan" placeholder="Tampilkan Semua" value="{{ old('karyawan', $filter['karyawan'] ?? '') }}">
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-control-label font-weight-bold">Departemen</label>
                        <select class="form-select" name="departemen">
                            <option value="semua" {{ old('departemen', $filter['departemen'] ?? '') == 'semua' || old('departemen', $filter['departemen'] ?? '') == '' ? 'selected' : '' }}>Tampilkan Semua</option>
                            @foreach (($departemen_options ?? []) as $dept)
                                <option value="{{ $dept->nama }}" {{ old('departemen', $filter['departemen'] ?? '') == $dept->nama ? 'selected' : '' }}>{{ $dept->nama }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-control-label font-weight-bold">Grup</label>
                        <select class="form-select" name="grup">
                            <option value="semua" {{ old('grup', $filter['grup'] ?? '') == 'semua' || old('grup', $filter['grup'] ?? '') == '' ? 'selected' : '' }}>Tampilkan Semua</option>
                            @foreach (($group_options ?? []) as $grp)
                                <option value="{{ $grp->nama_grup }}" {{ old('grup', $filter['grup'] ?? '') == $grp->nama_grup ? 'selected' : '' }}>{{ $grp->nama_grup }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-control-label font-weight-bold">Jenis Klarifikasi</label>
                        <select class="form-select" name="keterangan" id="keterangan_select_klarifikasi">
                            <option value="semua" {{ old('keterangan', $filter['keterangan'] ?? '') == 'semua' || old('keterangan', $filter['keterangan'] ?? '') == '' ? 'selected' : '' }}>Tampilkan Semua</option>
                            <option value="insidental" {{ old('keterangan', $filter['keterangan'] ?? '') == 'insidental' ? 'selected' : '' }}>Insidental</option>
                            <option value="lainnya" {{ old('keterangan', $filter['keterangan'] ?? '') == 'lainnya' ? 'selected' : '' }}>Lainnya (Isi Manual)</option>
                        </select>
                    </div>

                    <div class="form-group mb-0" id="keterangan_manual_klarifikasi" style="display: none;">
                        <label class="form-control-label font-weight-bold">Keterangan Manual</label>
                        <input class="form-control" type="text" name="keterangan_manual" placeholder="Isi keterangan..." value="{{ old('keterangan_manual', $filter['keterangan_manual'] ?? '') }}">
                    </div>
                </form>
            </div>
        </div>
    </div>

    @push('js')
        <script>
            $(document).ready(function() {
                function toggleKeteranganManualKlarifikasi() {
                    const isManual = $('#keterangan_select_klarifikasi').val() === 'lainnya';
                    $('#keterangan_manual_klarifikasi').toggle(isManual);
                    if (!isManual) {
                        $('input[name="keterangan_manual"]').val('');
                    }
                }
                toggleKeteranganManualKlarifikasi();
                $('#keterangan_select_klarifikasi').on('change', toggleKeteranganManualKlarifikasi);
            });
        </script>
    @endpush
@endsection