@extends('layout.master')
@section('content')
<style>
    .nav-tabs .nav-link {
        border: none;
        color: #6c757d;
        border-radius: 0.25rem 0.25rem 0 0;
        background-color: #f1f3f5;
        margin-right: 0.5rem;
        padding: 0.5rem 1.5rem;
        transition: all 0.3s ease-in-out;
    }

    .nav-tabs .nav-link:hover {
        background: #e9ecef;
        color: #000;
    }

    .nav-tabs .nav-link.active {
        background: #ffffff;
        border-bottom: 2px solid #0d6efd;
        color: #0d6efd;
    }
</style>
    <div class="content datatable">
        <div class="p-4 code-to-copy">
            <div class="card shadow-none border">
                <div class="card-header p-4 border-bottom bg-body">
                    <div class="row g-3 justify-content-between align-items-end">
                        <div class="col-md-12">
                            <h4 class="text-body mb-0" data-anchor="data-anchor" id="pagination-with-numbering">
                                Ticket List
                            </h4>
                        </div>
                    </div>
                </div>

                <div class="card-body p-0 overflow-auto">
                    <div class="p-4 code-to-copy">

                   <ul class="nav nav-tabs border-0 mb-4" id="ticketStatusTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <a class="nav-link fw-bold px-4 py-2 {{ $status == 'pending' ? 'active' : '' }}" data-status="pending" href="#" role="tab">Pending</a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link fw-bold px-4 py-2 {{ $status == 'reject' ? 'active' : '' }}" data-status="reject" href="#" role="tab">Rejected</a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link fw-bold px-4 py-2 {{ $status == 'resolved' ? 'active' : '' }}" data-status="resolved" href="#" role="tab">Resolved</a>
                        </li>
                    </ul>

                    <div class="table-responsive">
                       <table class="table table-striped  fs-9 mb-0 AppendData">
                            @include('tickets.ticket_listing')
                        </table>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@section('script')
   <script>
    $(document).ready(function () {
        // tab click
        $('#ticketStatusTabs a').on('click', function (e) {
            e.preventDefault();
            $('#ticketStatusTabs a').removeClass('active');
            $(this).addClass('active');

            let status = $(this).data('status');
            fetch_data(1, status);
        });

        // pagination click
        $(document).on('click', '.pagination a.page-link', function (e) {
            e.preventDefault();
            var page = $(this).attr('href').split('page=')[1];
            let status = $('#ticketStatusTabs a.active').data('status');
            fetch_data(page, status);
        });

        // fetch_data function
        function fetch_data(page, status) {
            $.ajax({
                url: "{{ route('ticket') }}",
                data: { page: page, status: status },
                beforeSend: function () {
                    $('.AppendData').html('<img src="{{ asset('uploads/loader.gif') }}" class="product_loader" />');
                },
                success: function (data) {
                    $('.AppendData').html(data);
                }
            });
        }
    });
</script>

@endsection
@endsection