@extends('layouts.app')

@section('title')
    {{ $pageInfo['title'] }}
@endsection

@section('admin-content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="fw-bold">{{ $pageInfo['title'] }}</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active">{{ $pageInfo['title'] }}</li>
                    </ol>
                </div>
            </div>
            
            {{-- Filter Section - Diperbarui ke Sistem Periode Bulan Akuntansi --}}
            <div class="row mt-4">
                <div class="col-md-12">
                    <div class="card shadow-sm border-0" style="border-radius: 15px;">
                        <div class="card-body">
                            <form action="{{ route('reports.vehicle') }}" method="GET">
                                <div class="row align-items-end">
                                    <div class="col-md-3">
                                        <div class="form-group mb-3">
                                            <label class="small fw-bold text-muted">Pilih Region</label>
                                            <select name="region" id="region" class="form-control select2">
                                                <option value="">Semua Region</option>
                                                @foreach ($regions as $region)
                                                    <option value="{{ $region->code }}" {{ request()->region == $region->code ? 'selected' : '' }}>{{ $region->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group mb-3">
                                            <label class="small fw-bold text-muted">Pilih Cabang</label>
                                            <select name="cabang" id="cabang" class="form-control select2">
                                                <option value="">Semua Cabang</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group mb-3">
                                            <label class="small fw-bold text-muted">Periode Bulan</label>
                                            <select name="month" id="month" class="form-control">
                                                <option value="">Pilih Bulan</option>
                                                @foreach(['january','february','march','april','may','june','july','august','september','october','november','december'] as $m)
                                                    <option value="{{ $m }}" {{ (request()->month ?? strtolower(date('F'))) == $m ? 'selected' : '' }}>{{ ucfirst($m) }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group mb-3">
                                            <label class="small fw-bold text-muted">Tahun</label>
                                            <select name="year" id="year" class="form-control">
                                                <option value="">Pilih Tahun</option>
                                                @for ($i = 2024; $i <= date('Y'); $i++)
                                                    <option value="{{ $i }}" {{ (request()->year ?? date('Y')) == $i ? 'selected' : '' }}>{{ $i }}</option>
                                                @endfor
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group mb-3">
                                            <label class="small fw-bold text-muted">Status</label>
                                            <select name="status" id="status" class="form-control">
                                                <option value="">Semua Status</option>
                                                @foreach(['On Progress', 'Approved 1', 'Approved 2', 'Closed', 'Rejected'] as $st)
                                                    <option value="{{ $st }}" {{ request()->status == $st ? 'selected' : '' }}>{{ $st }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-12 text-right mt-2">
                                        <button type="submit" class="btn btn-primary px-4 shadow-sm"><i class="fas fa-filter mr-1"></i> Filter</button>
                                        <a href="{{ route('reports.vehicle') }}" class="btn btn-outline-secondary px-4 shadow-sm">Reset</a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @php use App\Helpers\NextCloudHelper; @endphp

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card shadow-sm border-0" style="border-radius: 15px;">
                        <div class="card-body">
                            <h4 class="header-title mb-4">List Report Vehicle Running Cost</h4>
                            <div class="table-responsive">
                                <table id="dataTable-table" class="table table-hover w-100">
                                    <thead class="bg-light text-capitalize">
                                        <tr>
                                            <th>#</th>
                                            <th>No Expense</th>
                                            <th>Pengaju</th>
                                            <th>Region / Cabang</th>
                                            <th>Nopol / Bensin</th>
                                            <th>Tgl. Penggunaan</th>
                                            <th>Tgl. Dibuat</th>
                                            <th>Liter / Jarak</th>
                                            <th>Total Approved</th>
                                            <th class="text-center">Bukti</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($forms as $item)
                                            <tr>
                                                <td>{{ $loop->iteration }}</td>
                                                <td class="fw-bold text-primary">{{ $item->expense_number }}</td>
                                                <td>{{ $item->user->name ?? '-' }}</td>
                                                <td>
                                                    <span class="d-block small fw-bold">{{ $item->user->region->cabang->region->name ?? '-' }}</span>
                                                    <span class="text-muted small">{{ $item->user->cabang->cabang->name ?? '-' }}</span>
                                                </td>
                                                <td>
                                                    <div class="fw-bold small">{{ $item->nopol ?? '-' }}</div>
                                                    <div class="badge badge-light border small">{{ $item->tipe_bensin }}</div>
                                                </td>
                                                <td class="small">{{ \Carbon\Carbon::parse($item->tanggal)->format('d M Y') }}</td>
                                                <td>
                                                    <div class="fw-bold small">{{ $item->created_at->format('d M Y') }}</div>
                                                    <small class="text-muted">{{ $item->created_at->format('H:i') }} WIB</small>
                                                </td>
                                                <td>
                                                    <div class="small fw-bold">{{ $item->liter }} Liter</div>
                                                    <div class="text-muted small italic">{{ $item->jarak }} km</div>
                                                </td>
                                                <td class="fw-bold text-success">{{ $item->approved_total ? number_format($item->approved_total, 0, ',', '.') : '-' }}</td>
                                                
                                                {{-- AREA PREVIEW LAMPIRAN --}}
                                                <td class="text-center">
                                                    @php
                                                        $fileData = [];
                                                        $imgExts = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'];
                                                        
                                                        if (!empty($item->bukti_total)) {
                                                            $ext = strtolower(pathinfo($item->bukti_total, PATHINFO_EXTENSION));
                                                            $fileData[] = ['url' => NextCloudHelper::getFileUrl($item->bukti_total), 'is_img' => in_array($ext, $imgExts)];
                                                        }
                                                        
                                                        if ($item->attachments) {
                                                            foreach ($item->attachments as $att) {
                                                                if ($att->file_path) {
                                                                    $ext = strtolower(pathinfo($att->file_path, PATHINFO_EXTENSION));
                                                                    $fileData[] = ['url' => NextCloudHelper::getFileUrl($att->file_path), 'is_img' => in_array($ext, $imgExts)];
                                                                }
                                                            }
                                                        }
                                                        $uniqueFiles = collect($fileData)->unique('url')->values()->all();
                                                    @endphp

                                                    @if (count($uniqueFiles) > 0)
                                                        <button type="button" class="btn btn-sm btn-info rounded-pill px-3 shadow-sm btn-preview-bukti" 
                                                                data-expense="{{ $item->expense_number }}"
                                                                data-files='@json($uniqueFiles)'>
                                                            <i class="fas fa-eye"></i> {{ count($uniqueFiles) }}
                                                        </button>
                                                    @else
                                                        <span class="text-muted small">-</span>
                                                    @endif
                                                </td>

                                                <td>
                                                    @php
                                                        $badgeClass = match($item->status) {
                                                            'On Progress' => 'badge-warning text-white',
                                                            'Approved 1', 'Approved 2', 'Closed' => 'badge-success text-white',
                                                            'Rejected' => 'badge-danger text-white',
                                                            default => 'badge-secondary'
                                                        };
                                                    @endphp
                                                    <span class="badge {{ $badgeClass }} px-3 py-2">{{ $item->status }}</span>

                                                    {{-- BLOK AUDIT TRAIL LOG REJECTED --}}
                                                    @if($item->status === 'Rejected')
                                                        <div class="mt-2 p-2 bg-light border border-danger rounded" style="line-height: 1.3; min-width: 160px; border-style: dashed !important;">
                                                            <small class="text-danger fw-bold d-block mb-1" style="font-size: 10px;">
                                                                <i class="fas fa-times-circle mr-1"></i> Detail Penolakan:
                                                            </small>
                                                            <small class="text-dark d-block" style="font-size: 10px;">
                                                                <strong>Oleh:</strong> {{ $item->rejector->name ?? $item->rejected_by ?? 'System' }}
                                                            </small>
                                                            @if($item->rejected_at)
                                                                <small class="text-muted d-block" style="font-size: 10px;">
                                                                    <strong>Waktu:</strong> {{ \Carbon\Carbon::parse($item->rejected_at)->translatedFormat('d M Y H:i') }} WIB
                                                                </small>
                                                            @elseif($item->updated_at && $item->remarks)
                                                                <small class="text-muted d-block" style="font-size: 10px;">
                                                                    <strong>Waktu:</strong> {{ \Carbon\Carbon::parse($item->updated_at)->translatedFormat('d M Y H:i') }} WIB
                                                                </small>
                                                            @endif
                                                            @if($item->remarks)
                                                                <small class="text-danger d-block mt-1 italic" style="font-size: 10px; line-height: 1.1;">
                                                                    <strong>Ket:</strong> "{{ $item->remarks }}"
                                                                </small>
                                                            @endif
                                                        </div>
                                                    @endif

                                                    {{-- BLOK EXISTING FINAL APPROVED / CLOSED --}}
                                                    @if($item->final_approved_at && in_array($item->status, ['Approved 2', 'Closed']))
                                                        <div class="mt-2" style="line-height: 1.2;">
                                                            <small class="text-success fw-bold d-block" style="font-size: 10px;">
                                                                <i class="fas fa-check-double mr-1"></i> Final Approved:
                                                            </small>
                                                            <small class="text-muted d-block" style="font-size: 10px;">
                                                                {{ \Carbon\Carbon::parse($item->final_approved_at)->translatedFormat('d M Y') }}
                                                                <span class="ml-1">{{ \Carbon\Carbon::parse($item->final_approved_at)->format('H:i') }} WIB</span>
                                                            </small>
                                                        </div>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- MODAL PREVIEW & ZOOM --}}
    <div class="modal fade" id="modalPreviewBukti" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content" style="border-radius: 15px; border: none; overflow: hidden;">
                <div class="modal-header bg-primary text-white border-0">
                    <h5 class="modal-title fw-bold"><i class="fas fa-images mr-2"></i>Lampiran Bukti <span id="textExpenseNum"></span></h5>
                    <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body bg-light" id="containerPreview" style="max-height: 70vh; overflow-y: auto; padding: 25px;"></div>
                <div class="modal-footer bg-light border-0">
                    <button type="button" class="btn btn-secondary rounded-pill px-4" data-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalImageFull" tabindex="-2" role="dialog" aria-hidden="true" style="background: rgba(0,0,0,0.85); z-index: 1060;">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content" style="background: transparent; border: none;">
                <div class="modal-header border-0 p-0">
                    <button type="button" class="close text-white" data-dismiss="modal" style="font-size: 2.5rem; position: absolute; right: 15px; top: 10px; z-index: 999; opacity: 1;">&times;</button>
                </div>
                <div class="modal-body p-0 text-center">
                    <img src="" id="imgFullDisplay" style="max-width: 100%; max-height: 90vh; border-radius: 8px; box-shadow: 0 0 30px rgba(0,0,0,0.5);">
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            if ($('#dataTable-table').length) {
                $('#dataTable-table').DataTable({
                    responsive: false, 
                    dom: 'Blfrtip',
                    deferRender: true, // Meningkatkan kecepatan muat halaman secara drastis
                    lengthMenu: [ [10, 50, 100, -1], [10, 50, 100, "All"] ],
                    buttons: [
                        { 
                            extend: 'excelHtml5', text: '<i class="fas fa-file-excel mr-1"></i> Excel', className: 'btn-success',
                            exportOptions: {
                                columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 10],
                                format: {
                                    body: function (data, row, column, node) {
                                        let text = node.textContent || node.innerText || "";
                                        if (column === 8) return text.replace(/[.]/g, ''); 
                                        return text.replace(/\s+/g, ' ').trim();
                                    }
                                }
                            }
                        }, 
                        { 
                            extend: 'pdfHtml5', text: '<i class="fas fa-file-pdf mr-1"></i> PDF', className: 'btn-danger',
                            orientation: 'landscape', pageSize: 'A4',
                            exportOptions: { columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 10] },
                            customize: function(doc) {
                                doc.defaultStyle.fontSize = 8;
                                doc.styles.tableHeader.fontSize = 9;
                            }
                        }, 
                        'colvis'
                    ]
                });
            }

            $(document).on('click', '.btn-preview-bukti', function(e) {
                e.preventDefault();
                const expenseNum = $(this).data('expense');
                const files = $(this).data('files'); 
                let html = '<div class="row">';

                $('#textExpenseNum').text('#' + expenseNum);
                $('#containerPreview').html('<div class="text-center py-5"><i class="fas fa-circle-notch fa-spin fa-3x text-primary"></i></div>');

                if(files && files.length > 0) {
                    files.forEach((file) => {
                        html += `
                            <div class="col-md-6 mb-4">
                                <div class="card h-100 border-0 shadow-sm rounded-lg overflow-hidden">
                                    <div class="card-body p-2 text-center bg-white">
                                        <div class="thumbnail-container mb-3" style="height: 220px; display: flex; align-items: center; justify-content: center; background: #f8f9fa; border-radius: 8px; overflow: hidden; border: 1px solid #eee;">
                                            ${file.is_img 
                                                ? `<img src="${file.url}" class="img-fluid" style="max-height: 100%; object-fit: contain; cursor: zoom-in;" onclick="openFullImage('${file.url}')">` 
                                                : `<div class="text-center"><i class="fas fa-file-pdf fa-4x text-danger"></i><p class="small text-muted mt-2 fw-bold">Dokumen Digital</p></div>`
                                            }
                                        </div>
                                        <div class="btn-group w-100">
                                            ${file.is_img 
                                                ? `<button type="button" onclick="openFullImage('${file.url}')" class="btn btn-outline-primary btn-sm px-3"><i class="fas fa-eye"></i> Preview Full</button>`
                                                : `<a href="${file.url}" target="_blank" class="btn btn-outline-primary btn-sm px-3"><i class="fas fa-external-link-alt"></i> Buka PDF</a>`
                                            }
                                            <a href="${file.url}" download class="btn btn-primary btn-sm px-3"><i class="fas fa-download"></i> Download</a>
                                        </div>
                                    </div>
                                </div>
                            </div>`;
                    });
                }
                $('#containerPreview').html(html + '</div>');
                $('#modalPreviewBukti').modal('show');
            });

            function loadCabang(regionCode, selectedCabang = null) {
                const cabangSelect = $('#cabang');
                if (regionCode) {
                    fetch(`/api/cabang-by-region/${regionCode}`)
                        .then(response => response.json())
                        .then(data => {
                            cabangSelect.html('<option value="">Semua Cabang</option>');
                            data.forEach(cabang => {
                                const isSelected = (selectedCabang && cabang.code === selectedCabang) ? 'selected' : '';
                                cabangSelect.append(`<option value="${cabang.code}" ${isSelected}>${cabang.name}</option>`);
                            });
                        });
                }
            }
            
            $('#region').on('change', function() { loadCabang(this.value); });
            const currentRegion = '{{ request()->region }}';
            const currentCabang = '{{ request()->cabang }}';
            if (currentRegion) { loadCabang(currentRegion, currentCabang); }
        });

        function openFullImage(url) {
            $('#imgFullDisplay').attr('src', url);
            $('#modalImageFull').modal('show');
        }
    </script>
@endsection