@extends('admin.layouts.masterlayout')

@section('title')
    Add Best Shop
@endsection

@section('head_title')
    Manage Best Shop
@endsection

@section('content')
    <div class="dashboard-body-content">
        <div class="manage-offers-flex">
            <div class="admin-tab-container">
                <h2>Add Best Shop</h2>
                <ul class="nav nav-pills">
                </ul>
            </div>
            <div class="d-flex gap-3 align-items-center manage-search-container">
                <div class="position-relative w-100">
                    <input type="search" class="form-control" placeholder="Search Shop">
                    <div class="search-icon">
                        <img src="{{ asset('assets/img/dashboard/search-icon.png') }}" alt="">
                    </div>
                </div>
                @if (authAdminUser()->can('best_shop_management.add'))
                    <a href="javascript:void(0)" id="saveBestShopBtn" class="ct-btn text-center add-ct-btn none-mark"
                        title="Save">Save</a>
                @endif
            </div>
        </div>
        <div class="tab-content">
            <div class="" id="artist_data">
                <div class="ct-dashboard-table-container">
                    <div class="card p-2">
                        <div class="table-responsive">
                            <table class="table mb-0" id="bestShopTable">
                                <thead>
                                    <tr>
                                        <th>
                                            <input type="checkbox" class="title-checkbox" name="" id="">
                                        </th>
                                        <th>Shop Name</th>
                                        <th>Email</th>
                                        <th>Owner Name</th>
                                        <th>Phone Number</th>
                                        <th>Total Bookings</th>
                                        <th>Revenue</th>
                                        <th>Rating</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ asset('assets/js/dataTables.js') }}"></script>
    <script>
        $(function() {
            // Use native event for pageshow, then inside use jQuery
            window.addEventListener('pageshow', function(event) {
                if (event.persisted || (window.performance && window.performance.navigation.type === 2)) {
                    // jQuery to reset checkboxes and button state
                    $('.title-checkbox').prop('checked', false);
                    $('.row-checkbox').prop('checked', false);
                    $('#saveBestShopBtn').addClass('none-mark');
                }
            });
        });

        $(document).ready(function() {

            $('.title-checkbox').prop('checked', false);

            $('.manage-search-container input[type="search"]').on('input', function() {
                var searchText = $(this).val(); // <-- get the value from input
                shopTBL.search(searchText).draw(); // use it for DataTable search
                $('.title-checkbox').prop('checked', false);
            });

            var shopTBL = $('#bestShopTable').DataTable({
                dom: '<<"table-responsive"t><"pagination-container"<i><p>>>',
                processing: true,
                serverSide: true,
                ajax: "{{ route('admin.best-shop.create') }}",
                order: [
                    [1, 'asc']
                ],
                columns: [{
                        data: 'checkbox',
                        name: 'checkbox',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'shop_name',
                        name: 'shop_name'
                    },
                    {
                        data: 'shop_email',
                        name: 'shop_email'
                    },
                    {
                        data: 'owner_name',
                        name: 'owner_name'
                    },
                    {
                        data: 'shop_phone',
                        name: 'shop_phone'
                    },
                    {
                        data: 'bookings_completed',
                        name: 'bookings_count',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'revenue',
                        name: 'revenue',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'rating',
                        name: 'rating',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ],
                drawCallback: function() {
                    bindCheckboxEvents(); // Rebind after every table draw
                }
            });

            function bindCheckboxEvents() {
                // Handle individual checkbox change
                $('.row-checkbox').on('change', function() {
                    toggleSaveButton();
                    syncTitleCheckbox();
                });

                // Handle title checkbox to select/deselect all
                $('.title-checkbox').on('change', function() {
                    const isChecked = $(this).is(':checked');
                    $('.row-checkbox').prop('checked', isChecked);
                    toggleSaveButton();
                });
            }

            function toggleSaveButton() {
                const selectedCount = $('.row-checkbox:checked').length;
                if (selectedCount > 0) {
                    $('#saveBestShopBtn').removeClass('none-mark');
                } else {
                    $('#saveBestShopBtn').addClass('none-mark');
                }
            }

            function syncTitleCheckbox() {
                const allCount = $('.row-checkbox').length;
                const selectedCount = $('.row-checkbox:checked').length;
                $('.title-checkbox').prop('checked', allCount === selectedCount);
            }

            // Save button AJAX
            $('#saveBestShopBtn').on('click', function() {
                if ($(this).hasClass('none-mark')) return; // prevent if disabled

                const selectedShopIds = $('.row-checkbox:checked').map(function() {
                    return $(this).val();
                }).get();

                if (selectedShopIds.length === 0) {
                    custom_message('error', 'Please select at least one shop.');
                    return;
                }

                $.ajax({
                    type: 'POST',
                    url: "{{ route('admin.best-shop.store') }}",
                    data: {
                        _token: "{{ csrf_token() }}",
                        shop_ids: selectedShopIds
                    },
                    success: function(response) {
                        if (response.status) {

                            // Redirect after 2 seconds delay
                            setTimeout(function() {
                                window.location.href =
                                    "{{ route('admin.best-shop.index') }}";
                            }, 2000);

                            custom_message('success', response.message);
                            shopTBL.ajax.reload();
                            $('#saveBestShopBtn').addClass('none-mark');
                            $('.title-checkbox').prop('checked', false);
                        } else {
                            custom_message('error', response.message);
                        }
                    },
                    error: function(xhr) {
                        custom_message('error', 'Something went wrong.');
                    }
                });
            });
        });
    </script>
@endsection