@extends('backend::layouts.app')
@section('title', 'Experience Centre Visits')
@section('content')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0 font-size-18"></h4>
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active">Experience Centre Visits</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title">Experience Centre Visits</h4>
                    @if ($experienceCentreVisits->isNotEmpty())
                        <a href="{{ route('experience-centre-visits.export') }}" class="btn btn-success btn-sm">
                            <i class="fas fa-download"></i> Export
                        </a>
                    @endif
                </div>
                <div class="card-body">
                    <table id="experienceCentreVisitsDatatable" class="table table-bordered dt-responsive">
                        <thead>
                            <tr>
                                <th>SN</th>
                                <th>User Type</th>
                                <th>Centre</th>
                                <th>Visit Date</th>
                                <th>Arrival</th>
                                <th>Duration</th>
                                <th>Created</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div> <!-- end col -->
    </div> <!-- end row -->
@endsection
@push('js')
    <script>
        $(document).ready(function() {
            var table = $('#experienceCentreVisitsDatatable').DataTable({
                processing: true,
                serverSide: true,
                paging: true,
                responsive: true,
                autosave: true,
                bDestroy: true,
                lengthMenu: [
                    [30, 60, 90, -1],
                    [30, 60, 90, 'All']
                ],
                ajax: "{{ route('experience-centre-visits.index') }}",
                columns: [{
                        data: 'DT_RowIndex',
                        searchable: false,
                        orderable: false
                    },
                    {
                        data: 'user_type_id',
                        name: 'user_type_id',
                    },
                    {
                        data: 'location_id',
                        name: 'location_id',
                    },
                    {
                        data: 'visit_date',
                        name: 'visit_date',
                    },
                    {
                        data: 'arrival_time',
                        name: 'arrival_time',
                    },
                    {
                        data: 'visit_duration',
                        name: 'visit_duration',
                    },
                    {
                        data: 'created_at',
                        name: 'created_at',
                    },
                    {
                        data: 'action',
                        name: 'action',
                    },
                ],
                initComplete: function() {
                    $('[data-bs-toggle="tooltip"]').tooltip();

                    // Attach click event listener to delete buttons
                    $('#experienceCentreVisitsDatatable').on('click', '.delete-btn', function(event) {
                        event.preventDefault();
                        const deleteForm = $(this).closest('form');
                        Swal.fire({
                            title: "Are you sure?",
                            text: "This will delete the item!",
                            icon: "warning",
                            showCancelButton: true,
                            confirmButtonColor: "#d33",
                            cancelButtonColor: "#3e4b5b",
                            confirmButtonText: "Yes, delete it!",
                        }).then((result) => {
                            if (result.isConfirmed) {
                                deleteForm.submit();
                            }
                        });
                    });
                }
            });
        });
    </script>
@endpush