@extends('admin.layouts.masterlayout')

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

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

@section('content')
    <div class="dashboard-body-content">
        <div class="manage-offers-flex">
             <h2>Best Shop List</h2>
            <div class="admin-tab-container">
                <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 Best 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="{{ route('admin.best-shop.create') }}" class="ct-btn text-center add-ct-btn"
                        title="Add Best Shop">Add Best Shop</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>#</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>
        $(document).ready(function() {

            function datTableReload(full_reload = 0) {
                if (full_reload == 0) {
                    bestShopTBL.ajax.reload();
                } else {
                    bestShopTBL.ajax.reload(null, false);
                }
            }

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

            $(document).on('click', '.remove-shop', function() {
                var artist_id = $(this).attr("data-id");
                $(".tattoo-delete-btn").html("<span>Remove</span>");
                $(".delete-message").text("Are you sure you want to remove the shop from here?");
                $(".tattoo-delete-btn").attr('data-deleted-id', artist_id);
                $('.tattoo-delete-modal').modal('show');
            });

            $(document).on('click', '.tattoo-delete-btn', function() {
                var shop_id = $(this).attr("data-deleted-id");
                if (shop_id != "" || shop_id != 0) {
                    $('.tattoo-delete-btn').attr('disabled');
                    $('.tattoo-delete-btn').addClass('loader-active');
                    $.ajax({
                        type: "POST",
                        url: "{{ route('admin.best-shop.remove') }}",
                        data: {
                            shop_id: shop_id
                        },
                        success: function(response) {
                            $('.tattoo-delete-modal').modal('hide');
                            $('.tattoo-delete-btn').removeAttr('disabled');
                            $('.tattoo-delete-btn').removeClass('loader-active');
                            datTableReload(1);
                            if (response.status == true) {
                                custom_message('success', response.message);
                            } else {
                                custom_message('error', response.message);
                            }
                        }
                    });
                } else {
                    custom_message('error', "Shop isn't found");
                }
            });

            // === DATA TABLE ===
            var bestShopTBL = $('#bestShopTable').DataTable({
                dom: '<<"table-responsive"t><"pagination-container"<i><p>>>',
                processing: true,
                serverSide: true,
                ajax: "{{ route('admin.best-shop.index') }}",
                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: '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
                    },
                ]
            });
        });
    </script>
@endsection