@extends('layouts.app')

@section('title', 'Branches')

@section('content')
    <div class="d-flex align-items-center justify-content-between mb-4">
        <h5 class="fw-semibold mb-0">Branches</h5>
        <button class="btn btn-dark btn-sm" id="btnAddBranch">
            <i class="bi bi-plus-lg me-1"></i> Add Branch
        </button>
    </div>

    <div class="card border-0 shadow-sm">
        <div class="card-body p-0">
            <div class="p-3">
                <table id="branchesTable" class="table table-hover align-middle mb-0 w-100">
                    <thead class="table-light">
                        <tr>
                            <th style="width:50px">#</th>
                            <th>Name</th>
                            <th style="width:100px">Status</th>
                            <th style="width:130px">Created</th>
                            <th style="width:130px">Actions</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    @include('branches.modals')
@endsection

@push('scripts')
<script type="module">
(function () {
    // ── DataTable ──────────────────────────────────────────────
    const table = new DataTable('#branchesTable', {
        processing: true,
        serverSide: true,
        ajax: { url: '{{ route("branches.data") }}', type: 'GET' },
        columns: [
            {
                data: null, orderable: false, searchable: false,
                render: (d, t, r, m) => m.row + m.settings._iDisplayStart + 1
            },
            { data: 'name', name: 'name' },
            {
                data: 'is_active', name: 'is_active', searchable: false,
                render: v => v
                    ? '<span class="badge bg-success-subtle text-success border border-success-subtle">Active</span>'
                    : '<span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle">Blocked</span>'
            },
            { data: 'created_at', name: 'created_at', searchable: false },
            {
                data: null, orderable: false, searchable: false,
                render: (d, t, row) => `
                    <div class="d-flex gap-1">
                        <button class="btn btn-sm btn-outline-secondary btn-edit-branch"
                                data-id="${row.id}"
                                data-name="${esc(row.name)}"
                                title="Edit">
                            <i class="bi bi-pencil"></i>
                        </button>
                        <button class="btn btn-sm ${row.is_active ? 'btn-outline-warning' : 'btn-outline-success'} btn-toggle-branch"
                                data-id="${row.id}"
                                data-active="${row.is_active ? 1 : 0}"
                                title="${row.is_active ? 'Block' : 'Unblock'}">
                            <i class="bi bi-${row.is_active ? 'slash-circle' : 'check-circle'}"></i>
                            ${row.is_active ? 'Block' : 'Unblock'}
                        </button>
                    </div>`
            }
        ],
        order: [[1, 'asc']],
        pageLength: 10,
        language: { processing: '<div class="spinner-border spinner-border-sm text-secondary"></div>' }
    });

    // ── Modal helpers ──────────────────────────────────────────
    const modal   = new bootstrap.Modal(document.getElementById('branchModal'));
    const form    = document.getElementById('branchForm');
    const spinner = document.getElementById('branchSpinner');

    function openModal(id = null, name = '') {
        form.reset();
        clearErrors(form);
        document.getElementById('branchId').value         = id ?? '';
        document.getElementById('branchModalTitle').textContent = id ? 'Edit Branch' : 'Add Branch';
        document.getElementById('branchName').value       = name;
        modal.show();
    }

    // ── Open for create ────────────────────────────────────────
    document.getElementById('btnAddBranch').addEventListener('click', () => openModal());

    // ── Open for edit ──────────────────────────────────────────
    document.addEventListener('click', function (e) {
        const btn = e.target.closest('.btn-edit-branch');
        if (btn) openModal(btn.dataset.id, btn.dataset.name);
    });

    // ── Toggle block / unblock ─────────────────────────────────
    document.addEventListener('click', function (e) {
        const btn = e.target.closest('.btn-toggle-branch');
        if (!btn) return;

        const id       = btn.dataset.id;
        const isActive = parseInt(btn.dataset.active);
        const action   = isActive ? 'Block' : 'Unblock';

        Swal.fire({
            title: `${action} this branch?`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: action,
            confirmButtonColor: isActive ? '#dc3545' : '#198754',
            cancelButtonText: 'Cancel',
            reverseButtons: true,
        }).then(r => {
            if (!r.isConfirmed) return;
            $.ajax({
                url: `/branches/${id}/toggle`,
                method: 'PATCH',
                success: res => { table.ajax.reload(null, false); toast('success', res.message); },
                error:   ()  => toast('error', 'Something went wrong.')
            });
        });
    });

    // ── Form submit (create + edit) ────────────────────────────
    form.addEventListener('submit', function (e) {
        e.preventDefault();
        const id  = document.getElementById('branchId').value;
        const url = id ? `/branches/${id}` : '{{ route("branches.store") }}';

        clearErrors(form);
        spinner.classList.remove('d-none');

        $.ajax({
            url,
            method: id ? 'PUT' : 'POST',
            data: { name: document.getElementById('branchName').value },
            success: res => {
                modal.hide();
                table.ajax.reload(null, false);
                toast('success', res.message);
            },
            error: xhr => {
                if (xhr.status === 422) {
                    showErrors(form, xhr.responseJSON.errors);
                } else {
                    toast('error', 'Something went wrong.');
                }
            },
            complete: () => spinner.classList.add('d-none')
        });
    });

    // ── Utilities ──────────────────────────────────────────────
    function clearErrors(form) {
        form.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));
        form.querySelectorAll('.invalid-feedback').forEach(el => el.textContent = '');
    }

    function showErrors(form, errors) {
        Object.entries(errors).forEach(([field, messages]) => {
            const input = form.querySelector(`[name="${field}"]`);
            if (input) {
                input.classList.add('is-invalid');
                const fb = input.nextElementSibling;
                if (fb && fb.classList.contains('invalid-feedback')) fb.textContent = messages[0];
            }
        });
    }

    function toast(icon, title) {
        Swal.fire({ toast: true, position: 'top-end', showConfirmButton: false, timer: 3000, timerProgressBar: true, icon, title });
    }

    function esc(str) {
        const d = document.createElement('div');
        d.textContent = str ?? '';
        return d.innerHTML;
    }
})();
</script>
@endpush