@extends('layouts.app')

@section('title', 'Trades')

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

    <div class="card border-0 shadow-sm">
        <div class="card-body p-0">
            <div class="p-3">
                <table id="tradesTable" class="table table-hover align-middle mb-0 w-100">
                    <thead class="table-light">
                        <tr>
                            {{-- <th style="width:50px">#</th> --}}
                            <th style="width:50px">Sort No</th>
                            <th>Name</th>
                            <th style="width:130px">Admission Fee</th>
                            <th style="width:110px">Exam Fee</th>
                            <th style="width:120px">Monthly Fee</th>
                            <th style="width:110px">Duration</th>
                            <th style="width:100px">Status</th>
                            <th style="width:130px">Created</th>
                            <th style="width:160px">Actions</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    @include('trades.modals')
@endsection

@push('scripts')
<script type="module">
(function () {
    // ── DataTable ──────────────────────────────────────────────
    const table = new DataTable('#tradesTable', {
        processing: true,
        serverSide: true,
        ajax: { url: '{{ route("trades.data") }}', type: 'GET' },
        columns: [
            // {
            //     data: null, orderable: false, searchable: false,
            //     render: (d, t, r, m) => m.row + m.settings._iDisplayStart + 1
            // },
            { data: 'order_no', name: 'order_no', searchable: false },
            { data: 'name', name: 'name' },
            {
                data: 'admission_fee', name: 'admission_fee', searchable: false,
                render: v => v.toLocaleString()
            },
            {
                data: 'exam_fee', name: 'exam_fee', searchable: false,
                render: v => v.toLocaleString()
            },
            {
                data: 'monthly_fee', name: 'monthly_fee', searchable: false,
                render: v => v.toLocaleString()
            },
            {
                data: 'duration', name: 'duration', searchable: false,
                render: v => `${v} mo`
            },
            {
                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-trade"
                                data-id="${row.id}"
                                data-order-no="${row.order_no ?? ''}"
                                data-name="${row.name}"
                                data-admission-fee="${row.admission_fee}"
                                data-exam-fee="${row.exam_fee}"
                                data-monthly-fee="${row.monthly_fee}"
                                data-duration="${row.duration}"
                                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-trade"
                                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('tradeModal'));
    const form    = document.getElementById('tradeForm');
    const spinner = document.getElementById('tradeSpinner');

    function openModal(id = null, orderNo = '', name = '', admissionFee = '', examFee = '', monthlyFee = '', duration = '') {
        form.reset();
        clearErrors(form);
        document.getElementById('tradeId').value           = id ?? '';
        document.getElementById('tradeModalTitle').textContent = id ? 'Edit Trade' : 'Add Trade';
        document.getElementById('orderNo').value           = orderNo;
        document.getElementById('tradeName').value         = name;
        document.getElementById('admissionFee').value      = admissionFee;
        document.getElementById('examFee').value           = examFee;
        document.getElementById('monthlyFee').value        = monthlyFee;
        document.getElementById('duration').value          = duration;
        modal.show();
    }

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

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

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

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

        Swal.fire({
            title: `${action} this trade?`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: action,
            confirmButtonColor: isActive ? '#dc3545' : '#198754',
            cancelButtonText: 'Cancel',
            reverseButtons: true,
        }).then(r => {
            if (!r.isConfirmed) return;
            $.ajax({
                url: `/trades/${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('tradeId').value;
        const url = id ? `/trades/${id}` : '{{ route("trades.store") }}';

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

        $.ajax({
            url,
            method: id ? 'PUT' : 'POST',
            data: {
                name:          document.getElementById('tradeName').value,
                order_no:      document.getElementById('orderNo').value,
                admission_fee: document.getElementById('admissionFee').value,
                exam_fee:      document.getElementById('examFee').value,
                monthly_fee:   document.getElementById('monthlyFee').value,
                duration:      document.getElementById('duration').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) {
        const fieldMap = {
            name:          'tradeName',
            order_no:      'orderNo',
            admission_fee: 'admissionFee',
            exam_fee:      'examFee',
            monthly_fee:   'monthlyFee',
            duration:      'duration',
        };
        Object.entries(errors).forEach(([field, messages]) => {
            const inputId = fieldMap[field] || field;
            const input   = document.getElementById(inputId);
            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 });
    }
})();
</script>
@endpush