@extends('layouts.layout-admin')

@section('title', 'Shipping Costs')

@section('header_title', 'Shipping Costs')
@section('header_subtitle', 'Manage shipping costs by destination')

@section('content')
    <div class="container-fluid">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1 class="h3">Shipping Costs List</h1>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addShippingCostModal">
                <i class="bi bi-plus-circle me-2"></i>Add Shipping Cost
            </button>
        </div>

        <div class="card shadow">
            <div class="card-body">
                <div class="table-responsive">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <form action="{{ route('admin.shipping-costs.index') }}" method="GET" class="d-flex align-items-center">
                            <div class="input-group">
                                <input type="text" name="search" class="form-control form-control-sm"
                                    placeholder="Search destination..." value="{{ request('search') }}">
                                <button type="submit" class="btn btn-sm btn-outline-secondary">
                                    <i class="bi bi-search"></i>
                                </button>
                            </div>
                        </form>
                    </div>

                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Destination</th>
                                <th>Cost</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($shippingCosts as $shippingCost)
                                <tr>
                                    <td>{{ $shippingCost->destination }}</td>
                                    <td>Rp {{ number_format($shippingCost->cost, 0, ',', '.') }}</td>
                                    <td>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-sm btn-info" data-bs-toggle="modal"
                                                data-bs-target="#editShippingCostModal{{ $shippingCost->id }}">
                                                <i class="bi bi-pencil"></i>
                                            </button>
                                            <form action="{{ route('admin.shipping-costs.destroy', $shippingCost) }}" method="POST"
                                                class="d-inline delete-form">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-danger">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="3" class="text-center py-4">
                                        <div class="d-flex flex-column align-items-center">
                                            <i class="bi bi-truck display-4 text-muted mb-2"></i>
                                            <p class="text-muted">No shipping costs found</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>

                    <div class="mt-4">
                        {{ $shippingCosts->withQueryString()->links() }}
                    </div>
                </div>
            </div>
        </div>

        <!-- Add Modal -->
        <div class="modal fade" id="addShippingCostModal" tabindex="-1" aria-labelledby="addShippingCostModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <form action="{{ route('admin.shipping-costs.store') }}" method="POST">
                        @csrf
                        <div class="modal-header">
                            <h5 class="modal-title" id="addShippingCostModalLabel">Add Shipping Cost</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-3">
                                <label for="destination" class="form-label">Destination <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('destination') is-invalid @enderror"
                                    name="destination" required value="{{ old('destination') }}">
                                @error('destination')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label for="cost" class="form-label">Cost (Rp) <span class="text-danger">*</span></label>
                                <input type="number" class="form-control @error('cost') is-invalid @enderror"
                                    name="cost" required value="{{ old('cost') }}">
                                @error('cost')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary"><i class="bi bi-plus-circle me-1"></i>Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Edit Modals -->
        @foreach ($shippingCosts as $shippingCost)
            <div class="modal fade" id="editShippingCostModal{{ $shippingCost->id }}" tabindex="-1"
                aria-labelledby="editShippingCostModalLabel{{ $shippingCost->id }}" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <form action="{{ route('admin.shipping-costs.update', $shippingCost) }}" method="POST">
                            @csrf
                            @method('PUT')
                            <div class="modal-header">
                                <h5 class="modal-title" id="editShippingCostModalLabel{{ $shippingCost->id }}">
                                    Edit Shipping Cost: {{ $shippingCost->destination }}
                                </h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <div class="mb-3">
                                    <label for="destination" class="form-label">Destination <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('destination') is-invalid @enderror"
                                        name="destination" required value="{{ old('destination', $shippingCost->destination) }}">
                                    @error('destination')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label for="cost" class="form-label">Cost (Rp) <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control @error('cost') is-invalid @enderror"
                                        name="cost" required value="{{ old('cost', $shippingCost->cost) }}">
                                    @error('cost')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                <button type="submit" class="btn btn-primary"><i class="bi bi-save me-1"></i>Update</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        @if (session('success'))
            Swal.fire({ icon: 'success', title: 'Success!', text: "{{ session('success') }}", showConfirmButton: false, timer: 3000, toast: true, position: 'top-end' });
        @endif
        @if (session('error'))
            Swal.fire({ icon: 'error', title: 'Error!', text: "{{ session('error') }}", showConfirmButton: true });
        @endif
    </script>
@endpush