@extends('admin.layout')



<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">



<style>
    .nav-tabs-custom .btn {

        border-radius: 8px;

        font-weight: 500;

        padding: 8px 20px;

    }



    .btn-open {

        background-color: #1a99d5;

        color: white;

    }



    .btn-closed {

        color: #555;

    }

    .view-chat-link {

        color: #28c76f;

        font-weight: 600;

        text-decoration: none;

    }



    .view-chat-link:hover {

        text-decoration: underline;

    }



    .dataTables_wrapper .dataTables_paginate .paginate_button.current {

        background: #1a99d5 !important;

        color: white !important;

        border: none;

        border-radius: 4px;

    }
</style>



@section('content')

    <div class="container-fluid">

        <div class="d-flex align-items-center justify-content-between">

<div>
                <h5 class="mb-4">Support</h5>

</div>


            <div>
                <a href="{{ route('admin.closed_ticket') }}" class="btn btn-primary me-4">

                History

            </a>

            </div>


        </div>



        <div class="card shadow-sm border-0">

            <div class="card-body p-3">





                <div class="table-responsive">

                    <table class="table w-100 mb-0" id="usersTable">

                        <thead>

                            <tr>

                                <th>SNO</th>

                                <th>DATE</th>
                                <th>User id</th>
                                <th>User Name</th>

                                <th>TITLE</th>

                                <th>DESCRIPTION</th>

                                <th>ACTION</th>

                            </tr>

                        </thead>

                        <tbody>

                        </tbody>

                    </table>

                </div>

            </div>

        </div>

        <!-- Reply Modal -->

        <div class="modal fade" id="replyModal" tabindex="-1">

            <div class="modal-dialog modal-dialog-centered">

                <div class="modal-content">



                    <div class="modal-header">

                        <h5 class="modal-title">Reply to Support</h5>

                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>

                    </div>



                    <div class="modal-body">

                        <form method="POST" action="{{ route('admin.support_reply') }}" id="SubmitForm">

                            @csrf



                            <!-- Hidden ID -->

                            <input type="hidden" name="id" id="support_id">



                            <div class="mb-3">

                                <label class="form-label fw-semibold">Reply</label>



                                <textarea name="reply" id="reply_text" class="form-control" rows="4"
                                    placeholder="Enter Reply"></textarea>

                            </div>



                            <div class="text-center">

                                <button type="button" class="btn btn-light border" data-bs-dismiss="modal">Discard</button>



                                <button type="submit" class="btn btn-primary">

                                    Submit

                                </button>

                            </div>



                        </form>

                    </div>



                </div>

            </div>

        </div>



    </div>



    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

    <script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>

    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

    <script>

        $(document).ready(function () {



            $('#usersTable').DataTable({

                processing: true,

                serverSide: true,

                ajax: "{{ route('admin.support_data') }}",



                dom: '<"dt-toolbar d-flex justify-content-between align-items-center mb-3"lf>' +
                    'rt' +
                    '<"d-flex justify-content-between align-items-center mt-3"ip>',







                language: {

                    search: "",

                    searchPlaceholder: "Search supports..."

                },



                columns: [{

                    data: 'DT_RowIndex',

                    orderable: false,

                    searchable: false

                },

                {

                    data: 'created_at',

                    name: 'created_at'

                },
                { data: null },
                { data: null },
                {

                    data: 'title',

                    name: 'title'

                },

                {

                    data: 'description',

                    name: 'description'

                },

                {

                    data: 'action',

                    orderable: false,

                    searchable: false

                }

                ]

            });



        });

    </script>



    <script>

        $(document).on('click', '.openReplyModal', function () {



            var supportId = $(this).data('id'); // get ID from button



            $('#support_id').val(supportId); // put ID into hidden input

            $('#reply_text').val(''); // clear textarea



            var modal = new bootstrap.Modal(document.getElementById('replyModal'));

            modal.show(); // open modal

        });

    </script>

@endsection