@extends('wallet.layouts.master')
@section('title','Support Tickets')
@section('page-css')
    <link rel="stylesheet" href="{{ asset('materio/vendor/libs/datatables-bs5/datatables.bootstrap5.css') }}">
@endsection
@section('content')
    <div class="heading d-flex justify-content-between align-items-center gap-3 mt-5 px-1">
            <h2 class='fw-bold fs-2'>Support Tickets</h2>

            @if(Auth::user()->hasRole('User'))
            <button data-bs-toggle="modal" data-bs-target="#add_ticket_modal" class='button fs-small'><i class="material-symbols-outlined me-2">add</i>Create Tickets</button>
            @endif
        </div>
        <div class="bg-line-dark rounded-4 shadow p-3 mt-32">
            @if(!$tickets->isEmpty())
            <div class="table-responsive">
                <table class="display table table-bordered" id="deafult_ordering_table" style="width:100%">
                    <thead>
                        <tr>
                            <th>#ID</th>
                            @if((auth()->user()->hasRole('Company') || auth()->user()->hasRole('Agent')))
                                <th>Client</th>
                            @endif
                            <th>Urgency</th>
                            <th>Status</th>
                            <th>Subject</th>
                            <th>Message</th>
                            <th>Created</th>
                            <th>Last Updated</th>
                        </tr>
                    </thead>
                    <tbody>
                    @foreach($tickets as $ticket)
                        <tr>
                            <td><a class="text-underline btn btn-dark fw-bold" href="{{route('ticket_messages',['id'=>$ticket->id])}}">{{$ticket->id}}</a></td>
                            @if((auth()->user()->hasRole('Company') || auth()->user()->hasRole('Agent')))
                                <td>{{ $ticket->user->fname ?? '' }}</td>
                            @endif
                            <td>{{$ticket->urgency}}</td>
                            <td>
                                <div class="ticket-status">
                                    <span class="{{$ticket->status ? 'bg-green' : 'bg-danger'}}  p-2 rounded-3 py-1 pb-2 fw-bold">{{$ticket->status ? 'Open' : 'Close'}}</span>
                                </div>
                            </td>
                            <td>{{$ticket->subject}}</td>
                            <td class="crsr-pntr" onclick="showMessage(`{{$ticket->message}}`)" title="Click to see full">
                                {{ strlen($ticket->message) > 40 ? substr($ticket->message, 0, 40) . '...' : $ticket->message }}
                            </td>
                            <td>{{$ticket->created_at}}</td>
                            <td>{{$ticket->updated_at}}</td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
            @else
                <div class='no-found text-center opacity-50 pt-32 pb-32'>
                    <img class='w-250 object-fit-contain' src="{{asset('wallet_d/assets/images/you_lost.png')}}" alt="you lost">
                    <h4 class='fw-bold'>Oops! Nothing is here.</h4>
                    <p class='fw-500'>We could't find any ticket.</p>
                </div>
            @endif
        </div>
        <!------Modals------>
        <div class="modal fade" id="add_ticket_modal" tabindex="-1" aria-labelledby="add_ticket_modalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content p-8">
                    <div class="modal-header border-0 pb-3">
                        <h6 class="modal-title fw-bold h5" id="add_ticket_modalLabel">Create new ticket</h6>
                        <button type="button" class="btn-close invert" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body pt-0">
                        <div>
                            <div class="col-12">
                                <form id="save_ticket">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="floating-input">
                                                <input type="text" required name="subject" id="subject" placeholder="">
                                                <label for="subject">Subject</label>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="floating-input">
                                                <select class="basic-single ticket" id="urgency">
                                                    <option value="Urgency" selected disabled>Urgency</option>
                                                    <option value="Low">Low</option>
                                                    <option value="Medium">Medium</option>
                                                    <option value="High">High</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="floating-input">
                                                <textarea rows="6" required id="message" placeholder=""></textarea>
                                                <label for="message">Message</label>
                                            </div>
                                        </div>
                                    </div>
                                    <button class='button w-100 px-5' id="save_ticket_btn" type='submit'>Submit</button>
                                </form>
                                <div class="d-flex align-items-start gap-2 mt-3">
                                    <span class="material-symbols-outlined">info</span>
                                    <p class="fs-14 text-clr">Please note that support tickets are usually answered within 24 hours,
                                    depending on the urgency of the ticket.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="show_message_model" tabindex="-1" aria-labelledby="show_message_modelLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content p-8">
                    <div class="modal-header border-0 pb-2">
                        <h6 class="modal-title fw-bold" id="show_message_modelLabel">Message</h6>
                        <button type="button" class="btn-close invert" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body pt-0">
                        <div class="py-3">
                            <p id="show_message"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
@endsection
@section('script')
    <script src="{{ asset('dashboard_d/assets/js/vendor/datatables.min.js') }}"></script>
    <script>
        $(document).ready(function () {
            $("#tickets-page").addClass('active')
            // ordering or sorting
            $('#deafult_ordering_table').DataTable({
                // "order": [
                //     [1, "ASC"]
                // ]
            });
        });
        function showMessage(message) {
            $("#show_message").text(message);
            $("#show_message_model").modal('show');
        };
        $(document).ready(function () {
            $('.basic-single').select2();
        });
    </script>

@endsection