@extends('template.desktop.app')

@section('content')
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h4 class="card-title">Toko Online</h4>
            <button class="btn btn-primary btn-sm" data-bs-toggle="offcanvas" data-bs-target="#marketplaceCanvas"
                onclick="openCreateForm()">
                <i class="icon-base ti tabler-plus"></i> Tambah Toko Online
            </button>
        </div>

        <div class="card-body">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Nama</th>
                        <th>Icon</th>
                        <th width="180">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($marketPlaces as $marketPlace)
                        <tr>
                            <td>{{ $marketPlace->name }}</td>
                            <td>
                                @if ($marketPlace->icon)
                                    <img src="{{ asset('storage/icons/' . $marketPlace->icon) }}" width="32">
                                @endif
                            </td>
                            <td>
                                <button class="btn btn-sm btn-warning" data-bs-toggle="offcanvas"
                                    data-bs-target="#marketplaceCanvas"
                                    onclick='openEditForm(@json($marketPlace))'>Edit</button>

                                <form action="{{ route('marketplaces.destroy', $marketPlace->id) }}" method="POST"
                                    class="d-inline-block">
                                    @csrf
                                    @method('DELETE')
                                    <button class="btn btn-sm btn-danger"
                                        onclick="return confirm('Hapus toko ini?')">Delete</button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="marketplaceCanvas" aria-labelledby="marketplaceCanvasLabel">
        <div class="offcanvas-header border-bottom">
            <h5 id="marketplaceCanvasLabel" class="offcanvas-title">Create Marketplace</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="marketplaceForm" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="_method" value="POST" id="formMethod" />

                @include('marketplaces.form', ['marketplace' => 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('marketplaceCanvasLabel').innerText = 'Create Marketplace';
            const form = document.getElementById('marketplaceForm');
            form.action = '{{ route('marketplaces.store') }}';
            document.getElementById('formMethod').value = 'POST';

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

        function openEditForm(data) {
            document.getElementById('marketplaceCanvasLabel').innerText = 'Edit Shipment';
            const form = document.getElementById('marketplaceForm');
            form.action = `/marketplaces/${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('marketplaceCanvas'));
            offcanvas.show();
        }
    </script>
@endpush