@extends('User.layout')
@section('content')

<div class="row align-items-center justify-content-between mb-3">
    <div class="col-auto">
        <h5>Support</h5>
    </div>
    <div class="col-auto">
<button class="btn btn-primary position-relative ticket-btn"
        data-bs-toggle="modal"
        data-bs-target="#ticketModal">

    <span class="finger-emoji">👉🏻</span>

    Add Your Query
</button>   </div>
</div>

<style>
    .ticket-btn {
    padding-left: 50px;
    position: relative;
    overflow: hidden;
}

/* Finger position */
.finger-emoji {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;

    animation: fingerPush 1.2s infinite;
}

/* Push animation (towards text → right side) */
@keyframes fingerPush {
    0% {
        transform: translateY(-50%) translateX(0);
    }
    30% {
        transform: translateY(-50%) translateX(6px); /* push right */
    }
    50% {
        transform: translateY(-50%) translateX(0);
    }
    70% {
        transform: translateY(-50%) translateX(3px);
    }
    100% {
        transform: translateY(-50%) translateX(0);
    }
}

/* Optional attention pulse */
.ticket-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 6px;
    box-shadow: 0 0 14px rgba(13, 110, 253, 0.5);
    opacity: 0;
    animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}
</style>
<!-- <ul class="nav nav-pills flex-column flex-sm-row mb-6 gap-sm-0 gap-2">
    <li class="nav-item">
        <a class="nav-link active waves-effect waves-light" href="#"><i
                class="icon-base ti tabler-user-check icon-sm me-1_5"></i> Open Ticket</a>
    </li>
    <li class="nav-item">
        <a class="nav-link waves-effect waves-light" href="{{ route('user.close_ticket') }}"><i
                class="icon-base ti tabler-users icon-sm me-1_5"></i> Close Ticket</a>
    </li>
</ul> -->

<div class="card p-0 m-2">

   <!-- <div class="row mb-3 align-items-center p-3 g-2">
            <div class="col-auto">
                <select id="pageLength" class="form-select">
                    <option value="10"> 10</option>
                    <option value="25"> 25</option>
                    <option value="50"> 50</option>
                    <option value="100"> 100</option>
                    <option value="All"> All</option>
                </select>
            </div>

            <div class="col-md-3 ms-auto">

            <div class="position-relative">
                <input type="text" id="toDate" class="form-control ps-7" placeholder="Search...">
                <i class="ti tabler-search position-absolute top-50 start-0 translate-middle-y ms-3 text-muted"></i>
            </div>
            </div>
        </div> -->
  <div class="row m-3 g-3 align-items-center justify-content-between">

                        <!-- LEFT -->
                        <div class="col-12 col-lg-auto">

                            <select id="pageLength" class="form-select">
                                <option value="10">10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                                <option value="All">All</option>
                            </select>

                        </div>

                        <div class="col-12 col-lg-auto">

                            <div class="d-flex flex-column flex-sm-row align-items-stretch align-items-sm-center gap-2">


                                <input type="text" id="customSearch" class="form-control" placeholder="Search table...">

                                <!-- <button class="btn btn-label-secondary">
                                    Export
                                </button> -->
                            </div>

                        </div>

                    </div>
    <div class="table-responsive pt-0 pb-2">
        <div class="row card-header flex-column flex-md-row border-bottom mx-0 p-0">
            <div class="justify-content-between dt-layout-table">
                <div class=" justify-content-between align-items-center dt-layout-full table-responsive">
                    <table id="usersTable" class="table table-bordered align-middle users-table w-100">
                        <thead>
                            <tr>
                                <th>SNO</th>
                                <th>Date</th>
                                <th>Title</th>
                                <th>Your Queries</th>
                                <th>Admin Response</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="ticketModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content custom-modal p-4">

            <h6 class="fw-semibold mb-3">Create Ticket</h6>

            <form action="{{route('user.add_ticket')}}" method="post" id="ticketForm">
                @csrf
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label">Title</label>
                        <input type="text" name="title" id="title" class="form-control" placeholder="Enter Title"
                            value="{{old('title')}}">
                    </div>
                    @error('title')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror

                    <div class="col-12">
                        <label class="form-label">Description</label>
                        <textarea name="description" id="description" class="form-control" rows="3"
                            placeholder="Enter Description">{{ old('description') }}</textarea>
                    </div>
                    @error('description')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror

                    <div class="col-12 d-flex justify-content-center gap-2 mt-2">
                        <button class="btn btn-label-secondary px-4" type="reset" data-bs-dismiss="modal">
                            Discard
                        </button>
                        <button class="btn btn-primary px-4" type="submit" id="submit_btn">
                            Submit
                        </button>
                    </div>
                </div>
            </form>

        </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>
    $(document).ready(function() {

        const table = $('#usersTable').DataTable({
            ajax: "{{ route('user_support_query_data') }}",

            paging: true,
            searching: true,
            info: true,
            ordering: false,
            lengthChange: false,
            pageLength: 10,
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                },
                {
                    data: 'title',
                    name: 'title'
                },
                {
                    data: 'description',
                    name: 'description'
                },
                {
                    data: 'reply_msg',
                    name: 'reply_msg',
                }

            ],
        });
        // ✅ Custom search input
        $('#toDate').on('keyup change', function() {
            table.search(this.value).draw();
        });

        // ✅ Custom page length dropdown
        $('#pageLength').on('change', function() {
            table.page.len(this.value).draw();
        });

    });
</script>

<script>
    document.getElementById('ticketForm').addEventListener('submit', function() {
        const btn           = document.getElementById('submit_btn');
              btn.disabled  = true;
              btn.innerText = 'Processing...';
    });
</script>

@if ($errors->any())
<script>
    document.addEventListener("DOMContentLoaded", function() {
        var ticketModal = new bootstrap.Modal(document.getElementById('ticketModal'));
        ticketModal.show();
    });
</script>
@endif
@endsection