@extends('layouts.admin')

@section('content')
<!--App-Content-->
<div class="app-content my-3 my-md-5 profile-1">
    <div class="side-app">
        <x-page.header>Live Support</x-page.header>
        {{-- tabs --}}
        <div class="mt-8">
            <div class="ps-0 pb-5">
                <div class="wideget-user-tab">
                    <div class="tab-menu-heading">
                        <div class="tabs-menu1">
                            <ul class="nav">
                                <li><a href="{{ route('staff.live-support-requests',['status=live']) }}" class="w-100 {{request()->status == 'live' || !request()->status ? 'active':''}}">Live</a></li>
                                <li class="ms-0"><a href="{{ route('staff.live-support-requests',['status=closed']) }}" class="ms-3 me-2 w-100  {{request()->status == 'closed' ? 'active':''}}" >Closed</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            @if (request()->status == 'live' || !request()->status)
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">
                            Live Support Requests
                        </h3>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="data-table table table-striped table-bordered table-vcenter text-nowrap">
                                <thead class="text-center pt-4">
                                    <tr>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>Phone</th>
                                        <th>Joined At</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody class="text-center">
                                </tbody>
                            </table>
                        </div>

                    </div>

                </div>
            </div>
            @elseif (request()->status == 'closed')
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">
                            Closed Support Requests
                        </h3>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="data-table-example table table-striped table-bordered table-vcenter text-nowrap">
                                <thead class="text-center pt-4">
                                    <tr>
                                        <th>id</th>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>Phone</th>
                                        <th>Joined At</th>
                                        <th>Note</th>
                                    </tr>
                                </thead>
                                <tbody class="text-center">
                                    @foreach ($closed_requests as $key=>$request)
                                        <tr>
                                            <td>{{ ++$key }}</td>
                                            <td>{{ $request->name }}</td>
                                            <td>{{ $request->email }}</td>
                                            <td>{{ $request->phone }}</td>
                                            <td>
                                                <span class="badge badge-success">
                                                    {{ $request->created_at}}
                                                </span>
                                            </td>
                                            <td>
                                                <i class="mdi mdi-information-outline leading-loose"
                                                data-bs-toggle="tooltip" data-bs-placement="bottom" title=""
                                                data-bs-original-title="{{$request->notes}}"></i>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                    </div>

                </div>
            </div>
            @endif

        </div>
    </div>
</div>

<div class="modal  fade effect-sign show" id="note" tabdocumentation="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="example-Modal3">Add Note</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="POST" action="" id="add_note_form" enctype="multipart/form-data">
                <div class="modal-body">
                    @csrf
                    <div class="form-group ">
                        <div class="row">
                            <div class="col-md-2">
                                <label class="form-label mt-2 text-primary fw-bold" for="note">Note</label>
                            </div>
                            <div class="col-md-10">
                                <textarea id="note" name="note" class="form-control"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" id="submit" class="btn btn-primary" value="">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
@section('admin-js')

<script>
    $(function () {
        var table = $('.data-table').DataTable({
            stateSave: true,
            processing: true,
            serverSide: true,
            pageLength: 100,


            ajax: "{{ route('requests.live-support.attendance.getall') }}",
            columns: [
                { data: 'student_name', name: 'student_name' },
                { data: 'email', name: 'email' },
                { data: 'phone', name: 'phone' },
                { data: 'created_at', name: 'created_at' },
                { data: 'note_btn', name: 'note_btn' },

            ],

        });


        setInterval(function () {
            table.ajax.reload(null, false);
        }, 10000);
    });
</script>

<script>
    function addNote(id){
            var url="{{ route('requests.live-support.attendance.addNote',[":request_id"]) }}";
            url=url.replace(":request_id",id);
            $('#add_note_form').attr('action',url);
    }

</script>
@endsection