@extends('template.desktop.app')

@section('content')
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Ekspeidisi</h5>
            <div class="btn-group">
                <button class="btn btn-primary btn-sm" data-bs-toggle="offcanvas" data-bs-target="#shipmentCanvas"
                    onclick="openCreateForm()">
                   <i class="icon-base ti tabler-plus"></i> Tambah Ekspedisi
                </button>
            </div>
        </div>

        <div class="card-body">
            <div class="table-responsive text-nowrap">
                <table class="table">
                    <thead class="table-light">
                        <tr class="text-nowrap">
                            <th>Nama Ekspedisi</th>
                            <th>Icon</th>
                            <th>Status</th>
                            <th style="width: 150px;">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($shipments as $shipment)
                            <tr>
                                <td>{{ $shipment->name }}</td>
                                <td>
                                    @if ($shipment->icon)
                                        <img src="{{ asset('storage/icons/' . $shipment->icon) }}" width="32"
                                            alt="icon">
                                    @endif
                                </td>
                                <td>
                                    <span class="badge {{ $shipment->is_active ? 'bg-success' : 'bg-secondary' }}">
                                        {{ $shipment->is_active ? 'Active' : 'Inactive' }}
                                    </span>
                                </td>
                                <td>
                                    <button class="btn btn-sm btn-warning"
                                        onclick='openEditForm(@json($shipment))' data-bs-toggle="offcanvas"
                                        data-bs-target="#shipmentCanvas">
                                        Edit
                                    </button>

                                    <form action="{{ route('admin.shipments.destroy', $shipment->id) }}" method="POST"
                                        class="d-inline">
                                        @csrf
                                        @method('DELETE')
                                        <button class="btn btn-sm btn-danger" onclick="return confirm('Are you sure?')">
                                            Delete
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="offcanvas offcanvas-end" tabindex="-1" id="shipmentCanvas" aria-labelledby="shipmentCanvasLabel">
        <div class="offcanvas-header border-bottom">
            <h5 id="shipmentCanvasLabel" class="offcanvas-title">Create Shipment</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body p-6">
            <form id="shipmentForm" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="_method" value="POST" id="formMethod" />

                @include('_admin.shipments._form', ['shipment' => null])

                <div class="text-center mt-4">
                    <button type="submit" class="btn btn-primary">Save</button>
                    <button type="button" class="btn btn-light" data-bs-dismiss="offcanvas">Cancel</button>
                </div>
            </form>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        function openCreateForm() {
            document.getElementById('shipmentCanvasLabel').innerText = 'Create Shipment';
            const form = document.getElementById('shipmentForm');
            form.action = '{{ route('admin.shipments.store') }}';
            document.getElementById('formMethod').value = 'POST';

            form.reset();
            form.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = true);
        }

        function openEditForm(data) {
            document.getElementById('shipmentCanvasLabel').innerText = 'Edit Shipment';
            const form = document.getElementById('shipmentForm');
            form.action = `/admin/shipments/${data.id}/update`;
            document.getElementById('formMethod').value = 'POST';

            form.querySelector('[name="name"]').value = data.name || '';
            form.querySelector('[name="code"]').value = data.code || '';
            form.querySelector('[name="description"]').value = data.description || '';
            form.querySelector('[name="is_active"]').checked = data.is_active;

            form.querySelector('[name="icon"]').value = '';

            const offcanvas = new bootstrap.Offcanvas(document.getElementById('shipmentCanvas'));
            offcanvas.show();
        }
    </script>
@endpush