expense/resources/views/backend/pages/forms/upcountry/create.blade.php

@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>Tambahkan Expense Up Country Baru</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>
                        </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>
    @php
        $attachmentCategoryLabels = $attachmentCategoryLabels ?? ($upCountryAttachmentCategories ?? []);
        $attachmentCategories = $attachmentCategories ?? ($upCountryAttachmentCategoryKeys ?? array_keys($attachmentCategoryLabels));
    @endphp
    <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.up-country.store') }}" enctype="multipart/form-data">
                        @csrf
                        @include('backend.layouts.partials.messages')
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="mb-3">
                                    <label class="form-label">Pilih Rayon <span class="font-italic font-weight-normal">(required)</span></label>
                                    <select class="form-control form-control-md" name="rayon_id" required>
                                        <option value="">Pilih Rayon</option>
                                        @foreach ($rayons as $rayon)
                                            <option value="{{ $rayon->id }}">
                                                {{ $rayon->name }}{{ $rayon->cabang ? ' - ' . $rayon->cabang->name : '' }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Tanggal <span class="font-italic font-weight-normal">(required)</span></label>
                                    <input type="date" class="form-control" name="tanggal" required value="{{ old('tanggal') }}">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Tujuan <span class="font-italic font-weight-normal">(required)</span></label>
                                    <input type="text" class="form-control" name="tujuan" required value="{{ old('tujuan') }}">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Jarak (km) <span class="font-italic font-weight-normal">(required)</span></label>
                                    <input type="number" class="form-control" name="jarak" required value="{{ old('jarak') }}">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Allowance <span class="font-italic font-weight-normal">(optional)</span></label>
                                    <input type="string" class="form-control" name="allowance" id="allowance" value="{{ old('allowance') }}">
                                </div>
                            </div>

                            <div class="col-lg-6">
                                <div class="mb-3">
                                    <label class="form-label">Transport Dalam Kota <span class="font-italic font-weight-normal">(optional)</span></label>
                                    <input type="string" class="form-control" name="transport_dalkot" id="transport_dalkot" value="{{ old('transport_dalkot') }}">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Transport Antar Kota <span class="font-italic font-weight-normal">(optional)</span></label>
                                    <input type="string" class="form-control" name="transport_ankot" id="transport_ankot" value="{{ old('transport_ankot') }}">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Hotel <span class="font-italic font-weight-normal">(optional)</span></label>
                                    <input type="string" class="form-control" name="hotel" id="hotel" value="{{ old('hotel') }}">
                                </div>
                            </div>

                            <div class="col-lg-12">
                                <div class="mb-3">
                                    <div class="d-flex align-items-center justify-content-between">
                                        <label class="form-label mb-0">Lampiran</label>
                                        <button type="button" class="btn btn-outline-primary btn-sm" id="add-attachment-row">
                                            <i class="fas fa-plus me-1"></i> Tambah Lampiran
                                        </button>
                                    </div>
                                    <p class="text-muted small mt-1 mb-2">
                                        Format file yang diperbolehkan: JPG, JPEG, PNG, atau PDF. Ukuran maksimum 5 MB per file.
                                    </p>
                                    <div class="table-responsive">
                                        <table class="table table-bordered align-middle" id="attachments-table">
                                            <thead class="table-light">
                                                <tr>
                                                    <th style="width: 30%">Kategori Lampiran</th>
                                                    <th style="width: 45%">Lampiran</th>
                                                    <th style="width: 15%" class="text-center">Pratinjau</th>
                                                    <th style="width: 10%" class="text-center">Aksi</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr class="attachments-empty text-center text-muted">
                                                    <td colspan="4">Belum ada lampiran ditambahkan.</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-12">
                                <div class="mb-3">
                                    <label class="form-label">UC Plan <span class="font-italic font-weight-normal">(optional)</span></label>
                                    <input type="file" class="form-control" name="uc_plan" value="{{ old('uc_plan') }}">
                                </div>
                            </div>

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

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

                    <div id="loading-spinner-overlay" class="d-none">
                        <div class="spinner-wrapper">
                            <div class="spinner-border text-primary" role="status">
                            </div>
                            <p>Sedang mengirim, mohon tunggu...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        new AutoNumeric('#allowance', {
            digitGroupSeparator: '.',
            decimalCharacter: ',',
            currencySymbol: 'Rp.',
            decimalPlaces: 0,
            unformatOnSubmit: true
        });

        new AutoNumeric('#transport_dalkot', {
            digitGroupSeparator: '.',
            decimalCharacter: ',',
            currencySymbol: 'Rp.',
            decimalPlaces: 0,
            unformatOnSubmit: true
        });

        new AutoNumeric('#transport_ankot', {
            digitGroupSeparator: '.',
            decimalCharacter: ',',
            currencySymbol: 'Rp.',
            decimalPlaces: 0,
            unformatOnSubmit: true
        });

        new AutoNumeric('#hotel', {
            digitGroupSeparator: '.',
            decimalCharacter: ',',
            currencySymbol: 'Rp.',
            decimalPlaces: 0,
            unformatOnSubmit: true
        });

        const attachmentCategories = @json($attachmentCategories ?? ($upCountryAttachmentCategoryKeys ?? []));
        const attachmentCategoryLabels = @json($attachmentCategoryLabels ?? ($upCountryAttachmentCategories ?? []));
        const fileAccept = '.jpg,.jpeg,.png,.pdf';
        let attachmentIndex = 0;

        function categoryToLabel(value) {
          if (!value) {
            return 'Pilih Kategori';
          }

          if (attachmentCategoryLabels && attachmentCategoryLabels[value]) {
            return attachmentCategoryLabels[value];
          }

          return value
              .replace(/_/g, ' ')
              .replace(/\b\w/g, (char) => char.toUpperCase());
        }

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

        function resetInlinePreview($row) {
            $row
                .find('.attachment-inline-preview')
                .removeClass('bg-light')
                .html('<i class="fas fa-file-upload text-muted"></i>');
        }

        function clearRowData($row) {
            const existingUrl = $row.data('objectUrl');
            if (existingUrl) {
                URL.revokeObjectURL(existingUrl);
            }

            $row.removeData('objectUrl');
            $row.removeData('previewType');
            $row.removeData('previewSource');
            resetInlinePreview($row);
            $row.find('.preview-new-attachment').addClass('d-none');
            $row.find('.preview-filename').text('');
        }

        function addAttachmentRow() {
            const attachmentTableBody = $('#attachments-table tbody');
            const emptyRowMarkup = `<tr class="attachments-empty text-center text-muted"><td colspan="4">Belum ada lampiran ditambahkan.</td></tr>`;

            if (attachmentTableBody.find('.attachments-empty').length) {
                attachmentTableBody.empty();
            }

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

            attachmentTableBody.append(row);
        }

        function removeAttachmentRow(button) {
            const $row = $(button).closest('tr');
            const attachmentTableBody = $('#attachments-table tbody');
            const emptyRowMarkup = `<tr class="attachments-empty text-center text-muted"><td colspan="4">Belum ada lampiran ditambahkan.</td></tr>`;

            clearRowData($row);
            $row.remove();

            if (!attachmentTableBody.find('.attachment-row').length) {
                attachmentTableBody.append(emptyRowMarkup);
            }
        }

        function setInlinePreview($row, type, source) {
            const previewBox = $row.find('.attachment-inline-preview');

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

        function openAttachmentModal(modalSelector, title, type, source) {
            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(title || 'Lampiran');
            $image.addClass('d-none').attr('src', '');
            $object.addClass('d-none').attr('data', '').attr('src', '');
            $placeholder.removeClass('d-none');

            if (type === 'image' && source) {
                $image.attr('src', source).removeClass('d-none');
                $placeholder.addClass('d-none');
            } else if (type === 'pdf' && source) {
                $object.attr('data', source).attr('src', source).removeClass('d-none');
                $placeholder.addClass('d-none');
            }

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

        function previewFile(input) {
            const $input = $(input);
            const $row = $input.closest('tr');
            const previewButton = $row.find('.preview-new-attachment');
            const filenameHolder = $row.find('.preview-filename');

            clearRowData($row);

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

            filenameHolder.text(file.name);
            const extension = file.name.split('.').pop().toLowerCase();

            if (['jpg', 'jpeg', 'png'].includes(extension)) {
                const reader = new FileReader();
                reader.onload = function (event) {
                    const source = event.target.result;
                    $row.data('previewType', 'image');
                    $row.data('previewSource', source);
                    setInlinePreview($row, 'image', source);
                    previewButton.removeClass('d-none');
                };
                reader.readAsDataURL(file);
            } else {
                const objectUrl = URL.createObjectURL(file);
                $row.data('previewType', 'pdf');
                $row.data('previewSource', objectUrl);
                $row.data('objectUrl', objectUrl);
                setInlinePreview($row, 'pdf');
                previewButton.removeClass('d-none');
            }
        }

        $(function () {
            const spinnerOverlay = $('#loading-spinner-overlay');

            $('#expense-form').on('submit', function () {
                spinnerOverlay.removeClass('d-none').addClass('d-flex');
            });

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

            $(document).on('click', '.remove-attachment-row', function () {
                removeAttachmentRow(this);
            });

            $(document).on('change', '.attachment-file', function () {
                previewFile(this);
            });

            $(document).on('click', '.preview-new-attachment', function () {
                const $row = $(this).closest('tr');
                const previewType = $row.data('previewType');
                const previewSource = $row.data('previewSource');
                const category = categoryToLabel($row.find('.attachment-category').val());
                const modalSelector = $(this).data('modal') || '#newAttachmentPreviewModal';

                openAttachmentModal(modalSelector, category, previewType, previewSource);
            });
        });
    </script>
@endsection