@extends('layout.app')


@section('content')
    <div class="mt-2 card">
        <div class=" card-body">
            <div>
                <div class="d-flex justify-content-center mb-2">

                    <input type="" name="search" id="search" class="form-control col-md-4 "
                        placeholder="Search by customer user name" autocomplete="off">



                </div>
                <div class="d-flex justify-content-center mb-2" id="productList">
                    <ul id="customer_list" class="sub-menu">
                    </ul>
                </div>
                <form action="{{ route('token-save-new') }}" method="POST">
                    @csrf
                    <div class="card">
                        <div class="card-body">

                            <div class="row">
                                <div class="form-group col-md-4">
                                    <label for="shortname">
                                        CID
                                    </label>
                                    <input type="" name="clientId" id="clientId" class="form-control" placeholder=""
                                        autocomplete="off" readonly>
                                    @error('clientId')
                                        <div class="alert alert-danger mt-1">
                                            {{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group col-md-4">
                                    <label for="shortname">
                                        Username
                                    </label>
                                    <input id="username" name="username" class="form-control" placeholder="" autocomplete="off" readonly>

                                </div>

                                <div class="form-group col-md-4">
                                    <label for="shortname">
                                        Token Category*
                                    </label>

                                    <select name="tokenCategory" id="tokenCategory" class="form-control bSelect" required>
                                        <option value="">Select Token Category</option>
                                        @foreach ($token_categories as $token_category)
                                            <option value="{{ $token_category->id }}">{{ $token_category->tokenCategory }}
                                            </option>
                                        @endforeach

                                    </select>
                                    @error('tokenCategory')
                                        <div class="alert alert-danger mt-1">
                                            {{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group col-md-4">
                                    <label for="shortname">
                                        Token Code*</label>
                                    <select name="tokenCode" id="tokenCode" class="form-control bSelect" required>
                                        <option value=""> Select One Code</option>
                                    </select>
                                    @error('tokenCode')
                                        <div class="alert alert-danger mt-1">
                                            {{ $message }}</div>
                                    @enderror
                                </div>


                                <div class="form-group col-md-8">
                                    <label for="shortname">
                                        Description*
                                    </label>

                                    <textarea name="description" id="description" rows="1" value="" class="form-control" placeholder="Description" autocomplete="off" required></textarea>
                                    @error('description')
                                        <div class="alert alert-danger mt-1">
                                            {{ $message }}</div>
                                    @enderror
                                </div>


                                <div class="form-group col-md-4">
                                    <label for="shortname">
                                        Reported By*
                                    </label>
                                    <input type="text" name="reportedBy" id="reportedBy" value=""
                                        class="form-control" placeholder="Reported By" autocomplete="off" required>
                                    @error('reportedBy')
                                        <div class="alert alert-danger mt-1">
                                            {{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group col-md-4">
                                    <label for="shortname">
                                        Reporter Contact No*
                                    </label>
                                    <input type="text" name="reporterContact" id="reporterContact" value="" minlength="11" maxlength="11" class="form-control" placeholder="Reporter Contact No" autocomplete="off" required>
                                    @error('reporterContact')
                                        <div class="alert alert-danger mt-1">
                                            {{ $message }}</div>
                                    @enderror
                                </div>
                                @can('assign-token')
                                    <div class="form-group col-md-4">
                                        <label for="shortname">
                                            Assign To
                                        </label>
                                        <select name="employee" id="employee" class="form-control bSelect">
                                            <option value="">Select Employee</option>
                                            @foreach ($employees as $employee)
                                                <option value="{{ $employee->id }}">{{ $employee->name }}</option>
                                            @endforeach

                                        </select>
                                    </div>
                                @endcan
                            </div>

                            <div class="form-group">
                                <button type="submit" class="btn btn-primary float-right">
                                    Save
                                </button>
                            </div>

                        </div>
                    </div>
                </form>
            </div>
            <div class="table-responsive">
                <table id="dataTable" class="table table-bordered">
                    <thead class="bg-dark">
                        <tr>
                            <th style="padding-left: 2px;padding-right: 2px;">ID</th>
                            <th style="padding-left: 2px;padding-right: 2px;max-width:150px">Token#</th>
                            <th style="padding-left: 2px;padding-right: 2px;max-width:90px">Category(Code)</th>
                            <th style="padding-left: 2px;padding-right: 2px;max-width:100px">Description</th>
                            <th style="padding-left: 2px;padding-right: 2px;max-width:120px">Customer ID <br> UserName</th>

                            <th style="padding-left: 2px;padding-right: 2px;max-width:200px">Customer Info</th>
                            <th style="padding-left: 2px;padding-right: 2px;max-width:70px">Reporter <br> Contact</th>
                            <th style="padding-left: 2px;padding-right: 2px;max-width:70px">Creator</th>

                            <th style="padding-left: 2px;padding-right: 2px;max-width:70px">Assigned</th>
                            <th style="padding-left: 2px;padding-right: 2px;max-width:70px"></th>

                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($token as $r)
                            <tr>
                                <td class="token_id_of_table" style="padding-left: 2px;padding-right: 2px;">
                                    {{ $r->id }}</td>
                                {{-- <td style="padding-left: 2px;padding-right: 2px;max-width:60px">{{$r->assign_time ? "Assign time" .round(abs(strtotime($r->assign_time) - strtotime($r->created_at)) / 60,2). " m" :"Assign Pendin Time".round(abs(strtotime(now()) - strtotime($r->created_at)) / 60,2) ."m" }}</td> --}}

                                <td style="padding-left: 2px;padding-right: 2px;max-width:150px">
                                    <span class="badge badge-success" > T.ID : </span> {{ $r->token }} <br>
                                    <span class="badge badge-info" > C.T : </span> {{ date('d-M-Y g:i: a ', strtotime($r->created_at)) }} <br>
                                    @if ($r->assign_time)
                                        <span class="badge badge-warning" > A.T : </span> {{ date('d-M-Y g:i: a ', strtotime($r->assign_time)) }} <br>
                                        @if ($r->close_time)
                                            <span class="badge badge-danger" > C.T : </span> {{ date('d-M-Y g:i: a ', strtotime($r->close_time)) }} <br>
                                        @else
                                            {{ $r->close_time ? 'Closed' . dateTimeDifferent(now(), $r->assign_time)  : 'Token Assigned ' . dateTimeDifferent(now(), $r->assign_time)." ago Not Closed" }} <br>
                                        @endif
                                    @else
                                        {{ $r->assign_time ? 'Assigned' . dateTimeDifferent(now(), $r->created_at)  : 'Token Created ' . dateTimeDifferent(now(), $r->created_at)." ago Not assigned"  }} <br>
                                    @endif

                                </td>
                                <td style="padding-left: 2px;padding-right: 2px;max-width:90px">
                                    {{ $r->category->tokenCategory ?? '' }} ({{ $r->Code->tokenCode ?? '' }})</td>
                                <td style="padding-left: 2px;padding-right: 2px;max-width:100px">{{ $r->description }}
                                </td>
                                <td style="padding-left: 2px;padding-right: 2px;max-width:120px">{{ $r->clientId }} <br>
                                    {{ $r->clients->userid ?? '' }}</td>

                                <td style="padding-left: 2px;padding-right: 2px;max-width:200px">
                                    <p style="font-size:14px;">
                                        @if (checkAPI())
                                            @if (array_key_exists($r->clients->userid ?? '', $mikrotik_online_users['onlineUsers']))
                                                <span class="badge badge-success" title="Online">Online</span>
                                            @else
                                                <span class="btn btn-danger btn-xs" title="Online">Offline</span>
                                            @endif
                                            <br>
                                        @else
                                            @if (isset($mikrotik_online_users) && in_array($r->clients->userid ?? '', $mikrotik_online_users))
                                                <span class="btn btn-success btn-xs">Online</span>
                                            @else
                                                <span class="btn btn-danger btn-xs">Offline</span>
                                            @endif
                                        @endif

                                        @if (!empty($r->clients->clientsInfo->clients_name))
                                            C Name : {{ $r->clients->clientsInfo->clients_name ?? '' }} <br>
                                        @endif
                                        @if (!empty($r->clients->pops->reseller->name))
                                            R Name : {{ $r->clients->pops->reseller->name ?? '' }} <br>
                                        @endif
                                        @if (!empty($r->clients->clientsinfo->flat_no))
                                            Flat No: {{ $r->clients->clientsinfo->flat_no ?? '' }},
                                        @endif
                                        @if (!empty($r->clients->clientsinfo->building_name))
                                            Building Name: {{ $r->clients->clientsinfo->building_name ?? '' }},<br>
                                        @endif
                                        @if (!empty($r->clients->clientsinfo->road_no))
                                            Road No: {{ $r->clients->clientsinfo->road_no ?? '' }},<br>
                                        @endif
                                        @if (!empty($r->clients->clientsinfo->block_sector))
                                            Block/Sector: {{ $r->clients->clientsinfo->block_sector ?? '' }},
                                        @endif
                                        @if (!empty($r->clients->clientsinfo->area))
                                            Area : {{ $r->clients->clientsinfo->area ?? '' }}, <br>
                                        @endif
                                        @if (!empty($r->clients->clientsinfo->box))
                                            Box : {{ $r->clients->clientsinfo->box ?? '' }}
                                        @endif
                                    </p>
                                </td>
                                <td style="padding-left: 2px;padding-right: 2px;max-width:70px">{{ $r->reportedBy }} <br>
                                    {{ $r->reporterContact }}</td>
                                <td style="padding-left: 2px;padding-right: 2px;max-width:70px">
                                    {{ $r->creator->name ?? '' }} {{ $r->createByClient ?? ''}} </td>

                                <td style="padding-left: 2px;padding-right: 2px;max-width:70px">
                                    {{ $r->employees->name ?? '' }} </td>
                                <td style="padding-left: 2px;padding-right: 2px;max-width:70px">
                                    <div class="dropdown">
                                        <button class="btn  dropdown-toggle" type="button" id="dropdownMenuButton"
                                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <i class="ml-3 far fas fa-list nav-icon" style="font-size: 10px"></i>
                                        </button>
                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                            @can('close-token')
                                                @if ($r->employees != null)
                                                    <button type="button" class="btn btn-info btn-small close_token_btn" data-toggle="modal" data-target="#closeTokenModel">Close Token</button>
                                                @endif
                                            @endcan
                                            @can('assign-token')
                                                @if ($r->employees == null)
                                                    <button type="button" class="btn btn-block btn-info btn-small assign_token_btn" data-toggle="modal" data-target="#assignTokenModel">Assign Token</button>
                                                @else
                                                    <button type="button" class="btn btn-block btn-info btn-small re_assign_token_btn" data-toggle="modal" data-target="#reAssignTokenModel">Re-Assign Token</button>
                                                @endif
                                            @endcan

                                            <button type="button" class="btn btn-block btn-info btn-small add_note" data-toggle="modal" data-target="#addNoteModel">Note</button>
                                            {{-- <button type="button" class="btn btn-block btn-small show_note" data-toggle="modal" data-target="#showNoteModel">Show Note</button> --}}
                                        </div>
                                    </div>
                                </td>

                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

        </div>
        <div class="modal fade" id="assignTokenModel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Assign Token</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form action="{{ route('assignTokenFromModal') }}" method="POST" name="assign_token">
                            @csrf
                            <div class="form-group">
                                <label for="recipient-name" class="col-form-label">Empolyee:</label>
                                <select name="employee_modal" id="employee_modal" class="form-control bSelect" required>
                                    <option value="">Select Employee</option>
                                    @foreach ($employees as $employee)
                                        <option value="{{ $employee->id }}">{{ $employee->name }}</option>
                                    @endforeach

                                </select>
                            </div>
                            <input type="hidden" name="id_token_assign_model" id="id_token_assign_model">

                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Save </button>
                        </form>
                    </div>
                    <div class="modal-footer">
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="reAssignTokenModel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Re Assign Token</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form action="{{ route('reAssignTokenFromModal') }}" method="POST" name="assign_token">
                            @csrf
                            <div class="form-group">
                                <label for="recipient-name" class="col-form-label">Empolyee:</label>
                                <select name="employee" id="employee" class="form-control bSelect" required>
                                    <option value="">Select Employee</option>
                                    @foreach ($employees as $employee)
                                        <option value="{{ $employee->id }}">{{ $employee->name }}</option>
                                    @endforeach

                                </select>
                            </div>
                            <input type="hidden" name="id_token_re_assign_model" id="id_token_re_assign_model">

                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Save </button>
                        </form>
                    </div>
                    <div class="modal-footer">
                    </div>
                </div>
            </div>
        </div>


        <div class="modal fade" id="closeTokenModel" tabindex="-1" role="dialog" aria-labelledby="closeTokenModel"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Close Token</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form action="{{ route('closeTokenModal') }}" method="POST" name="assign_token">
                            @csrf
                            <div class="form-group">
                                <label for="recipient-name" class="col-form-label">Remark</label>
                                <input type="text" name="remark" id="remark" class="form-control">
                            </div>
                            <input type="hidden" name="id_token_close_model" id="id_token_close_model">

                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Save </button>
                        </form>
                    </div>
                    <div class="modal-footer">
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="addNoteModel" tabindex="-1" role="dialog" aria-labelledby="closeTokenModel"
            aria-hidden="true">
            <div class="modal-dialog modal-xl" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Add Note</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" >
                        <div class="table-responsive" style="height: 300px">
                            <table id="token_note_table" class="table table-bordered">
                                <thead class="bg-dark">
                                    <tr>
                                        <th style="max-width: 100px">Id</th>
                                        <th style="max-width: 100px">Note For</th>
                                        <th style="max-width: 100px">Created Time</th>
                                        <th>Remark</th>
                                        <th>Created By</th>
                                        @can('token-note-delete')
                                            <th style="max-width: 100px">Action</th>
                                        @endcan
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                        <form action="{{ route('add-note-token') }}" method="POST" name="assign_token">
                            @csrf
                            <div class="form-group">
                                <label for="recipient-name" class="col-form-label">Note For</label>
                                <select name="note_for" id="note_for" class="form-control">
                                    <option value="employee">Employee</option>
                                    <option value="customer">Customer</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="recipient-name" class="col-form-label">Remark</label>
                                <textarea type="text" name="note_remark" id="note_remark" class="form-control"></textarea>
                            </div>
                            <input type="hidden" name="add_modal_token_id" id="add_modal_token_id">

                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Save </button>
                        </form>
                    </div>
                    <div class="modal-footer">
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="showNoteModel" tabindex="-1" role="dialog" aria-labelledby="closeTokenModel"
            aria-hidden="true">
            <div class="modal-dialog modal-xl" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabelshow">Show Note</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" >
                        <div class="table-responsive" style="height: 300px">
                            <table id="token_note_table_show" class="table table-bordered">
                                <thead class="bg-dark">
                                    <tr>
                                        <th style="max-width: 100px">Id</th>
                                        <th style="max-width: 100px">Note For</th>
                                        <th style="max-width: 100px">Created Time</th>
                                        <th>Remark</th>
                                        <th>Created By</th>
                                        <th style="max-width: 100px">Action</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>

                    </div>
                    <div class="modal-footer">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style>
        .sub-menu li {
            font-size: 1em;
            padding: .25em 1em;
            line-height: 1em;
        }

        .sub-menu {
            padding: 0;
            max-height: 200px;
            /* 1.5 x 3 */
            overflow-y: auto;
        }

        li.selected {
            background: #17A2B8 !important;
        }
    </style>
@endsection

@section('ajax')
<script>
    $(document).ready(function() {
        $('#tokenCategory').change(function() {
            var tokenCategory = $(this).val();
            if (tokenCategory) {
                $.ajax({
                    type: "GET",
                    url: '{{ route('get-token-code') }}',
                    data: {
                        tokenCategory: tokenCategory
                    },
                    success: function(res) {
                        if (res) {
                            $("#tokenCode").empty();
                            $("#tokenCode").append('<option>Select One Code</option>');
                            res.forEach(element => {
                                $("#tokenCode").append('<option value="' + element.id + '">' + element.tokenCode + '</option>');
                            });


                        } else {
                            $("#tokenCode").empty();
                        }
                    }
                });
            } else {
                $("#tokenCode").empty();
            }
        });

        function addCustomerInlist(id, customer_name, customer_mobile, userid) {
            if (customer_name == null) {
                customer_name = '';
            }
            if (customer_mobile == null) {
                customer_mobile = '';
            }
            $("#customer_list").append(
                '<li class="list-group-item list-group-item-dark customer_li" style="background-color:skyblue;">' +
                    '<div class="row">' +
                        '<p><strong> ' + customer_name + '-(' + customer_mobile + ')</strong><br>' +
                            '<b >UserId: </b>' + userid + '<br>' +
                         '</p>' +
                            '<div class="col-md-6"><input type="hidden" class="customer_id" value="' + id + '" name="reference_no" placeholder="Enter Name" ></div>' +
                            '<div class="col-md-6"><input type="hidden" class="customer_user_name" value="' + userid + '" name="reference_no" placeholder="Enter Name" ></div>' +
                            '<div class="col-md-6"><input type="hidden" class="customer_name" value="' + customer_name + '" name="reference_no" placeholder="Enter Name" ></div>' +
                            '<div class="col-md-6"><input type="hidden" class="customer_mobile" value="' + customer_mobile + '" name="reference_no" placeholder="Enter Name" ></div>' +
                        '</div>' +
                '</li>');
        }

        $("#search").keyup(function() {
            var search = $(this).val();
            if (search.length >= 2) {
                // console.log(search.length);
                $.ajax({
                    url: '{{ route('get-customer') }}',
                    method: "GET",
                    data: {
                        search: search
                    },
                    success: function(data) {
                        $("#customer_list").empty();
                        data.forEach(element => {
                            addCustomerInlist(element.id, element.clientsinfo .clients_name, element.clientsinfo.contact_no, element.userid);
                        });
                    }
                });
            } else {
                $("#customer_list").empty();

            }

        });

        $(document).on('click', '.customer_li', function() {
            var customer_cid = $(this).find('.customer_id').val();
            var customer_user_name = $(this).find('.customer_user_name').val();
            var customer_name = $(this).find('.customer_name').val();
            var customer_mobile = $(this).find('.customer_mobile').val();

            $("#clientId").val(customer_cid);
            $("#username").val(customer_user_name);
            $("#reportedBy").val(customer_name);
            $("#reporterContact").val(customer_mobile);
            $("#customer_list").empty();
            // $('#description').focus();
        });

        $('.assign_token_btn').click(function() {
            var token_id = $(this).parents("tr").find(".token_id_of_table").text();
            // console.log(token_id);
            $('#id_token_assign_model').val(token_id);
        });
        $('.close_token_btn').click(function() {
            var token_id = $(this).parents("tr").find(".token_id_of_table").text();
            // console.log(token_id);
            $('#id_token_close_model').val(token_id);
        });
        $('.re_assign_token_btn').click(function() {
            var token_id = $(this).parents("tr").find(".token_id_of_table").text();
            // console.log(token_id);
            $('#id_token_re_assign_model').val(token_id);
        });

        function addToTokenNoteTable(id,note,created_by,type,created_at,delete_permission)
        {
            let delete_btn = '';
            if(delete_permission == false){
                delete_btn = 'd-none'
            }
            let note_for = type;
            if(type == 'employee'){
                note_for = 'Employee';
            }else{
                note_for = 'Customer';
            }
           let d =  moment(created_at).format('YYYY-MM-DD hh:mm:ss A');

            $('#token_note_table tbody').append(
                        '<tr>' +
                            '<td>'+id+'</td>' +
                            '<td><strong >'+note_for+'</strong></td>' +
                            '<td>'+d+'</td>' +
                            '<td>'+note+'</td>' +
                            '<td>'+created_by+'</td>' +
                            '<td class='+delete_btn+'><lable style="width: 40px" id="btnCancle" step=".01" class="btn btn-danger float-right">-</lable></td>' +
                        '</tr>'
                    );
        }

        function addToTokenNoteShowTable(id,note,created_by,type,created_at,delete_permission)
        {
            let delete_btn = '';
            if(delete_permission == false){
                delete_btn = 'd-none'
            }
            let note_for = type;
            if(type == 'employee'){
                note_for = 'Employee';
            }else{
                note_for = 'Customer';
            }
            $('#token_note_table_show tbody').append(
                        '<tr>' +
                            '<td>'+id+'</td>' +
                            '<td><strong >'+note_for+'</strong></td>' +
                            '<td>'+created_at+'</td>' +
                            '<td>'+note+'</td>' +
                            '<td>'+created_by+'</td>' +
                            '<td class='+delete_btn+'><lable style="width: 40px" id="btnCancle" step=".01" class="btn btn-danger float-right">-</lable></td>' +
                        '</tr>'
                    );
        }
        $('.add_note').click(function() {
            var token_id = $(this).parents("tr").find(".token_id_of_table").text();
            $('#add_modal_token_id').val(token_id);
            $.ajax({
                type: "GET",
                url: '{{ route('get-token-note') }}',
                data: {
                    token_id: token_id
                },
                success: function(res) {

                    $('#token_note_table tbody').empty();
                    let list = res.token_notes;
                    let delete_permission = res.token_note_delete;
                    list.forEach(element => {
                            addToTokenNoteTable(element.id, element.note, element.user.name,element.note_type,element.created_at,delete_permission);
                    });


                }

            });
        });

        $(document).on("click", "#btnCancle", function() {
            let token_note_id = $(this).parents("tr").find("td").eq(0).text();
            $(this).closest("tr").remove();

            $.ajax({
                type: "POST",
                url: '{{ route('delete-token-note') }}',
                data: {
                    token_note_id: token_note_id
                },
                success: function(res){
                    if(res == 1){
                        toastr.success('Note Deleted Successfully');
                    }
                }
            });
        });

        $('.show_note').click(function() {
            var token_id = $(this).parents("tr").find(".token_id_of_table").text();
            // console.log(token_id);
            $('#add_modal_token_id').val(token_id);
            $.ajax({
                type: "GET",
                url: '{{ route('get-token-note') }}',
                data: {
                    token_id: token_id
                },
                success: function(res) {
                    console.log(res);
                    $('#token_note_table_show tbody').empty();
                    let list = res.token_notes;
                    let delete_permission = res.token_note_delete;
                    list.forEach(element => {
                        addToTokenNoteShowTable(element.id, element.note, element.user.name,element.note_type,element.created_at,delete_permission);
                    });


                }

            });
        });

    });
</script>
@endsection