@extends('admin.layouts.masterlayout')

@section('title', 'Shop Management')
@section('head_title', 'Shop Management')

@section('content')
<div class="dashboard-body-content">
    <div class="manage-offers-flex">
        <div class="admin-tab-container">
            <ul class="nav nav-pills">
                <li class="nav-item">
                    <a class="nav-link shop_link active" data-bs-toggle="pill" href="#verify-shop" data-tab="verified">Verified</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link shop_link" data-bs-toggle="pill" href="#unverify-user" data-tab="unverified">Unverified</a>
                </li>
            </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 shop-search" placeholder="Search here">
                <div class="search-icon">
                    <img src="{{ asset('assets/img/dashboard/search-icon.png') }}" alt="">
                </div>
            </div>
            @can('shop_management.create')
            <a href="{{ route('admin.addShop') }}" class="ct-btn text-center add-ct-btn">Add Shop</a>
            @endcan
        </div>
    </div>
    <div class="tab-content">
        <div class="tab-pane shop_tab active" id="verify-shop">
            <div class="ct-dashboard-table-container">
                <div class="card p-2">
                    <div class="table-responsive">
                        <table class="table mb-0" id="verify_table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Shop Name</th>
                                    <th>Email</th>
                                    <th>Owner Name</th>
                                    <th>City</th>
                                    <th>Total Artists</th>
                                    <th>Total Bookings</th>
                                    <th>Revenue </th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody> </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane shop_tab fade" id="unverify-user">
            <div class="ct-dashboard-table-container">
                <div class="card p-2">
                    <div class="table-responsive">
                        <table class="table mb-0" id="unverified_table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Shop Name</th>
                                    <th>Email</th>
                                    <th>Owner Name</th>
                                    <th>City</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="{{ asset('assets/js/dataTables.js') }}"></script>
<script>
    // Verified Shops DATATABLE
    var verifyUsersTable = $('#verify_table').DataTable({
        dom: '<<"table-responsive"t><"pagination-container"<i><p>>>',
        processing: true,
        serverSide: true,
        order: [],
        ajax: "{{ route('admin.getVerifyShopsData') }}", // Make sure the route is correctly defined
        columns: [{
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                orderable: false,
                searchable: false
            },
            {
                data: 'shop_name',
                name: 'shop_name'
            },
            {
                data: 'shop_email',
                name: 'shop_email'
            },
            {
                data: 'owner_name',
                name: 'owner_name'
            },
            {
                data: 'city',
                name: 'city'
            },
            {
                data: 'total_artists',
                name: 'total_artists'
            },
            {
                data: 'total_bookings',
                name: 'total_bookings'
            },
            {
                data: 'revenue',
                name: 'revenue'
            },
            {
                data: 'status',
                name: 'status'
            },
            {
                data: 'action',
                name: 'action',
                orderable: false,
                searchable: false
            }
        ]

    });

    // unVerified Shops DATATABLE
    const unverifyUsersTable = $('#unverified_table').DataTable({
        dom: '<<"table-responsive"t><"pagination-container"<i><p>>>',
        processing: true,
        serverSide: true,
        ajax: "{{ route('admin.getUnVerifyShopsData') }}", // Make sure the route is correctly defined
        order: [],
        columns: [{
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                orderable: false,
                searchable: false
            },
            {
                data: 'shop_name',
                name: 'shop_name'
            },
            {
                data: 'shop_email',
                name: 'shop_email'
            },
            {
                data: 'owner_name',
                name: 'owner_name'
            },
            {
                data: 'city',
                name: 'city'
            },

            {
                data: 'status',
                name: 'status'
            },
            {
                data: 'action',
                name: 'action',
                orderable: false,
                searchable: false
            }
        ]
    });

    $(document).ready(function() {

        var tab = getUrlParameter('tab') || 'verified';

        // Activate correct tab
        $('.shop_link').removeClass('active');
        $('.shop_tab').removeClass('active show');
        if (tab === 'unverified') {
            $('.shop_link[data-tab="unverified"]').addClass('active');
            $('#unverify-user').addClass('active show');
        } else {
            $('.shop_link[data-tab="verified"]').addClass('active');
            $('#verify-shop').addClass('active show');
        }

        // Handle click + update URL
        $('.shop_link').on('click', function(e) {
            var selectedTab = $(this).data('tab');
            var newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?tab=' + selectedTab;
            window.history.pushState({
                path: newUrl
            }, '', newUrl);

            $('.shop_link').removeClass('active');
            $(this).addClass('active');

            $('.shop_tab').removeClass('active show');
            if (selectedTab === 'unverified') {
                $('#unverify-user').addClass('active show');
            } else {
                $('#verify-shop').addClass('active show');
            }
        });

        // SHARED SEARCH LOGIC
        $('.manage-search-container input[type="search"]').on('input', function() {
            const activeTab = $('.shop_tab.active').attr('id');
            const searchText = $(this).val();

            if (activeTab === 'verify-shop') {
                verifyUsersTable.search(searchText).draw();
            } else if (activeTab === 'unverify-user') {
                unverifyUsersTable.search(searchText).draw();
            }
        });

        $(window).on('pageshow', function (event) {
            if (event.persisted || performance.getEntriesByType("navigation")[0].type === "back_forward") {
                $('.shop-search').val('');
                verifyUsersTable.search('').draw(false);
            }
        });
    });


    // DELETE Shop LOGIC
    $(document).on('click', '.delete_verifyshop, .delete_unverifyshop', function() {
        var id = $(this).attr("data-id");
        var type = $(this).attr("data-type");

        $(".tattoo-delete-btn").attr('data-deleted-id', id);
        $(".tattoo-delete-btn").attr('data-delete-type', type);
        $('.tattoo-delete-modal').modal('show');
    });

    // Delete from Database
    $(document).on('click', '.tattoo-delete-btn', function() {
        var id = $(this).attr("data-deleted-id");
        var type = $(this).attr("data-delete-type");

        if (id !== "" && id != 0) {
            $('.tattoo-delete-btn').attr('disabled', true).addClass('loader-active');

            $.ajax({
                type: "POST",
                url: "{{ route('admin.deleteShop') }}",
                data: {
                    shop_id: id
                },
                success: function(response) {

                    $('.tattoo-delete-modal').modal('hide');
                    $('.tattoo-delete-btn').removeAttr('disabled').removeClass('loader-active');

                    if (response.status === true) {
                        // Clear search input and reset filters
                        if (type === "verify") {
                            if (verifyUsersTable.rows({
                                    page: 'current'
                                }).count() === 1) {
                                verifyUsersTable.page('previous').draw('page');
                            } else {
                                verifyUsersTable.ajax.reload(null, false);
                            }
                        } else if (type === "unverify") {
                            if (verifyUsersTable.rows({
                                    page: 'current'
                                }).count() === 1) {
                                unverifyUsersTable.page('previous').draw('page');
                            } else {
                                unverifyUsersTable.ajax.reload(null, false);
                            }
                        }

                        custom_message('success', response.message);
                    } else {
                        custom_message('error', response.message);
                    }
                }
            });
        } else {
            custom_message('error', "ID isn't valid");
        }
    });
</script>
@endsection