@extends('layouts.app')

@section('title')
    Dashboard
@endsection

@section('admin-content')
    <script src="https://cdn.jsdelivr.net/npm/autonumeric@4.6.0/dist/autoNumeric.min.js"></script>
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Edit Expense Vehicle Running Cost</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard.index') }}">Dashboard</a></li>
                    </ol>
                </div>
            </div>
        </div>
    </section>
    <style>
        #loading-spinner-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
            z-index: 9999; /* High z-index to cover everything */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .spinner-wrapper {
            text-align: center;
            color: white;
        }
    </style>
    <section class="content">
        <div class="container-fluid">
            <div class="card card-primary card-outline">
                <div class="card-body">
                    <form id="expense-form" method="POST" action="{{ route('forms.vehicle.update', $form->id) }}" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        @include('backend.layouts.partials.messages')
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="mb-3">
                                    <label class="form-label">Tanggal <span class="font-italic font-weight-normal">(required)</span></label>
                                    <input type="datetime-local" class="form-control" name="tanggal" required value="{{ old('tanggal', $form->tanggal ? \Carbon\Carbon::parse($form->tanggal)->format('Y-m-d\TH:i') : '') }}">
                                </div>
                                {{-- Updated: Expense Type dropdown with name="type" and $form->type for selection --}}
                                <div class="mb-3">
                                    <label class="form-label">Tipe Pengeluaran <span class="font-italic font-weight-normal">(required)</span></label>
                                    <select class="form-control" name="type" id="expense_type" required>
                                        <option value="gasoline" {{ old('type', $form->type) == 'gasoline' ? 'selected' : '' }}>Gasoline</option>
                                        <option value="parking_toll" {{ old('type', $form->type) == 'parking_toll' ? 'selected' : '' }}>Parking / Toll</option>
                                    </select>
                                </div>

                                {{-- Wrap gasoline-specific fields with .gasoline-fields --}}
                                <div class="mb-3 gasoline-fields">
                                    <label class="form-label">Liter Bensin <span class="font-italic font-weight-normal">(required)</span></label>
                                    <input type="text" class="form-control" name="liter" value="{{ old('liter', $form->liter) }}">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Total Harga <span class="font-italic font-weight-normal">(required)</span></label>
                                    <input type="string" class="form-control" name="total" id="total" required value="{{ old('total', $form->total) }}">
                                </div>
                            </div>

                            <div class="col-lg-6">
                                {{-- Wrap gasoline-specific fields with .gasoline-fields --}}
                                <div class="mb-3 gasoline-fields">
                                    <label class="form-label">Km (Odometer) <span class="font-italic font-weight-normal">(required)</span></label>
                                    <input type="number" class="form-control" name="jarak" id="jarak" value="{{ old('jarak', $form->jarak) }}">
                                </div>
                                <div class="mb-3 gasoline-fields">
                                    <label class="form-label">Tipe Bensin <span class="font-italic font-weight-normal">(required)</span></label>
                                    <select class="form-control" name="tipe_bensin" id="tipe_bensin">
                                        <option value="pertamax" {{ old('tipe_bensin', $form->tipe_bensin) == 'pertamax' ? 'selected' : '' }}>Pertamax</option>
                                        <option value="pertalite" {{ old('tipe_bensin', $form->tipe_bensin) == 'pertalite' ? 'selected' : '' }}>Pertalite</option>
                                    </select>
                                </div>
                                <div class="mb-3 gasoline-fields">
                                    <label class="form-label">Nomor Polisi <span class="font-italic font-weight-normal">(required)</span></label>
                                    <input type="text" class="form-control" name="nopol" id="nopol" value="{{ old('nopol', $form->nopol) }}">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Keterangan <span class="font-italic font-weight-normal">(required)</span></label>
                                    <textarea class="form-control" name="keterangan" id="keterangan" required>{{ old('keterangan', $form->keterangan) }}</textarea>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="mb-4">
                                    <label class="form-label mb-0">Lampiran Saat Ini</label>
                                    <p class="text-muted small mt-1 mb-2">Gunakan tombol preview untuk melihat lampiran.</p>
                                    <div class="table-responsive">
                                        <table class="table table-bordered align-middle" id="vehicle-existing-attachments-table">
                                            <thead class="table-light">
                                                <tr>
                                                    <th style="width: 30%">Kategori</th>
                                                    <th style="width: 35%">Nama File</th>
                                                    <th style="width: 15%" class="text-center">Preview</th>
                                                    <th style="width: 20%" class="text-center">Aksi</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse ($attachments as $attachment)
                                                    <tr class="vehicle-existing-attachment-row" data-attachment-id="{{ $attachment['id'] }}">
                                                        <td>{{ $attachment['file_category'] ? ucwords(str_replace('_', ' ', $attachment['file_category'])) : '-' }}</td>
                                                        <td>{{ $attachment['filename'] ?? basename($attachment['file_path']) }}</td>
                                                        <td class="text-center">
                                                            <button type="button"
                                                                    class="btn btn-sm btn-outline-secondary vehicle-preview-existing-attachment"
                                                                    data-preview-url="{{ $attachment['preview_url'] }}"
                                                                    data-download-url="{{ $attachment['download_url'] }}"
                                                                    data-preview-type="{{ $attachment['preview_type'] }}"
                                                                    data-file-name="{{ $attachment['filename'] ?? basename($attachment['file_path']) }}">
                                                                Preview
                                                            </button>
                                                        </td>
                                                        <td class="text-center">
                                                            <a href="{{ $attachment['download_url'] }}"
                                                               target="_blank"
                                                               class="btn btn-sm btn-outline-primary mr-1">
                                                                Download
                                                            </a>
                                                            @if($attachment['can_delete'])
                                                                <button type="button"
                                                                        class="btn btn-sm btn-outline-danger vehicle-delete-attachment"
                                                                        data-delete-url="{{ route('forms.vehicle.attachments.destroy', [$form->id, $attachment['id']]) }}">
                                                                    <i class="fas fa-trash"></i>
                                                                </button>
                                                            @endif
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr class="vehicle-existing-attachments-empty text-center text-muted">
                                                        <td colspan="4">Belum ada lampiran.</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="mb-3">
                                    <div class="d-flex align-items-center justify-content-between">
                                        <label class="form-label mb-0">Tambah Lampiran Baru</label>
                                        <button type="button" class="btn btn-outline-primary btn-sm" id="vehicle-add-new-attachment-row">
                                            <i class="fas fa-plus mr-1"></i> Tambah Lampiran
                                        </button>
                                    </div>
                                    <p class="text-muted small mt-1 mb-2">
                                        Maksimal 10 MB per file. Semua tipe file diperbolehkan kecuali <code>.exe</code>, <code>.bat</code>, <code>.sh</code>, <code>.cmd</code>, <code>.dll</code>, dan <code>.msi</code>.
                                    </p>
                                    <div class="table-responsive">
                                        <table class="table table-bordered align-middle" id="vehicle-new-attachments-table">
                                            <thead class="table-light">
                                                <tr>
                                                    <th style="width: 30%">Kategori</th>
                                                    <th style="width: 45%">Lampiran</th>
                                                    <th style="width: 15%" class="text-center">Preview</th>
                                                    <th style="width: 10%" class="text-center">Aksi</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr class="vehicle-new-attachments-empty text-center text-muted">
                                                    <td colspan="4">Belum ada lampiran baru.</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <button type="submit" class="btn btn-primary ml-2">Save</button>
                        </div>
                    </form>

                    @include('backend.components.attachment-preview-modal', [
                        'modalId' => 'vehicleExistingAttachmentPreviewModal',
                        'title' => 'Preview Lampiran',
                    ])

                    @include('backend.components.attachment-preview-modal', [
                        'modalId' => 'vehicleNewAttachmentPreviewModal',
                        'title' => 'Preview Lampiran',
                    ])

                    <div id="loading-spinner-overlay" class="d-none">
                        <div class="spinner-wrapper">
                            <div class="spinner-border text-primary" role="status">
                            </div>
                            <p>Submitting, please wait...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        new AutoNumeric('#total', {
            digitGroupSeparator: '.',
            decimalCharacter: ',',
            currencySymbol: 'Rp.',
            decimalPlaces: 0,
            unformatOnSubmit: true
        });

        const spinnerOverlay = document.getElementById('loading-spinner-overlay');

        document.getElementById('expense-form').addEventListener('submit', function () {
            spinnerOverlay.classList.remove('d-none');
            spinnerOverlay.classList.add('d-flex');
        });

        // Toggle gasoline specific fields
        const expenseTypeSelect = document.getElementById('expense_type');
        const gasolineFields = document.querySelectorAll('.gasoline-fields');
        const literInput = document.querySelector('input[name="liter"]');
        const jarakInput = document.querySelector('input[name="jarak"]');
        const tipeBensinSelect = document.getElementById('tipe_bensin');
        const nopolInput = document.getElementById('nopol');

        function toggleGasolineFields() {
            if (expenseTypeSelect.value === 'gasoline') {
                gasolineFields.forEach(field => field.style.display = 'block');
                literInput.setAttribute('required', 'required');
                jarakInput.setAttribute('required', 'required');
                tipeBensinSelect.setAttribute('required', 'required');
                nopolInput.setAttribute('required', 'required');
            } else {
                gasolineFields.forEach(field => field.style.display = 'none');
                literInput.value = '';
                jarakInput.value = '';
                tipeBensinSelect.value = '';
                nopolInput.value = '';
                literInput.removeAttribute('required');
                jarakInput.removeAttribute('required');
                tipeBensinSelect.removeAttribute('required');
                nopolInput.removeAttribute('required');
            }
        }

        toggleGasolineFields();
        expenseTypeSelect.addEventListener('change', toggleGasolineFields);

        const attachmentCategories = @json($attachmentCategories ?? ($vehicleAttachmentCategories ?? []));
        const blockedExtensions = ['exe', 'bat', 'sh', 'cmd', 'dll', 'msi'];
        const maxFileSizeBytes = 10 * 1024 * 1024;
        const existingEmptyRow = '<tr class="vehicle-existing-attachments-empty text-center text-muted"><td colspan="4">Belum ada lampiran.</td></tr>';
        const newEmptyRow = '<tr class="vehicle-new-attachments-empty text-center text-muted"><td colspan="4">Belum ada lampiran baru.</td></tr>';
        let vehicleNewAttachmentIndex = 0;

        function escapeHtml(value) {
            return String(value || '')
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;');
        }

        function categoryToLabel(value) {
            if (!value) {
                return 'Pilih Kategori';
            }
            return value.replace(/_/g, ' ').replace(/\b\w/g, function (char) {
                return char.toUpperCase();
            });
        }

        function detectPreviewType(extension) {
            const images = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
            if (images.indexOf(extension) !== -1) {
                return 'image';
            }
            if (extension === 'pdf') {
                return 'pdf';
            }
            return 'other';
        }

        function buildCategoryOptions() {
            return attachmentCategories.map(function (category) {
                return '<option value="' + category + '">' + escapeHtml(categoryToLabel(category)) + '</option>';
            }).join('');
        }

        function setInlinePreview($row, type, source) {
            const $box = $row.find('.vehicle-new-attachment-inline-preview');
            $box.removeClass('bg-light').html('<i class="fas fa-file-upload text-muted"></i>');

            if (type === 'image' && source) {
                $box.addClass('bg-light').html(
                    '<img src="' + source + '" class="img-thumbnail" style="width:100%;height:100%;object-fit:cover;" alt="Preview">'
                );
            } else if (type === 'pdf') {
                $box.addClass('bg-light').html('<i class="fas fa-file-pdf text-danger fa-lg"></i>');
            } else if (type === 'other') {
                $box.addClass('bg-light').html('<i class="fas fa-file-alt text-secondary fa-lg"></i>');
            }
        }

        function resetNewAttachmentRowData($row, clearInput = true) {
            const existingUrl = $row.data('objectUrl');
            if (existingUrl) {
                URL.revokeObjectURL(existingUrl);
            }

            $row.removeData('objectUrl')
                .removeData('previewType')
                .removeData('previewSource')
                .removeData('previewFileName')
                .removeData('downloadUrl');

            setInlinePreview($row, null, null);
            $row.find('.vehicle-preview-new-attachment').addClass('d-none');
            $row.find('.vehicle-new-preview-filename').text('');

            if (clearInput) {
                $row.find('.vehicle-new-attachment-file').val('');
            }
        }

        function openAttachmentModal(modalSelector, options) {
            const settings = Object.assign({
                title: 'Lampiran',
                type: 'other',
                source: null,
                downloadUrl: null,
                fileName: 'Lampiran'
            }, options || {});

            const $modal = $(modalSelector);
            const $image = $modal.find('.attachment-preview-image');
            const $object = $modal.find('.attachment-preview-object');
            const $placeholder = $modal.find('.attachment-preview-placeholder');

            $modal.find('.attachment-preview-modal-title').text(settings.title || 'Lampiran');

            $image.addClass('d-none').attr('src', '');
            $object.addClass('d-none').attr('data', '').attr('src', '');
            $placeholder.removeClass('d-none').html('Tidak ada file untuk ditampilkan.');

            if (settings.type === 'image' && settings.source) {
                $image.attr('src', settings.source).removeClass('d-none');
                $placeholder.addClass('d-none');
            } else if (settings.type === 'pdf' && settings.source) {
                $object.attr('data', settings.source).attr('src', settings.source).removeClass('d-none');
                $placeholder.addClass('d-none');
            } else {
                const safeName = escapeHtml(settings.fileName || 'Lampiran');
                let message = '<p class="mb-2">' + safeName + '</p><p class="text-muted mb-0">Preview tidak tersedia. Silakan unduh file untuk melihat konten.</p>';
                if (settings.downloadUrl) {
                    message += '<div class="mt-3"><a href="' + settings.downloadUrl + '" target="_blank" class="btn btn-sm btn-outline-primary">Download</a></div>';
                }
                $placeholder.html(message);
            }

            if (window.bootstrap && bootstrap.Modal && typeof bootstrap.Modal.getOrCreateInstance === 'function') {
                bootstrap.Modal.getOrCreateInstance($modal[0]).show();
            } else {
                $modal.modal('show');
            }
        }

        function refreshExistingEmptyState() {
            const $tbody = $('#vehicle-existing-attachments-table tbody');
            if (!$tbody.find('.vehicle-existing-attachment-row').length) {
                $tbody.html(existingEmptyRow);
            }
        }

        function refreshNewEmptyState() {
            const $tbody = $('#vehicle-new-attachments-table tbody');
            if (!$tbody.find('.vehicle-new-attachment-row').length) {
                $tbody.html(newEmptyRow);
            }
        }

        function addVehicleNewAttachmentRow() {
            const $tbody = $('#vehicle-new-attachments-table tbody');

            if ($tbody.find('.vehicle-new-attachments-empty').length) {
                $tbody.empty();
            }

            const index = vehicleNewAttachmentIndex++;
            const rowHtml = `
                <tr class="vehicle-new-attachment-row" data-index="${index}">
                    <td>
                        <select class="form-control vehicle-new-attachment-category" name="attachments[${index}][file_category]" required>
                            <option value="">${escapeHtml(categoryToLabel(''))}</option>
                            ${buildCategoryOptions()}
                        </select>
                    </td>
                    <td>
                        <div class="d-flex align-items-center">
                            <div class="vehicle-new-attachment-inline-preview border rounded d-flex align-items-center justify-content-center bg-white mr-2" style="width:56px;height:56px;">
                                <i class="fas fa-file-upload text-muted"></i>
                            </div>
                            <input type="file" class="form-control vehicle-new-attachment-file" name="attachments[${index}][file_path]">
                        </div>
                        <div class="small text-muted mt-1 vehicle-new-preview-filename"></div>
                    </td>
                    <td class="text-center">
                        <button type="button" class="btn btn-sm btn-outline-secondary vehicle-preview-new-attachment d-none">
                            Preview
                        </button>
                    </td>
                    <td class="text-center">
                        <button type="button" class="btn btn-sm btn-outline-danger vehicle-remove-new-attachment-row">
                            <i class="fas fa-trash"></i>
                        </button>
                    </td>
                </tr>
            `;

            $tbody.append(rowHtml);
        }

        $(function () {
            $('#vehicle-add-new-attachment-row').on('click', function () {
                addVehicleNewAttachmentRow();
            });

            $(document).on('click', '.vehicle-remove-new-attachment-row', function () {
                const $row = $(this).closest('tr');
                const $tbody = $('#vehicle-new-attachments-table tbody');
                resetNewAttachmentRowData($row, true);
                $row.remove();
                refreshNewEmptyState();
            });

            $(document).on('change', '.vehicle-new-attachment-file', function () {
                const $input = $(this);
                const $row = $input.closest('tr');
                const previewButton = $row.find('.vehicle-preview-new-attachment');
                const filenameHolder = $row.find('.vehicle-new-preview-filename');

                resetNewAttachmentRowData($row, false);
                filenameHolder.text('');

                const file = this.files && this.files[0];
                if (!file) {
                    return;
                }

                if (file.size > maxFileSizeBytes) {
                    alert('Ukuran file melebihi 10 MB.');
                    $input.val('');
                    return;
                }

                const extension = (file.name.split('.').pop() || '').toLowerCase();
                if (blockedExtensions.indexOf(extension) !== -1) {
                    alert('Tipe file tidak diperbolehkan.');
                    $input.val('');
                    return;
                }

                filenameHolder.text(escapeHtml(file.name));

                const previewType = detectPreviewType(extension);
                $row.data('previewType', previewType);
                $row.data('previewFileName', file.name);
                $row.data('downloadUrl', null);

                if (previewType === 'image') {
                    const reader = new FileReader();
                    reader.onload = function (event) {
                        const source = event.target.result;
                        $row.data('previewSource', source);
                        setInlinePreview($row, previewType, source);
                    };
                    reader.readAsDataURL(file);
                } else if (previewType === 'pdf') {
                    const objectUrl = URL.createObjectURL(file);
                    $row.data('previewSource', objectUrl);
                    $row.data('objectUrl', objectUrl);
                    setInlinePreview($row, previewType, null);
                } else {
                    $row.data('previewSource', null);
                    setInlinePreview($row, 'other', null);
                }

                previewButton.removeClass('d-none');
            });

            $(document).on('click', '.vehicle-preview-new-attachment', function () {
                const $row = $(this).closest('tr');
                const previewType = $row.data('previewType') || 'other';
                const previewSource = $row.data('previewSource') || null;
                const fileName = $row.data('previewFileName') || 'Lampiran';

                openAttachmentModal('#vehicleNewAttachmentPreviewModal', {
                    title: fileName,
                    type: previewType,
                    source: previewSource,
                    downloadUrl: null,
                    fileName: fileName
                });
            });

            $(document).on('click', '.vehicle-preview-existing-attachment', function () {
                const $button = $(this);
                const previewType = $button.data('preview-type') || 'other';
                const previewUrl = $button.data('preview-url') || null;
                const downloadUrl = $button.data('download-url') || null;
                const fileName = $button.data('file-name') || 'Lampiran';

                let type = previewType;
                let source = previewUrl;

                if (!previewUrl || (previewType !== 'image' && previewType !== 'pdf')) {
                    type = 'other';
                    source = null;
                }

                openAttachmentModal('#vehicleExistingAttachmentPreviewModal', {
                    title: fileName,
                    type: type,
                    source: source,
                    downloadUrl: downloadUrl,
                    fileName: fileName
                });
            });

            $(document).on('click', '.vehicle-delete-attachment', function () {
                const $button = $(this);
                const deleteUrl = $button.data('delete-url');
                const $row = $button.closest('tr');

                if (!deleteUrl) {
                    return;
                }

                Swal.fire({
                    title: 'Hapus lampiran?',
                    text: 'Lampiran yang dihapus tidak dapat dikembalikan.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, hapus',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (!result.isConfirmed) {
                        return;
                    }

                    $.ajax({
                        url: deleteUrl,
                        type: 'DELETE',
                        success: function (response) {
                            $row.remove();
                            refreshExistingEmptyState();
                            Swal.fire('Berhasil', response?.message || 'Lampiran berhasil dihapus.', 'success');
                        },
                        error: function (xhr) {
                            const message = xhr?.responseJSON?.message || 'Gagal menghapus lampiran.';
                            Swal.fire('Error', message, 'error');
                        }
                    });
                });
            });

            refreshExistingEmptyState();
            refreshNewEmptyState();

            // Provide an initial row for new attachments
            addVehicleNewAttachmentRow();
        });
    </script>
@endsection