@extends('backend.representative.layouts.representative-app')

@section('title', 'Store List')

@push('style')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
<style>
    .select2-container {
        width: 100% !important;
        display: block;
    }
    .select2-container .select2-selection--single {
        height: 38px !important;
        padding: 5px;
    }
</style>
@endpush

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-title">Store List</h1>
    </div>
    <div class="ms-auto pageheader-btn">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li>
            <li class="breadcrumb-item active" aria-current="page">Stores</li>
        </ol>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                 <div class="mb-3 d-flex justify-content-between">
                    <div>
                        <button type="button" class="btn btn-success" id="bulkDownloadQrBtn" disabled>
                            <i class="fe fe-download me-1"></i> Download Selected QR
                        </button>
                    </div>
                    <div>
                        <a href="{{ route('portal-representative.store.create') }}" class="btn btn-primary">Add Store</a>
                    </div>
                </div>
                <form id="bulkDownloadForm" method="POST" action="{{ route('portal-representative.store.bulk.download.qr') }}" style="display:none;">
                    @csrf
                    <div id="bulkDownloadInputs"></div>
                </form>
                <div class="mb-3 row g-3 align-items-end">
                    <div class="col-md-3">
                        <label class="form-label" for="filterStoreCode">Code</label>
                        <input type="text" class="form-control" id="filterStoreCode" placeholder="Search code">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="filterStoreName">Name</label>
                        <select class="form-control js-filter-select" id="filterStoreName" data-placeholder="Select name">
                            <option value=""></option>
                            @foreach ($nameOptions as $name)
                                <option value="{{ $name }}">{{ $name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label" for="filterStatus">Status</label>
                        <select class="form-control js-filter-select" id="filterStatus" data-placeholder="Select status">
                            <option value=""></option>
                            <option value="draft">Draft</option>
                            <option value="available">Available</option>
                            <option value="on-hold">On Hold</option>
                        </select>
                    </div>

                    <div class="col-md-2 d-grid">
                        <button type="button" class="btn btn-danger" id="filterReset">Clear filters</button>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered text-nowrap border-bottom w-100" id="datatable">
                        <thead>
                            <tr>
                                <th><input type="checkbox" id="selectAllCheckbox"></th>
                                <th>#</th>
                                <th>Image</th>
                                <th>Name</th>
                                <th>Manager</th>
                                <th>Address</th>
                                <th>Stripe Status</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
    $(document).ready(function () {
        $.ajaxSetup({
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
            }
        });

        if (!$.fn.DataTable.isDataTable('#datatable')) {
            const table = $('#datatable').DataTable({
                order: [],
                lengthMenu: [
                    [10, 25, 50, 100, -1],
                    [10, 25, 50, 100, "All"]
                ],
                processing: true,
                responsive: true,
                serverSide: true,
                language: {
                    processing: `<div class="text-center">
                        <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>`
                },
                pagingType: "full_numbers",
                dom: "<'row justify-content-between table-topbar'<'col-md-2 col-sm-4 px-0'l><'col-md-2 col-sm-4 px-0'f>>tipr",
                ajax: {
                    url: "{{ route('portal-representative.store.index') }}",
                    type: "GET",
                    data: function (d) {
                        d.store_code = $('#filterStoreCode').val();
                        d.store_name = $('#filterStoreName').val();
                        d.status = $('#filterStatus').val();
                    },
                },
                columns: [
                    { data: 'checkbox', name: 'checkbox', orderable: false, searchable: false },
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'logo', name: 'image' },
                    { data: 'name', name: 'name' },
                    { data: 'store_email', name: 'store_email' },
                    { data: 'address', name: 'address' },
                    { data: 'stripe_account_status', name: 'stripe-status' },
                    { data: 'status', name: 'status', orderable: false, searchable: false },
                    { data: 'action', name: 'action', orderable: false, searchable: false },
                ],
                drawCallback: function () {
                    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
                        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
                        tooltipTriggerList.map(function (tooltipTriggerEl) {
                            var tooltipInstance = bootstrap.Tooltip.getInstance(tooltipTriggerEl);
                            if (tooltipInstance) {
                                tooltipInstance.dispose();
                            }
                            return new bootstrap.Tooltip(tooltipTriggerEl);
                        });
                    } else if ($.fn.tooltip) {
                        $('[data-bs-toggle="tooltip"]').tooltip();
                    }
                }
            });

            const $filterSelects = $('.js-filter-select');
            $filterSelects.each(function () {
                const $el = $(this);
                $el.select2({
                    width: '100%',
                    allowClear: true,
                    placeholder: $el.data('placeholder') || 'Select'
                });
            });

            $('#filterStoreCode').on('keyup', function () {
                table.ajax.reload();
            });

            $filterSelects.on('change', function () {
                table.ajax.reload();
            });

            $('#filterReset').on('click', function () {
                $('#filterStoreCode').val('');
                $filterSelects.val('').trigger('change');
                table.ajax.reload();
            });
        }
    });

    const statusOptions = [
        { value: 'draft',          label: 'Draft',          color: '#6c757d', icon: '📝' },
        { value: 'available',      label: 'Available',      color: '#4CAF50', icon: '✅' },
        { value: 'on-hold',        label: 'On Hold',        color: '#0d6efd', icon: '❌' },
    ];

    $(document).on('click', '.store-status-badge', function () {
        let badge = $(this);
        let storeId = badge.data('id');
        let currentStatus = badge.data('status');

        let buttonsHtml = '<div style="display:flex;flex-direction:column;gap:10px;margin-top:8px;">';
        statusOptions.forEach(function (opt) {
            let isActive = opt.value === currentStatus;
            let outline = isActive ? 'outline:3px solid ' + opt.color + ';outline-offset:2px;' : '';
            buttonsHtml += '<button type="button" class="swal-status-btn" data-value="' + opt.value + '" ' +
                'style="background:' + opt.color + ';color:#fff;border:none;padding:12px 20px;border-radius:8px;' +
                'font-size:15px;font-weight:600;cursor:pointer;transition:all 0.2s;' + outline +
                'display:flex;align-items:center;justify-content:center;gap:8px;">' +
                '<span style="font-size:18px;">' + opt.icon + '</span> ' + opt.label +
                (isActive ? ' <span style="font-size:12px;opacity:0.8;">(current)</span>' : '') +
                '</button>';
        });
        buttonsHtml += '</div>';

        Swal.fire({
            title: 'Change Store Status',
            html: buttonsHtml,
            showConfirmButton: false,
            showCancelButton: true,
            cancelButtonText: 'Cancel',
            cancelButtonColor: '#6c757d',
            didOpen: function () {
                document.querySelectorAll('.swal-status-btn').forEach(function (btn) {
                    btn.addEventListener('mouseenter', function () {
                        if (this.dataset.value !== currentStatus) {
                            this.style.transform = 'scale(1.03)';
                            this.style.boxShadow = '0 4px 15px rgba(0,0,0,0.2)';
                        }
                    });
                    btn.addEventListener('mouseleave', function () {
                        this.style.transform = 'scale(1)';
                        this.style.boxShadow = 'none';
                    });
                    btn.addEventListener('click', function () {
                        let newStatus = this.dataset.value;
                        if (newStatus === currentStatus) {
                            Swal.close();
                            return;
                        }
                        updateStoreStatus(storeId, newStatus);
                        Swal.close();
                    });
                });
            }
        });
    });

    function updateStoreStatus(storeId, newStatus) {
        let statusUrl = '{{ route('portal-representative.store.status', ':id') }}'.replace(':id', storeId);

        $.ajax({
            type: 'PATCH',
            url: statusUrl,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: { status: newStatus },
            success: function (resp) {
                if (resp.success) {
                    toastr.success(resp.message);
                    $('#datatable').DataTable().ajax.reload(null, false);
                } else {
                    toastr.error(resp.message);
                }
            },
            error: function () {
                toastr.error('Failed to update status. Please try again.');
            }
        });
    }

    function showDeleteConfirm(id) {
        event.preventDefault();

        Swal.fire({
            title: 'Are you sure you want to delete?',
            text: 'If you delete this, it will be gone forever.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!',
        }).then((result) => {
            if (result.isConfirmed) {
                deleteItem(id);
            }
        });
    }

    function deleteItem(id) {
        let url = '{{ route('portal-representative.store.delete', ':id') }}';
        let csrfToken = '{{ csrf_token() }}';

        $.ajax({
            type: "DELETE",
            url: url.replace(':id', id),
            headers: {
                'X-CSRF-TOKEN': csrfToken
            },
            success: function (resp) {
                $('#datatable').DataTable().ajax.reload();
                if (resp.success) {
                    toastr.success(resp.message);
                } else {
                    toastr.error(resp.message);
                }
            },
            error: function () {
                toastr.error('An error occurred. Please try again.');
            }
        });
    }

    function updateBulkDownloadBtn() {
        let checked = $('.store-checkbox:checked').length;
        $('#bulkDownloadQrBtn').prop('disabled', checked === 0);
    }

    $(document).on('change', '.store-checkbox', function () {
        updateBulkDownloadBtn();
    });

    $('#selectAllCheckbox').on('change', function () {
        $('.store-checkbox').prop('checked', this.checked);
        updateBulkDownloadBtn();
    });

    $('#datatable').on('draw.dt', function () {
        $('#selectAllCheckbox').prop('checked', false);
        updateBulkDownloadBtn();
    });

    $('#bulkDownloadQrBtn').on('click', function () {
        let ids = [];
        $('.store-checkbox:checked').each(function () {
            ids.push($(this).val());
        });
        if (ids.length === 0) return;

        let container = $('#bulkDownloadInputs');
        container.empty();
        ids.forEach(function (id) {
            container.append('<input type="hidden" name="store_ids[]" value="' + id + '">');
        });
        $('#bulkDownloadForm').submit();
    });
</script>
@endpush