@extends('backend.layout.app')

@section('content')
    <div class="page-content">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header bg-white">
                        <div class="d-flex justify-content-between align-items-center py-2">
                            <div>
                                <h5 class="mb-0 fw-bold">Delivery Methods</h5>
                                <small class="text-muted">বই অর্ডারের ডেলিভারি মেথড এবং চার্জ পরিচালনা করুন</small>
                            </div>
                            <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addMethodModal">
                                <i class="bi bi-plus-circle me-1"></i> Add New Delivery Method
                            </button>
                        </div>
                    </div>

                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-hover align-middle">
                                <thead class="table-light">
                                    <tr>
                                        <th style="width: 60px;">#</th>
                                        <th>Method Name (নাম)</th>
                                        <th>Delivery Charge (চার্জ)</th>
                                        <th>Status (অবস্থা)</th>
                                        <th class="text-center" style="width: 120px;">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($methods as $method)
                                        <tr id="parentTr_{{ $method->id }}">
                                            <td>{{ $loop->iteration }}</td>
                                            <td class="fw-semibold text-dark">{{ $method->name }}</td>
                                            <td>
                                                <span class="badge bg-light text-dark border fs-6">৳{{ number_format($method->charge, 2) }}</span>
                                            </td>
                                            <td>
                                                <div class="form-check form-switch">
                                                    <input class="form-check-input status-toggle" type="checkbox" role="switch"
                                                        data-id="{{ $method->id }}" {{ $method->is_active ? 'checked' : '' }}>
                                                    <label class="form-check-label small ms-1">{{ $method->is_active ? 'Active' : 'Inactive' }}</label>
                                                </div>
                                            </td>
                                            <td class="text-center">
                                                <div class="action-btn-group">
                                                    <button type="button" class="action-btn action-btn-edit edit-method-btn"
                                                        data-id="{{ $method->id }}"
                                                        data-name="{{ $method->name }}"
                                                        data-charge="{{ $method->charge }}"
                                                        data-active="{{ $method->is_active ? '1' : '0' }}"
                                                        title="Edit">
                                                        <i class="bi bi-pencil-square"></i>
                                                    </button>
                                                    <a href="javascript:void(0)" class="action-btn action-btn-danger deleteButton"
                                                        data-parentid="parentTr_{{ $method->id }}"
                                                        data-url="{{ route('admin.delivery_method.delete', $method->id) }}"
                                                        title="Delete">
                                                        <i class="bi bi-trash3-fill"></i>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center py-4 text-muted">
                                                কোনো ডেলিভারি মেথড পাওয়া যায়নি। উপরে 'Add New Delivery Method' বাটনে ক্লিক করে যোগ করুন।
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Method Modal -->
    <div class="modal fade" id="addMethodModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form action="{{ route('admin.delivery_method.store') }}" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title fw-bold">Add New Delivery Method</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 class="form-label fw-semibold">Method Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control" placeholder="যেমন: ঢাকার ভিতরে / ঢাকার বাইরে" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Delivery Charge (৳) <span class="text-danger">*</span></label>
                            <input type="number" step="0.01" min="0" name="charge" class="form-control" placeholder="যেমন: 60 বা 120" required>
                        </div>
                        <div class="form-check form-switch mt-3">
                            <input class="form-check-input" type="checkbox" name="is_active" value="1" id="addStatusSwitch" checked>
                            <label class="form-check-label" for="addStatusSwitch">Active</label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary btn-sm">Save Method</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Edit Method Modal -->
    <div class="modal fade" id="editMethodModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form id="editMethodForm" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="modal-header">
                        <h5 class="modal-title fw-bold">Edit Delivery Method</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 class="form-label fw-semibold">Method Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" id="edit_name" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Delivery Charge (৳) <span class="text-danger">*</span></label>
                            <input type="number" step="0.01" min="0" name="charge" id="edit_charge" class="form-control" required>
                        </div>
                        <div class="form-check form-switch mt-3">
                            <input class="form-check-input" type="checkbox" name="is_active" value="1" id="edit_is_active">
                            <label class="form-check-label" for="edit_is_active">Active</label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary btn-sm">Update Method</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @push('js')
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                // Edit modal populate
                const editModalEl = document.getElementById('editMethodModal');
                const editModal = new bootstrap.Modal(editModalEl);
                const editForm = document.getElementById('editMethodForm');
                const editNameInput = document.getElementById('edit_name');
                const editChargeInput = document.getElementById('edit_charge');
                const editActiveSwitch = document.getElementById('edit_is_active');

                document.querySelectorAll('.edit-method-btn').forEach(btn => {
                    btn.addEventListener('click', function () {
                        const id = this.dataset.id;
                        const name = this.dataset.name;
                        const charge = this.dataset.charge;
                        const active = this.dataset.active === '1';

                        editForm.action = `{{ url('admin/delivery-method/update') }}/${id}`;
                        editNameInput.value = name;
                        editChargeInput.value = charge;
                        editActiveSwitch.checked = active;

                        editModal.show();
                    });
                });

                // Status toggle
                document.querySelectorAll('.status-toggle').forEach(toggle => {
                    toggle.addEventListener('change', function () {
                        const id = this.dataset.id;
                        const status = this.checked ? 1 : 0;
                        const label = this.closest('.form-check').querySelector('.form-check-label');

                        fetch("{{ route('admin.delivery_method.update-status') }}", {
                            method: 'PATCH',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                'Accept': 'application/json'
                            },
                            body: JSON.stringify({ id: id, status: status })
                        })
                        .then(res => res.json())
                        .then(data => {
                            if (data.success) {
                                if (label) {
                                    label.textContent = status ? 'Active' : 'Inactive';
                                }
                                if (typeof toastr !== 'undefined') {
                                    toastr.success(data.message);
                                }
                            } else {
                                this.checked = !this.checked;
                                if (typeof toastr !== 'undefined') {
                                    toastr.error(data.message || 'Failed to update status');
                                }
                            }
                        })
                        .catch(err => {
                            this.checked = !this.checked;
                            console.error(err);
                        });
                    });
                });
            });
        </script>
    @endpush
@endsection