@extends('admin.layout.main')
@section('content')
    <div class="page-content">
        <!--breadcrumb-->
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3">Support Tickets</div>
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}"><i class="bx bx-home-alt"></i></a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">Support Tickets</li>
                    </ol>
                </nav>
            </div>
            <div class="ms-auto">
                {{-- <div class="btn-group">
                    <button data-bs-toggle="modal" data-bs-target="#add_court_modal" type="button"
                        class="d-flex align-items-center btn btn-primary font-18"><span>
                            Create Subscription </span><i class="bx bx-plus ms-1"></i></button>

                </div> --}}
            </div>
        </div>
        <!--end breadcrumb-->
        <hr />
        <div class="card user-table">
            <div class="card-body">
                <ul class="nav nav-tabs nav-primary" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a class="nav-link active" data-bs-toggle="tab" href="#resolvedTab" role="tab"
                            aria-selected="true">
                            <div class="d-flex align-items-center">
                                <div class="tab-icon"><i class='bx bx-check-circle font-18 me-1'></i></div>
                                <div class="tab-title">Resolved</div>
                            </div>
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" data-bs-toggle="tab" href="#pendingTab" role="tab" aria-selected="false">
                            <div class="d-flex align-items-center">
                                <div class="tab-icon"><i class='bx bx-time font-18 me-1'></i></div>
                                <div class="tab-title">Pending</div>
                            </div>
                        </a>
                    </li>
                </ul>
                <div class="tab-content py-3">
                    <!-- Resolved Tab -->
                    <div class="tab-pane fade show active" id="resolvedTab" role="tabpanel">
                        <div class="table-responsive">
                            <table id="resolved_table" class="table table-bordered table-striped" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Full Name</th>
                                        <th>Email</th>
                                        <th>Subject</th>
                                        <th>Message</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>

                        </div>
                    </div>

                    <!-- Pending Tab -->
                    <div class="tab-pane fade" id="pendingTab" role="tabpanel">
                        @include('components.support-tickets.table')
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--Ticket Modal -->
    @include('components.support-tickets.modals')
@endsection
@push('script')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    @include('components.support-tickets.scripts')
    <script>
        $(document).ready(function() {
            var resolvedTable = $('#resolved_table').DataTable({
                lengthChange: false,
                dom: '<"top"lf>rt<"bottom"B><"d-flex justify-content-between align-items-center"ip>',
                buttons: [{
                        extend: 'print',
                        exportOptions: {
                            columns: ':not(:last-child)'
                        }
                    },
                    {
                        extend: 'pdf',
                        exportOptions: {
                            columns: ':not(:last-child)'
                        }
                    },
                    {
                        extend: 'excel',
                        exportOptions: {
                            columns: ':not(:last-child)'
                        }
                    },
                    {
                        extend: 'copy',
                        exportOptions: {
                            columns: ':not(:last-child)'
                        }
                    }
                ],
                processing: true,
                serverSide: true,
                scrollX: true,
                order: [],
                responsive: false,
                ajax: {
                    url: '{{ route('support-tickets.index') }}',
                    data: function(d) {
                        d.isResolved = 1;
                    }
                },
                columns: [{
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'email',
                        name: 'email'
                    },
                    {
                        data: 'subject',
                        name: 'subject'
                    },
                    {
                        data: 'message',
                        name: 'message'
                    },
                    {
                        data: "action",
                        name: "action",
                        orderable: false,
                    }
                ],
            });

            $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
                if (e.target.getAttribute('href') === '#resolvedTab') {
                    resolvedTable.columns.adjust().draw();
                }
            });

            resolvedTable.buttons().container()
                .appendTo('#finance_table_wrapper .col-md-6:eq(0)');

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
        });
    </script>
@endpush