@extends('admin.layouts.masterlayout')

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

@section('content')
<div class="dashboard-body-content">

    <div class="manage-offers-flex">
        <h2>Artist List</h2>

        <div class="d-flex gap-3 align-items-center manage-search-container">
            <div class="position-relative w-100">
                <input type="search" class="form-control artist-search" placeholder="Search here">
                <div class="search-icon">
                    <img src="{{asset('assets/img/dashboard/search-icon.png')}}" alt="">
                </div>
            </div>
            @can('artist_management.create')
            <a href="{{ route('admin.addArtist') }}" class="ct-btn text-center add-ct-btn">Add Artist</a>
            @endcan
        </div>
    </div>
    <div class="tab-content">
        <div id="artist_data">
            <div class="ct-dashboard-table-container">
                <div class="card p-2">
                    <div class="table-responsive">
                        <table class="table mb-0" id="artist_Table">
                            <thead>

                                <tr>
                                    <th>#</th>
                                    <th>Artist Name</th>
                                    <th>Email</th>
                                    <th>Join Date</th>
                                    <th>Experience</th>
                                    <th>Bookings Completed</th>
                                    <th>Rating</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>
    var artistTable = $('#artist_Table').DataTable({
        dom: '<<"table-responsive"t><"pagination-container"<i><p>>>',
        processing: true,
        serverSide: true,
        ajax: "{{ route('admin.getArtistData') }}",
        order: [],
        columns: [{
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                orderable: false,
                searchable: false
            },
            {
                data: 'name',
                name: 'name'
            },
            {
                data: 'email',
                name: 'email'
            },
            {
                data: {
                    _: 'join_date.display',
                    sort: 'join_date.timestamp'
                },
                name: 'join_date.display',
                render: function(data, type, row) {
                    return `<div class="d-flex gap-2">
                    <img class="clock-img" src="{{asset('assets/img/dashboard/calendar.png')}}" alt="">
                    ${data}
                    </div>`;
                }
            },
            {
                data: 'experience',
                name: 'experience'
            },
            {
                data: 'bookings_completed',
                name: 'bookings_count'
            },
            {
                data: 'rating',
                name: 'rating'
            },
            {
                data: 'status',
                name: 'status'
            },
            {
                data: 'action',
                name: 'action',
                orderable: false,
                searchable: false
            },
        ]
    });

    $(document).ready(function() {

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

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

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

        // Handle click + update URL
        $('.nav-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);

            $('.nav-link').removeClass('active');
            $(this).addClass('active');

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

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

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

        if (artist_id != "" || artist_id != 0) {
            $('.tattoo-delete-btn').attr('disabled');
            $('.tattoo-delete-btn').addClass('loader-active');

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

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

                    if (artistTable.rows({
                            page: 'current'
                        }).count() === 1) {
                        artistTable.page('previous').draw('page');
                    } else {
                        artistTable.ajax.reload(null, false);
                    }
                }
            });
        } else {
            custom_message('error', "Artist isn't found");
        }

    });

    $(document).on('click', '.deleteartist', function() {
        var artist_id = $(this).attr("data-id");
        $(".tattoo-delete-btn").attr('data-deleted-id', artist_id);
        $('.tattoo-delete-modal').modal('show');

    });
</script>
@endsection