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

@push('css')
    <style>
        .report-filter-card,
        .report-result-card {
            border: 1px solid #e8edf3;
            border-radius: 14px;
            box-shadow: 0 4px 18px rgba(31, 42, 68, .05);
        }
        .report-section-icon {
            width: 42px;
            height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 11px;
            color: #fff;
            background: linear-gradient(135deg, #028284, #03a6a8);
            box-shadow: 0 5px 12px rgba(2, 130, 132, .2);
        }
        .report-summary {
            min-width: 112px;
            padding: 10px 14px;
            border: 1px solid #e8edf3;
            border-radius: 10px;
            background: #fff;
        }
        .report-summary .value {
            color: #253858;
            font-size: 18px;
            font-weight: 700;
            line-height: 1;
        }
        .report-summary .label {
            margin-top: 5px;
            color: #7b8ba5;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .04em;
            text-transform: uppercase;
        }
        .report-summary.pending { border-left: 3px solid #f59e0b; }
        .report-summary.approved { border-left: 3px solid #16a673; }
        .report-summary.rejected { border-left: 3px solid #dc4c64; }
        .report-table thead th {
            padding: 13px 12px !important;
            border-bottom: 1px solid #e8edf3 !important;
            color: #6d7d99;
            font-size: 11px !important;
            font-weight: 700 !important;
            letter-spacing: .035em;
            text-transform: uppercase;
            white-space: nowrap;
        }
        .report-table tbody td {
            padding: 13px 12px !important;
            border-bottom: 1px solid #edf1f5 !important;
            color: #344767;
            font-size: 13px;
            vertical-align: middle;
        }
        .report-table tbody tr:hover { background: #f8fbfc; }
        .report-table tbody tr.inactive-row { background: #fff8f8; }
        .request-id { color: #087e80; font-weight: 700; white-space: nowrap; }
        .cell-primary { color: #253858; font-weight: 600; }
        .cell-secondary { margin-top: 2px; color: #7b8ba5; font-size: 11px; }
        .status-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-width: 90px;
            padding: 6px 10px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
            justify-content: center;
        }
        .status-pill.pending { color: #a86400; background: #fff3d8; }
        .status-pill.approved { color: #087752; background: #ddf7ed; }
        .status-pill.rejected { color: #b4233d; background: #fde8ec; }
        .report-search { position: relative; min-width: 245px; }
        .report-search i {
            position: absolute;
            top: 50%;
            left: 13px;
            color: #93a1b5;
            transform: translateY(-50%);
        }
        .report-search input { padding-left: 37px; }
        #export-buttons .btn { margin: 0 0 0 6px; }
        @media (max-width: 767.98px) {
            .report-summary { min-width: calc(50% - 6px); }
            .report-search { width: 100%; min-width: 0; }
            #export-buttons { width: 100%; }
            #export-buttons .btn { margin: 6px 6px 0 0; }
        }
    </style>
@endpush

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

    <div class="container-fluid py-3">
        <div class="card report-filter-card mb-3">
            <div class="card-body p-4">
                <div class="d-flex align-items-center mb-4">
                    <span class="report-section-icon me-3"><i class="fas fa-filter"></i></span>
                    <div>
                        <h5 class="mb-1">Filter {{ $title_menu }}</h5>
                        <p class="text-sm text-muted mb-0">Select the request period, requestor, and approval status.</p>
                    </div>
                </div>

                @include('components.alert')

                <form id="filterForm" method="GET" action="{{ url($url_menu) }}">
                    <div class="row g-3 align-items-end">
                        <div class="col-xl-2 col-md-6">
                            <label class="form-label text-sm fw-bold">Period From</label>
                            <input type="date" class="form-control" name="date_from" id="filter_date_from"
                                value="{{ $date_from }}" required>
                        </div>
                        <div class="col-xl-2 col-md-6">
                            <label class="form-label text-sm fw-bold">Period To</label>
                            <input type="date" class="form-control" name="date_to" id="filter_date_to"
                                value="{{ $date_to }}" min="{{ $date_from }}" required>
                        </div>
                        <div class="col-xl-3 col-md-6">
                            <label class="form-label text-sm fw-bold">Requestor</label>
                            <select class="form-select select2" name="user" id="filter_user">
                                <option value="all">Semua Requestor</option>
                                @foreach ($users as $user)
                                    <option value="{{ $user->nik }}" {{ $selected_user == $user->nik ? 'selected' : '' }}>
                                        {{ $user->nama }} · {{ $user->departemen ?: 'Tanpa Departemen' }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-xl-2 col-md-6">
                            <label class="form-label text-sm fw-bold">Approval Status</label>
                            <select class="form-select" name="status" id="filter_status">
                                <option value="all" {{ $selected_status === 'all' ? 'selected' : '' }}>All Status</option>
                                <option value="pending" {{ $selected_status === 'pending' ? 'selected' : '' }}>Pending</option>
                                <option value="approved" {{ $selected_status === 'approved' ? 'selected' : '' }}>Approved</option>
                                <option value="rejected" {{ $selected_status === 'rejected' ? 'selected' : '' }}>Rejected</option>
                            </select>
                        </div>
                        <div class="col-xl-3 col-12">
                            <div class="d-flex gap-2">
                                <a href="{{ url($url_menu) }}" class="btn btn-danger mb-0 flex-fill">
                                    <i class="fas fa-rotate-left me-1"></i> Reset
                                </a>
                                <button type="submit" class="btn btn-primary mb-0 flex-fill" id="filterButton">
                                    <i class="fas fa-search me-1"></i> Search
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="card report-result-card">
            <div class="card-header border-bottom p-4">
                <div class="d-flex flex-wrap align-items-start justify-content-between gap-3">
                    <div>
                        <h5 class="mb-1">Report Results</h5>
                        <p class="text-sm text-muted mb-0">
                            Periode {{ \Carbon\Carbon::parse($date_from)->format('d/m/Y') }}–{{ \Carbon\Carbon::parse($date_to)->format('d/m/Y') }}
                        </p>
                    </div>
                    
                </div>

                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mt-4">
                    <div id="export-buttons" class="d-flex flex-wrap"></div>
                    <div class="report-search">
                        <i class="fas fa-search"></i>
                        <input type="search" id="customSearch" class="form-control form-control-sm"
                            placeholder="Cari ID, training, atau requestor...">
                    </div>
                    
                </div>
            </div>

            <div class="card-body p-0">
                <div class="table-responsive px-3 pb-3">
                    <table id="list_{{ $dmenu }}" class="table report-table align-items-center mb-0 w-100">
                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                            <tr>
                                <th class="text-center">No.</th>
                                <th>Request ID</th>
                                <th>Tanggal Pengajuan</th>
                                <th>Requestor</th>
                                <th>Departemen</th>
                                <th>Training</th>
                                <th>Estimasi Training</th>
                                <th class="text-center">Status</th>
                                <th>Decision by</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($report_results as $result)
                                @php
                                    $status = strtolower($result->approval_hrd ?: 'pending');
                                    $statusLabel = ['pending' => 'Pending', 'approved' => 'Approved', 'rejected' => 'Rejected'][$status] ?? ucfirst($status);
                                    $statusIcon = ['pending' => 'fa-clock', 'approved' => 'fa-check', 'rejected' => 'fa-xmark'][$status] ?? 'fa-circle-info';
                                @endphp
                                <tr class="{{ (string) $result->isactive === '0' ? 'inactive-row' : '' }}">
                                    <td class="text-center text-muted">{{ $loop->iteration }}</td>
                                    <td>
                                        <span class="request-id">{{ $result->gen_id ?: '#' . $result->id }}</span>
                                        @if ((string) $result->isactive === '0')
                                            <div class="cell-secondary text-danger">Tidak aktif</div>
                                        @endif
                                    </td>
                                    <td data-order="{{ $result->created_at }}">
                                        <div class="cell-primary">{{ \Carbon\Carbon::parse($result->created_at)->format('d/m/Y') }}</div>
                                        <div class="cell-secondary">{{ \Carbon\Carbon::parse($result->created_at)->format('H:i') }} WIB</div>
                                    </td>
                                    <td>
                                        <div class="cell-primary">{{ $result->requestor_name ?: 'Nama tidak ditemukan' }}</div>
                                        <div class="cell-secondary">NIK {{ $result->id_mst_user ?: '-' }}</div>
                                    </td>
                                    <td>{{ $result->department_name ?: '-' }}</td>
                                    <td>
                                        <div class="cell-primary">{{ $result->name_trn ?: '-' }}</div>
                                        @if ($result->description)
                                            <div class="cell-secondary" title="{{ $result->description }}">
                                                {{ \Illuminate\Support\Str::limit($result->description, 70) }}
                                            </div>
                                        @endif
                                    </td>
                                    <td data-order="{{ $result->month_estimation }}">
                                        {{ $result->month_estimation ? \Carbon\Carbon::parse($result->month_estimation)->format('d/m/Y') : '-' }}
                                    </td>
                                    <td class="text-center">
                                        <span class="status-pill {{ $status }}">
                                            <i class="fas {{ $statusIcon }}"></i> {{ $statusLabel }}
                                        </span>
                                        @if ($status === 'rejected' && $result->rejection_reason)
                                            <div class="cell-secondary text-danger" title="{{ $result->rejection_reason }}">
                                                {{ \Illuminate\Support\Str::limit($result->rejection_reason, 45) }}
                                            </div>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="cell-primary">{{ $result->decision_by ?: '-' }}</div>
                                        @if ($result->approved_at)
                                            <div class="cell-secondary">{{ \Carbon\Carbon::parse($result->approved_at)->format('d/m/Y H:i') }}</div>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(document).ready(function() {
            $('#filter_user').select2({
                width: '100%',
                placeholder: 'Pilih requestor'
            });

            $('#filter_date_from').on('change', function() {
                $('#filter_date_to').attr('min', this.value);
            });

            const tableSelector = '#list_{{ $dmenu }}';
            if ($.fn.DataTable.isDataTable(tableSelector)) {
                $(tableSelector).DataTable().destroy();
            }

            const table = $(tableSelector).DataTable({
                responsive: true,
                pageLength: 10,
                lengthChange: false,
                order: [[2, 'desc']],
                columnDefs: [{ targets: 0, orderable: false, searchable: false }],
                dom: 'rt<"row align-items-center px-2 mt-3"<"col-md-6"i><"col-md-6"p>>',
                language: {
                    zeroRecords: 'Tidak ada data yang sesuai dengan filter.',
                    emptyTable: 'Belum ada data pengajuan pada periode ini.',
                    info: 'Menampilkan _START_–_END_ dari _TOTAL_ data',
                    infoEmpty: 'Menampilkan 0 data',
                    infoFiltered: '(difilter dari _MAX_ data)',
                    paginate: { previous: 'Sebelumnya', next: 'Berikutnya' }
                },
                buttons: [
                    {
                        extend: 'excelHtml5',
                        className: 'buttons-excel btn btn-sm btn-outline-success',
                        text: '<i class="fas fa-file-excel me-1"></i> Excel',
                        title: 'Laporan Request TNA {{ $date_from }} - {{ $date_to }}'
                    },
                    {
                        extend: 'pdfHtml5',
                        className: 'buttons-pdf btn btn-sm btn-outline-danger',
                        text: '<i class="fas fa-file-pdf me-1"></i> PDF',
                        title: 'Laporan Request TNA {{ $date_from }} - {{ $date_to }}',
                        orientation: 'landscape',
                        pageSize: 'A4'
                    },
                    {
                        extend: 'print',
                        className: 'buttons-print btn btn-sm btn-outline-info',
                        text: '<i class="fas fa-print me-1"></i> Print',
                        title: 'Laporan Request TNA'
                    }
                ]
            });

            table.buttons().container().appendTo('#export-buttons');
            $('#export-buttons .dt-button').removeClass('dt-button');

            $('#customSearch').on('input', function() {
                table.search(this.value).draw();
            });

            @if ($authorize->excel == '0')
                $('.buttons-excel').remove();
            @endif
            @if ($authorize->pdf == '0')
                $('.buttons-pdf').remove();
            @endif
            @if ($authorize->print == '0')
                $('.buttons-print').remove();
            @endif
        });
    </script>
@endpush