@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-3">
                                    <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-3">
                                    <label for="shortname">Username</label>
                                    <input id="username" name="username" class="form-control" placeholder=""
                                        autocomplete="off" readonly>
                                </div>
                                <div class="form-group col-md-3">
                                    <label for="shortname">Token Category*</label>
                                    <select name="tokenCategory" id="tokenCategory" class="form-control bSelect select2"
                                        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-3">
                                    <label for="shortname">Token Code*</label>
                                    <select name="tokenCode" id="tokenCode" class="form-control bSelect select2" 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-3">
                                    <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-3">
                                    <label for="shortname">Reporter Contact No*</label>
                                    <input type="text" name="reporterContact" id="reporterContact" value=""
                                        minlength="11" maxlength="14" pattern="^(\d{11}|\+88\d{11})$" class="form-control"
                                        placeholder="11 digits or +88XXXXXXXXXXX" autocomplete="off" required>
                                    @error('reporterContact')
                                        <div class="alert alert-danger mt-1">
                                            {{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="shortname">Description*</label>
                                    <textarea name="description" id="description" rows="2" value="" class="form-control"
                                        placeholder="Description" autocomplete="off" required></textarea>
                                    @error('description')
                                        <div class="alert alert-danger mt-1">
                                            {{ $message }}</div>
                                    @enderror
                                </div>
                                @if (checkSettings('token_source') == 'enable')
                                    <div class="form-group col-md-3">
                                        <label>Token Source*</label>
                                        <select name="token_source" id="" class="form-control select2" required>
                                            <option value="">Select One</option>
                                            @forelse ($tokenSource as $item)
                                                <option value="{{ $item->name }}">{{ $item->name }}</option>
                                            @empty
                                            @endforelse
                                        </select>
                                    </div>
                                @endif
                                @can('assign-token')
                                    <div class="form-group col-md-3">
                                        <label for="shortname">
                                            Assign To
                                        </label>
                                        <select name="employee[]" id="employee1" class="form-control bSelect select2" multiple>
                                            <option value="">Select Employee(s)</option>
                                            @foreach ($employees as $employee)
                                                <option value="{{ $employee->id }}">{{ $employee->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                @endcan
                                <div class="form-group col-md-3">
                                    <label for="shortname">Token Type*</label>
                                    <select name="token_type" id="token_type" class="form-control bSelect select2" required>
                                        <option value="">Select Token Type</option>
                                        <option value="Logical">Logical</option>
                                        <option value="Physical">Physical</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-3">
                                    <label for="onu_status">ONU Status</label>
                                    <select name="onu_status" id="onu_status" class="form-control bSelect select2">
                                        <option value="">Select Status</option>
                                        <option value="online">Online</option>
                                        <option value="offline">Offline</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-3" id="onu_power_wrapper" style="display: none;">
                                    <label for="onu_power">ONU Power</label>
                                    <input type="text" name="onu_power" id="onu_power" class="form-control"
                                        placeholder="e.g. -15 dBm" autocomplete="off">
                                </div>
                            </div>

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

                        </div>
                    </div>
                </form>
                <form action="{{ route('add-token') }}" method="GET">

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

                            <div class="row">

                                <div class="form-group col-md-3">
                                    <label for="shortname">Reseller * </label>
                                    <select name="reseller_id" id="reseller_id" class="form-control bSelect select2"
                                        required>
                                        <option value="">Select One</option>
                                        <option value="all" {{ $reseller_id === 'all' ? 'selected' : '' }}>All</option>
                                        @foreach ($resellers as $reseller)
                                            <option value="{{ $reseller->id }}"
                                                {{ $reseller_id == $reseller->id ? 'selected' : '' }}>
                                                {{ $reseller->name }}</option>
                                        @endforeach
                                    </select>

                                </div>
                                <div class="form-group col-md-3">
                                    <label for="shortname">Token Type</label>
                                    <select name="token_type" id="token_type" class="form-control bSelect select2">
                                        <option value="">Select Token Type</option>
                                        <option value="Logical">Logical</option>
                                        <option value="Physical">Physical</option>
                                    </select>
                                </div>
                                <div class="form-group mt-4 col-md-3 offset-md-3">

                                    <button type="submit" class="btn btn-primary float-right">
                                        Search
                                    </button>
                                </div>

                            </div>



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

            </div>
            @if ($table)
                <div class="table-responsive">
                    <h3 class="text-right">Total Token: {{ $tokenCount }}</h3>
                    <table @if (checkSettings('changeOrderInToken') == 'enable') id="dataTabletoken"  @else  id="dataTable" @endif
                        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:100px">Source</th>
                                <th style="width:120px">Creator</th>
                                <th style="padding-left: 2px;padding-right: 2px;max-width:120px">Reseller</th>
                                <th style="padding-left: 2px;padding-right: 2px;max-width:120px">POP</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">Assigned</th>
                                <th style="padding-left: 2px;padding-right: 2px;max-width:70px">Token Type</th>
                                <th style="padding-left: 2px;padding-right: 2px;max-width:70px">ONU</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: 4px; padding-right: 4px; max-width: 150px;">

                                        {{-- Token ID --}}
                                        <div class="tk-badge tk-badge--id">
                                            <span class="tk-dot"></span>
                                            <span class="tk-label">TKN</span>
                                            <strong>{{ $r->token }}</strong>
                                        </div>

                                        {{-- Created Time --}}
                                        <div class="tk-row">
                                            <span class="tk-icon tk-icon--create" title="Created">
                                                <i class="fas fa-plus-circle"></i>
                                            </span>
                                            <div>
                                                <div class="tk-meta-label">Created</div>
                                                <div class="tk-meta-val">
                                                    {{ date('d M Y, g:i a', strtotime($r->created_at)) }}</div>
                                            </div>
                                        </div>

                                        {{-- Assign Time --}}
                                        @if ($r->assign_time)
                                            <div class="tk-row">
                                                <span class="tk-icon tk-icon--assign" title="Assigned">
                                                    <i class="fas fa-user-check"></i>
                                                </span>
                                                <div>
                                                    <div class="tk-meta-label">Assigned</div>
                                                    <div class="tk-meta-val">
                                                        {{ date('d M Y, g:i a', strtotime($r->assign_time)) }}</div>
                                                    @if (!$r->close_time)
                                                        <div class="tk-elapsed tk-elapsed--warn">
                                                            {{ dateTimeDifferent(now(), $r->assign_time) }} ago · not
                                                            closed
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        @else
                                            <div class="tk-elapsed tk-elapsed--warn" style="margin-top:4px;">
                                                <i class="fas fa-clock"></i>
                                                {{ dateTimeDifferent(now(), $r->created_at) }} ago · not assigned
                                            </div>
                                        @endif

                                        {{-- Work Start / Solve Time --}}
                                        @if ($r->work_start_time)
                                            <div class="tk-divider"></div>

                                            <div class="tk-row">
                                                <span class="tk-icon tk-icon--work" title="Work Started">
                                                    <i class="fas fa-play-circle"></i>
                                                </span>
                                                <div>
                                                    <div class="tk-meta-label">Work Started</div>
                                                    <div class="tk-meta-val">
                                                        {{ date('d M Y, g:i a', strtotime($r->work_start_time)) }}</div>
                                                </div>
                                            </div>

                                            @if ($r->close_time)
                                                <div class="tk-row">
                                                    <span class="tk-icon tk-icon--closed" title="Closed">
                                                        <i class="fas fa-check-circle"></i>
                                                    </span>
                                                    <div>
                                                        <div class="tk-meta-label">Closed</div>
                                                        <div class="tk-meta-val">
                                                            {{ date('d M Y, g:i a', strtotime($r->close_time)) }}</div>
                                                    </div>
                                                </div>
                                                <div class="tk-solve-pill">
                                                    <i class="fas fa-bolt"></i>
                                                    Solved in {{ dateTimeDifferent($r->close_time, $r->work_start_time) }}
                                                </div>
                                            @else
                                                <div class="tk-live-wrap">
                                                    <span class="tk-live-dot"></span>
                                                    <span class="tk-live-label">Live</span>
                                                    <span class="work-start-counter tk-counter"
                                                        data-work-start="{{ strtotime($r->work_start_time) }}">--:--:--</span>
                                                </div>
                                            @endif
                                        @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:100px">
                                        @if ($r->token_source == 'CRM')
                                            <span class="btn btn-info btn-xs">{{ $r->token_source }}</span>
                                        @else
                                            {{ $r->token_source }}
                                        @endif
                                    </td>
                                    <td style="padding-left: 2px;padding-right: 2px;max-width:70px">
                                        {{ $r->creator->name ?? '' }}
                                        @if ($r->createByClient)
                                            <span class="badge badge-danger">{{ $r->createByClient ?? '' }}</span>
                                        @endif
                                    </td>
                                    <td style="padding-left: 2px;padding-right: 2px;max-width:120px">
                                        {{ $r->clients->pops->reseller->name ?? '' }}
                                    </td>
                                    <td style="padding-left: 2px;padding-right: 2px;max-width:120px">
                                        {{ $r->clients->pops->popname ?? '' }}
                                    </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 ?? '' }}, <br>
                                            @endif
                                            @if (checkSettings('select_option_for_box_and_ponsetting') == 'enable')
                                                @if (!empty(optional($r->clients->clientsinfo)->map_box_id))
                                                    Map Box : {{ optional($r->clients->clientsinfo->mapBox)->name ?? '' }},
                                                @endif
                                                @if (!empty(optional($r->clients->clientsinfo)->onu_serial))
                                                    <br>ONU Serial :
                                                    {{ optional(optional($r->clients->clientsinfo)->pon)->name ?? optional($r->clients->clientsinfo)->onu_serial }}
                                                @endif
                                            @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">
                                        @foreach ($r->assignUsers as $assignUser)
                                            {{ $assignUser->employee->name ?? '' }}
                                            <br>
                                        @endforeach
                                    </td>
                                    <td style="padding-left: 2px;padding-right: 2px;max-width:70px">
                                        {{ $r->token_type ?? '' }}</td>
                                    <td style="padding-left: 2px;padding-right: 2px;max-width:70px">
                                        @if ($r->onu_status === 'online')
                                            {{ $r->onu_power ?? '—' }}
                                        @else
                                            {{ $r->onu_status ?? '—' }}
                                        @endif
                                    </td>
                                    <td style="padding-left: 2px; padding-right: 2px; max-width: 70px;">
                                        <div class="work-start-now-wrapper" data-token-id="{{ $r->id }}">
                                            <div class="dropdown">
                                                <button class="btn btn-sm btn-secondary dropdown-toggle" type="button"
                                                    id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
                                                    aria-expanded="false">
                                                    <i class="fas fa-list" style="font-size: 10px;"></i>
                                                </button>
                                                <div class="dropdown-menu dropdown-menu-right shadow"
                                                    aria-labelledby="dropdownMenuButton">

                                                    @can('close-token')
                                                        @if ($r->assign_time != null)
                                                            <button type="button"
                                                                class="dropdown-item btn-small close_token_btn"
                                                                data-toggle="modal" data-target="#closeTokenModel">
                                                                <i class="fas fa-times-circle text-danger mr-2"></i> Close
                                                                Token
                                                            </button>
                                                        @endif
                                                    @endcan

                                                    @can('assign-token')
                                                        @if ($r->assign_time == null)
                                                            <button type="button"
                                                                class="dropdown-item btn-small assign_token_btn"
                                                                data-toggle="modal" data-target="#assignTokenModel">
                                                                <i class="fas fa-user-plus text-info mr-2"></i> Assign Token
                                                            </button>
                                                        @else
                                                            <button type="button"
                                                                class="dropdown-item btn-small re_assign_token_btn"
                                                                data-toggle="modal" data-target="#reAssignTokenModel">
                                                                <i class="fas fa-user-edit text-warning mr-2"></i> Re-Assign
                                                                Token
                                                            </button>
                                                        @endif
                                                    @endcan

                                                    <div class="dropdown-divider"></div>

                                                    <button type="button" class="dropdown-item add_note"
                                                        data-toggle="modal" data-target="#addNoteModel">
                                                        <i class="fas fa-sticky-note text-primary mr-2"></i> Note
                                                    </button>

                                                    @if ($r->work_start_time == null && $r->assign_time != null && $r->close_time == null)
                                                        @can('ticket-work-start-now')
                                                            <div class="dropdown-divider"></div>
                                                            <button type="button" class="dropdown-item work-start-now-btn"
                                                                data-token-id="{{ $r->id }}">
                                                                <i class="fas fa-play-circle text-success mr-2"></i> Work Start
                                                                Now
                                                            </button>
                                                        @endcan
                                                    @endif

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

                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </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 select2"
                                    multiple required>
                                    <option value="">Select Employee(s)</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_re" class="form-control bSelect select2" multiple required>
                                    <option value="">Select Employee(s)</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" required>
                            </div>
                            @if (checkSettings('remote_autoreboot_info_required') == 'enable')
                                <div class="form-group">
                                    <label for="recipient-name"
                                        class="col-form-label">Remote{{ checkRequired('remote_autoreboot_info_required', '*') }}</label>
                                    <select name="remote" id="" class="form-control"
                                        {{ checkRequired('remote_autoreboot_info_required', 'required') }}>
                                        <option value="0">No</option>
                                        <option value="1">Yes</option>
                                    </select>
                                </div>
                            @endif
                            <div class="form-group">
                                <label for="ping_loss" class="col-form-label">Ping
                                    Loss{{ checkRequired('ping_optical_info_required', '*') }}</label>
                                <input type="text" name="ping_loss" id="ping_loss" class="form-control"
                                    {{ checkRequired('ping_optical_info_required', 'required') }}>
                            </div>
                            @if (checkSettings('remote_autoreboot_info_required') == 'enable')
                                <div class="form-group">
                                    <label for="recipient-name" class="col-form-label">Auto
                                        Reboot{{ checkRequired('remote_autoreboot_info_required', '*') }}</label>
                                    <select name="autoreboot" id="" class="form-control"
                                        {{ checkRequired('remote_autoreboot_info_required', 'required') }}>
                                        <option value="0">No</option>
                                        <option value="1">Yes</option>
                                    </select>
                                </div>
                            @endif
                            <div class="form-group">
                                <label for="optical_power" class="col-form-label">Optical
                                    Power{{ checkRequired('ping_optical_info_required', '*') }}</label>
                                <input type="text" name="optical_power" id="optical_power" class="form-control"
                                    {{ checkRequired('ping_optical_info_required', 'required') }}>
                            </div>

                            <div class="form-group">
                                <label for="issue_type">Issue Type*</label>
                                <div class="row">
                                    <div class="col-md-6">
                                        <input type="radio" id="physical" name="issue_type" value="Physical"
                                            required>
                                        <label for="physical">Physical</label><br>
                                    </div>
                                    <div class="col-md-6">
                                        <input type="radio" id="logical" name="issue_type" value="Logical" required>
                                        <label for="logical">Logical</label><br>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="client_feedback" class="col-form-label">Client Feedback*</label>
                                <textarea name="client_feedback" class="form-control" required></textarea>
                            </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>
        /* ── Token Timeline Card – Light Theme ── */
        .tk-badge--id {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: #eef4ff;
            border: 1px solid #c3d8f8;
            border-radius: 6px;
            padding: 3px 8px;
            margin-bottom: 6px;
            font-size: 11.5px;
            color: #4a6080;
        }

        .tk-badge--id strong {
            color: #1a3a5c;
            font-size: 12px;
        }

        .tk-dot {
            width: 6px;
            height: 6px;
            background: #3b82f6;
            border-radius: 50%;
            box-shadow: 0 0 5px #3b82f655;
        }

        .tk-label {
            font-size: 9px;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: #94a3b8;
        }

        /* ── Rows ── */
        .tk-row {
            display: flex;
            align-items: flex-start;
            gap: 6px;
            margin-bottom: 5px;
        }

        .tk-icon {
            width: 22px;
            height: 22px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .tk-icon--create {
            background: #dbeafe;
            color: #2563eb;
        }

        .tk-icon--assign {
            background: #fef9c3;
            color: #b45309;
        }

        .tk-icon--work {
            background: #dcfce7;
            color: #16a34a;
        }

        .tk-icon--closed {
            background: #d1fae5;
            color: #059669;
        }

        .tk-meta-label {
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: .08em;
            color: #94a3b8;
            line-height: 1.2;
        }

        .tk-meta-val {
            font-size: 11px;
            color: #334155;
            line-height: 1.4;
            white-space: nowrap;
        }

        /* ── Elapsed warning ── */
        .tk-elapsed {
            font-size: 10px;
            color: #d97706;
            margin-top: 1px;
        }

        .tk-elapsed i {
            margin-right: 3px;
        }

        /* ── Divider ── */
        .tk-divider {
            border-top: 1px dashed #e2e8f0;
            margin: 6px 0;
        }

        /* ── Solve pill ── */
        .tk-solve-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: #f0fdf4;
            border: 1px solid #86efac;
            border-radius: 20px;
            padding: 2px 10px;
            font-size: 10.5px;
            color: #16a34a;
            margin-top: 4px;
            white-space: nowrap;
        }

        /* ── Live counter ── */
        .tk-live-wrap {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-top: 5px;
            background: #fffbeb;
            border: 1px solid #fde68a;
            border-radius: 6px;
            padding: 3px 8px;
        }

        .tk-live-dot {
            width: 6px;
            height: 6px;
            background: #f59e0b;
            border-radius: 50%;
            animation: tk-pulse 1.4s ease-in-out infinite;
            flex-shrink: 0;
        }

        @keyframes tk-pulse {

            0%,
            100% {
                box-shadow: 0 0 0 0 #f59e0b55;
            }

            60% {
                box-shadow: 0 0 0 6px transparent;
            }
        }

        .tk-live-label {
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: .1em;
            color: #b45309;
        }

        .tk-counter {
            font-size: 12px;
            font-weight: 600;
            color: #d97706;
            font-variant-numeric: tabular-nums;
            letter-spacing: .03em;
        }

        .sub-menu li {
            font-size: 1em;
            padding: .25em 1em;
            line-height: 1em;
        }

        .sub-menu {
            padding: 0;
            max-height: 200px;
            overflow-y: auto;
        }

        li.selected {
            background: #17A2B8 !important;
        }

        /* ── Token Timeline Card – Light Theme ── */
        .tk-badge--id {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: #eef4ff;
            border: 1px solid #c3d8f8;
            border-radius: 6px;
            padding: 3px 8px;
            margin-bottom: 6px;
            font-size: 11.5px;
            color: #4a6080;
        }

        .tk-badge--id strong {
            color: #1a3a5c;
            font-size: 12px;
        }

        .tk-dot {
            width: 6px;
            height: 6px;
            background: #3b82f6;
            border-radius: 50%;
            box-shadow: 0 0 5px #3b82f655;
        }

        .tk-label {
            font-size: 9px;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: #94a3b8;
        }

        /* ── Rows ── */
        .tk-row {
            display: flex;
            align-items: flex-start;
            gap: 6px;
            margin-bottom: 5px;
        }

        .tk-icon {
            width: 22px;
            height: 22px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .tk-icon--create {
            background: #dbeafe;
            color: #2563eb;
        }

        .tk-icon--assign {
            background: #fef9c3;
            color: #b45309;
        }

        .tk-icon--work {
            background: #dcfce7;
            color: #16a34a;
        }

        .tk-icon--closed {
            background: #d1fae5;
            color: #059669;
        }

        .tk-meta-label {
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: .08em;
            color: #94a3b8;
            line-height: 1.2;
        }

        .tk-meta-val {
            font-size: 11px;
            color: #334155;
            line-height: 1.4;
            white-space: nowrap;
        }

        /* ── Elapsed warning ── */
        .tk-elapsed {
            font-size: 10px;
            color: #d97706;
            margin-top: 1px;
        }

        .tk-elapsed i {
            margin-right: 3px;
        }

        /* ── Divider ── */
        .tk-divider {
            border-top: 1px dashed #e2e8f0;
            margin: 6px 0;
        }

        /* ── Solve pill ── */
        .tk-solve-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: #f0fdf4;
            border: 1px solid #86efac;
            border-radius: 20px;
            padding: 2px 10px;
            font-size: 10.5px;
            color: #16a34a;
            margin-top: 4px;
            white-space: nowrap;
        }

        /* ── Live counter ── */
        .tk-live-wrap {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-top: 5px;
            background: #fffbeb;
            border: 1px solid #fde68a;
            border-radius: 6px;
            padding: 3px 8px;
        }

        .tk-live-dot {
            width: 6px;
            height: 6px;
            background: #f59e0b;
            border-radius: 50%;
            animation: tk-pulse 1.4s ease-in-out infinite;
            flex-shrink: 0;
        }

        @keyframes tk-pulse {

            0%,
            100% {
                box-shadow: 0 0 0 0 #f59e0b55;
            }

            60% {
                box-shadow: 0 0 0 6px transparent;
            }
        }

        .tk-live-label {
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: .1em;
            color: #b45309;
        }

        .tk-counter {
            font-size: 12px;
            font-weight: 600;
            color: #d97706;
            font-variant-numeric: tabular-nums;
            letter-spacing: .03em;
        }

        .sub-menu li {
            font-size: 1em;
            padding: .25em 1em;
            line-height: 1em;
        }

        .sub-menu {
            padding: 0;
            max-height: 200px;
            overflow-y: auto;
        }

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

@section('ajax')
    <script>
        $(document).ready(function() {
            // Reseller dropdown: searchable across all resellers
            $('#reseller_id').select2({
                placeholder: 'Select One',
                allowClear: false,
                width: '100%'
            });

            $('#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 value="">Select One Code</option>');
                                res.forEach(element => {
                                    $("#tokenCode").append('<option value="' + element
                                        .id + '">' + element.tokenCode + '</option>'
                                    );
                                });


                            } else {
                                $("#tokenCode").empty();
                                $("#tokenCode").append(
                                    '<option value="">Select One Code</option>');
                            }
                        }
                    });
                } else {
                    $("#tokenCode").empty();
                    $("#tokenCode").append('<option value="">Select One Code</option>');
                }
            });

            function toggleOnuPowerField() {
                var onuStatus = $('#onu_status').val();
                if (onuStatus === 'online') {
                    $('#onu_power_wrapper').show();
                } else {
                    $('#onu_power_wrapper').hide();
                    $('#onu_power').val('');
                }
            }
            $('#onu_status').on('change', toggleOnuPowerField);
            toggleOnuPowerField();

            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);
                        });


                    }

                });
            });

            $(document).on('click', '.work-start-now-btn', function() {
                if (!confirm('Are you sure you want to start work on this ticket?')) return;
                var $btn = $(this);
                var $wrapper = $btn.closest('.work-start-now-wrapper');
                var tokenId = $wrapper.data('token-id');
                var url = '{{ route('ticket-work-start-now', 0) }}'.replace(/0$/, tokenId);
                $btn.prop('disabled', true);
                $.get(url)
                    .done(function(res) {
                        if (res.success) {
                            toastr.success(res.message);
                            $wrapper.html('<span class="badge badge-success">Work started</span>');
                        } else {
                            toastr.error(res.message || 'Something went wrong');
                            $btn.prop('disabled', false);
                        }
                    })
                    .fail(function(xhr) {
                        var msg = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON
                            .message : 'Request failed';
                        toastr.error(msg);
                        $btn.prop('disabled', false);
                    });
            });

            $('#dataTabletoken').DataTable({
                responsive: true,
                "bProcessing": true,
                "iDisplayLength": 100,
                'order': [
                    [0, "asc"]
                ]
            });

            $('#assignTokenModel').on('shown.bs.modal', function() {
                $('#employee_modal').select2({
                    dropdownParent: $('#assignTokenModel') // Fixes issues inside modals
                });
            });

            $('#reAssignTokenModel').on('shown.bs.modal', function() {
                $('#employee_re').select2({
                    dropdownParent: $('#reAssignTokenModel') // Fixes issues inside modals
                });
            });

            function formatElapsed(seconds) {
                if (seconds < 0) return '0s';
                var d = Math.floor(seconds / 86400);
                var h = Math.floor((seconds % 86400) / 3600);
                var m = Math.floor((seconds % 3600) / 60);
                var s = Math.floor(seconds % 60);
                var parts = [];
                if (d > 0) parts.push(d + 'd');
                if (h > 0) parts.push(h + 'h');
                parts.push(m + 'm');
                parts.push(s + 's');
                return parts.join(' ');
            }

            function updateWorkStartCounters() {
                var nowSec = Math.floor(Date.now() / 1000);
                $('.work-start-counter').each(function() {
                    var start = parseInt($(this).data('work-start'), 10);
                    if (!isNaN(start)) {
                        $(this).text('(' + formatElapsed(nowSec - start) + ')').css('white-space',
                            'nowrap');
                    }
                });
            }

            updateWorkStartCounters();
            setInterval(updateWorkStartCounters, 1000);

        });
    </script>
@endsection