@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="openForm(null)">
                <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='openForm(@json($marketPlace))'>Edit</button>

                                <form action="{{ route('admin.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">Tambah Toko Online</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <form id="marketplaceForm" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="_method" id="formMethod" value="POST">
                <div class="mb-3">
                    <label for="marketplaceName" class="form-label">Nama Toko</label>
                    <input type="text" name="name" class="form-control" id="marketplaceName" required>
                </div>
                <div class="mb-3">
                    <label for="marketplaceIcon" class="form-label">Icon</label>
                    <input type="file" name="icon" class="form-control" id="marketplaceIcon">
                    <small class="text-muted">Kosongkan jika tidak ingin mengubah icon.</small>
                </div>
                <div class="text-center">
                    <button type="submit" class="btn btn-primary me-2">Simpan</button>
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="offcanvas">Batal</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        function openForm(data) {
            const form = document.getElementById('marketplaceForm');
            const methodInput = document.getElementById('formMethod');
            const nameInput = document.getElementById('marketplaceName');
            const title = document.getElementById('marketplaceCanvasLabel');

            if (data) {
                form.action = `/admin/marketplaces/${data.id}`;
                methodInput.value = 'PUT';
                nameInput.value = data.name;
                title.innerText = 'Edit Toko Online';
            } else {
                form.action = `{{ route('admin.marketplaces.store') }}`;
                methodInput.value = 'POST';
                nameInput.value = '';
                title.innerText = 'Tambah Toko Online';
            }

            // Clear icon input
            document.getElementById('marketplaceIcon').value = '';
        }
    </script>
@endpush