@extends('admin.layouts.app')
@section('title', get_setting('site_name').' | '.__('Movement Applications'))

@push('css')
<style>
    .visit-page .page-title { font-size: 1.25rem; font-weight: 600; }
    .visit-page .card { border: 1px solid #e9ecef; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); }
    .visit-page .card-header { padding: 0.85rem 1.15rem; background: #f8f9fb; border-bottom: 1px solid #e9ecef; }
    .visit-page .card-footer { padding: 0.75rem 1.15rem; background: #fff; border-top: 1px solid #e9ecef; }
    .visit-page .filter-panel { background: #f8f9fb; border-bottom: 1px solid #e9ecef; padding: 1rem 1.15rem; }
    .visit-page .filter-panel label { font-size: 0.8125rem; font-weight: 600; color: #495057; margin-bottom: 0.35rem; }
    .visit-page .stat-pill { border: 1px solid #e9ecef; border-radius: 0.5rem; padding: 0.75rem 1rem; background: #fff; height: 100%; }
    .visit-page .stat-pill h4 { font-size: 1.35rem; font-weight: 700; margin-bottom: 0.15rem; }
    .visit-page .stat-pill span { font-size: 0.8125rem; color: #6c757d; }
    .visit-page .table thead th { font-size: 0.8125rem; white-space: nowrap; border-top: 0; background: #f8f9fb; }
    .visit-page .table tbody td { vertical-align: middle; font-size: 0.875rem; }
    .visit-page .action-btns { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: flex-end; }
    .visit-page .emp-cell .name { font-weight: 600; }
    .visit-page .emp-cell .meta { font-size: 0.75rem; color: #6c757d; }
    .visit-page .select2-container .select2-selection--single { height: 38px !important; border-color: #ced4da; }
    .visit-page .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px !important; }
    .visit-page .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px !important; }
</style>
@endpush

@section('content')
    <div class="visit-page pt-3 pb-4 px-2 px-md-3">
        @if (session()->has('message'))
            <div class="alert alert-success mb-3 py-2">{{ session('message') }}</div>
        @endif
        @if (session()->has('error'))
            <div class="alert alert-danger mb-3 py-2">{{ session('error') }}</div>
        @endif

        <div class="d-flex flex-wrap align-items-start justify-content-between mb-3">
            <div class="mb-2 mb-md-0">
                <h4 class="page-title mb-1">{{ __('Movement Applications') }}</h4>
                <p class="text-muted small mb-0">{{ __('Manage employee visit and movement requests.') }}</p>
            </div>
            @can('Visit-create')
                <button type="button" class="btn btn-primary btn-sm" onclick="reconcilition()">
                    <i class="fas fa-plus mr-1"></i>{{ __('New Application') }}
                </button>
            @endcan
        </div>

        <div class="row mb-3">
            <div class="col-6 col-md-3 mb-2 mb-md-0">
                <div class="stat-pill">
                    <h4 class="text-dark mb-0">{{ $stats['total'] }}</h4>
                    <span>{{ __('Total') }}</span>
                </div>
            </div>
            <div class="col-6 col-md-3 mb-2 mb-md-0">
                <div class="stat-pill">
                    <h4 class="text-warning mb-0">{{ $stats['pending'] }}</h4>
                    <span>{{ __('Pending') }}</span>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="stat-pill">
                    <h4 class="text-info mb-0">{{ $stats['approved'] }}</h4>
                    <span>{{ __('Approved') }}</span>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="stat-pill">
                    <h4 class="text-success mb-0">{{ $stats['closed'] }}</h4>
                    <span>{{ __('Closed') }}</span>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                <h5 class="mb-0">{{ __('Applications') }}</h5>
                <span class="text-muted small">{{ __(':count records', ['count' => $visits->total()]) }}</span>
            </div>

            <div class="filter-panel">
                <form method="get" action="{{ route('admin.visit.application') }}">
                    <div class="form-row align-items-end">
                        <div class="form-group col-md-3 col-lg-2">
                            <label>{{ __('Search') }}</label>
                            <input type="search" name="q" class="form-control form-control-sm"
                                   value="{{ request('q') }}" placeholder="{{ __('Name, purpose, location…') }}">
                        </div>
                        <div class="form-group col-md-3 col-lg-2">
                            <label>{{ __('Employee') }}</label>
                            <select name="staff_id" class="form-control form-control-sm select2" data-placeholder="{{ __('All employees') }}">
                                <option value="">{{ __('All employees') }}</option>
                                @foreach($staffList as $staff)
                                    <option value="{{ $staff->id }}" @selected((string) request('staff_id') === (string) $staff->id)>
                                        {{ $staff->selectOptionLabel() }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-md-2 col-lg-2">
                            <label>{{ __('Status') }}</label>
                            <select name="visit_state" class="form-control form-control-sm">
                                <option value="">{{ __('All statuses') }}</option>
                                <option value="pending" @selected(request('visit_state') === 'pending')>{{ __('Pending') }}</option>
                                <option value="approved" @selected(request('visit_state') === 'approved')>{{ __('Approved') }}</option>
                                <option value="closed" @selected(request('visit_state') === 'closed')>{{ __('Closed') }}</option>
                            </select>
                        </div>
                        <div class="form-group col-md-2 col-lg-2">
                            <label>{{ __('Approval') }}</label>
                            <select name="status" class="form-control form-control-sm">
                                <option value="">{{ __('Any') }}</option>
                                <option value="1" @selected(request('status') === '1')>{{ __('Approved') }}</option>
                                <option value="0" @selected(request('status') === '0')>{{ __('Not approved') }}</option>
                            </select>
                        </div>
                        <div class="form-group col-md-2 col-lg-2">
                            <label>{{ __('Apply from') }}</label>
                            <input type="date" name="start_date" class="form-control form-control-sm" value="{{ request('start_date') }}">
                        </div>
                        <div class="form-group col-md-2 col-lg-2">
                            <label>{{ __('Apply to') }}</label>
                            <input type="date" name="end_date" class="form-control form-control-sm" value="{{ request('end_date') }}">
                        </div>
                        <div class="form-group col-md-2 col-lg-2">
                            <label>{{ __('Movement date') }}</label>
                            <input type="date" name="movement_date" class="form-control form-control-sm" value="{{ request('movement_date') }}">
                        </div>
                        <div class="form-group col-md-12 col-lg-auto d-flex flex-wrap">
                            <button type="submit" class="btn btn-primary btn-sm mr-2 mb-1">
                                <i class="fas fa-filter mr-1"></i>{{ __('Filter') }}
                            </button>
                            <a href="{{ route('admin.visit.application') }}" class="btn btn-outline-secondary btn-sm mb-1">{{ __('Clear') }}</a>
                        </div>
                    </div>
                </form>
            </div>

            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover table-sm mb-0">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>{{ __('Employee') }}</th>
                            <th class="d-none d-lg-table-cell">{{ __('Apply date') }}</th>
                            <th>{{ __('Movement') }}</th>
                            <th class="d-none d-md-table-cell">{{ __('Purpose') }}</th>
                            <th class="d-none d-xl-table-cell">{{ __('Period') }}</th>
                            <th class="d-none d-lg-table-cell">{{ __('Location') }}</th>
                            <th class="text-center">{{ __('Status') }}</th>
                            <th class="text-right">{{ __('Action') }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($visits as $visit)
                            @php
                                $withinDay = $visit->coming_within_day === 0 || $visit->coming_within_day === '0' || $visit->coming_within_day === false ? false : true;
                            @endphp
                            <tr>
                                <td class="text-muted">{{ $visits->firstItem() + $loop->index }}</td>
                                <td class="emp-cell">
                                    <div class="name">{{ $visit->staff?->selectOptionLabel() ?? '—' }}</div>
                                    <div class="meta">
                                        {{ $visit->staff?->warehouse?->name ?? '—' }}
                                        @if($visit->staff?->designation?->name)
                                            · {{ $visit->staff->designation->name }}
                                        @endif
                                    </div>
                                </td>
                                <td class="d-none d-lg-table-cell">{{ $visit->application_date }}</td>
                                <td>
                                    <div>{{ $visit->movement_date?->format('Y-m-d') ?? '—' }}</div>
                                    <div class="meta">
                                        {{ $withinDay ? __('Same day') : __(':days days', ['days' => $visit->duration]) }}
                                    </div>
                                </td>
                                <td class="d-none d-md-table-cell">
                                    <span title="{{ $visit->purpose }}">{{ \Illuminate\Support\Str::limit($visit->purpose ?? '—', 40) }}</span>
                                </td>
                                <td class="d-none d-xl-table-cell">
                                    @if($withinDay)
                                        <span class="text-muted">—</span>
                                    @else
                                        {{ $visit->start_date ?? '—' }} — {{ $visit->end_date ?? '—' }}
                                    @endif
                                </td>
                                <td class="d-none d-lg-table-cell">{{ \Illuminate\Support\Str::limit($visit->location ?? '—', 30) }}</td>
                                <td class="text-center">
                                    @if($visit->status == 1 && $visit->is_closed == 1)
                                        <span class="badge badge-success">{{ __('Closed') }}</span>
                                    @elseif($visit->status == 1)
                                        <span class="badge badge-info">{{ __('Approved') }}</span>
                                    @else
                                        <span class="badge badge-warning">{{ __('Pending') }}</span>
                                    @endif
                                </td>
                                <td class="text-right">
                                    <div class="action-btns">
                                        <a href="javascript:void(0)" class="btn btn-outline-secondary btn-sm"
                                           title="{{ __('View') }}"
                                           data-visit='@json($visit)'
                                           onclick="reconcilition_view(this)">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        @if($visit->status == 1 && $visit->staff_id)
                                            <a href="{{ route('visiting.Card.view', $visit->staff_id) }}"
                                               class="btn btn-outline-primary btn-sm" title="{{ __('Visiting card') }}" target="_blank">
                                                <i class="fas fa-id-card"></i>
                                            </a>
                                        @endif
                                        @can('Visit-edit')
                                            <a href="javascript:void(0)" class="btn btn-outline-info btn-sm"
                                               title="{{ __('Edit') }}"
                                               data-visit='@json($visit)'
                                               onclick="reconcilition_update(this)">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                        @endcan
                                        @can('Visit-delete')
                                            <a href="javascript:void(0)"
                                               data-href="{{ route('visit.application.destroy', $visit->id) }}"
                                               class="btn btn-outline-danger btn-sm delete_modal" title="{{ __('Delete') }}">
                                                <i class="fas fa-trash"></i>
                                            </a>
                                        @endcan
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="text-center text-muted py-4">{{ __('No movement applications found.') }}</td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            @if($visits->hasPages())
                <div class="card-footer">
                    {{ $visits->links() }}
                </div>
            @endif
        </div>
    </div>
@endsection

@section('modal')
    <div class="modal fade" id="Attendance_reconcilion">
        <form action="{{ route('admin.visit.application.store') }}" method="POST">
            @csrf
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ __('New Movement Application') }}</h5>
                        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label>{{ __('Employee') }}<span class="text-danger">*</span></label>
                                <select name="staff_id" id="admin_staff_new" class="select2 form-control" required
                                        data-placeholder="{{ __('Select employee') }}">
                                    <option value="">{{ __('Select employee') }}</option>
                                    @foreach($staffList as $staff)
                                        <option value="{{ $staff->id }}">{{ $staff->selectOptionLabel() }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label>{{ __('Application date') }}<span class="text-danger">*</span></label>
                                <input class="form-control" type="date" value="{{ date('Y-m-d') }}" name="application_date" readonly>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="duration">{{ __('Duration (days)') }}</label>
                                <input class="form-control" type="text" id="duration" value="0" name="duration" readonly>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label>{{ __('Purpose') }}<span class="text-danger">*</span></label>
                                <input class="form-control" type="text" name="purpose" required>
                            </div>
                            <div class="col-md-6">
                                <label>{{ __('Movement date') }}</label>
                                <input class="form-control" type="date" name="movement_date">
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label>{{ __('Coming within the day?') }}</label>
                                <div>
                                    <label class="mr-3"><input type="radio" name="coming_within_day" value="1" checked> {{ __('Yes') }}</label>
                                    <label><input type="radio" name="coming_within_day" value="0"> {{ __('No') }}</label>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-3 visit-date-range-row" style="display: none;">
                            <div class="col-md-6">
                                <label for="start_date">{{ __('From date') }}<span class="visit-date-required text-danger">*</span></label>
                                <input class="form-control" type="date" name="start_date" id="start_date" onchange="daycalculate()">
                            </div>
                            <div class="col-md-6">
                                <label for="end_date">{{ __('To date') }}<span class="visit-date-required text-danger">*</span></label>
                                <input class="form-control" type="date" name="end_date" id="end_date" onchange="daycalculate()">
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label>{{ __('Start time (out)') }}</label>
                                <input class="form-control" type="time" name="start_time_out">
                            </div>
                            <div class="col-md-4">
                                <label>{{ __('Approx end time (in)') }}</label>
                                <input class="form-control" type="time" name="approx_end_time_in">
                            </div>
                            <div class="col-md-4">
                                <label>{{ __('End time (in)') }}</label>
                                <input class="form-control" type="time" name="end_time_in">
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label>{{ __('Location') }}</label>
                                <input class="form-control" type="text" name="location">
                            </div>
                            <div class="col-md-6">
                                <label>{{ __('Remarks') }}</label>
                                <input class="form-control" type="text" name="remarks">
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-12">
                                <label>{{ __('Extra note') }}</label>
                                <textarea class="form-control" name="reason" rows="2"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('Save') }}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="modal fade" id="Attendance_update_modal">
        <form action="{{ route('admin.visit.application.update') }}" method="POST">
            @csrf
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ __('Edit Movement Application') }}</h5>
                        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="id" id="id">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label>{{ __('Employee') }}</label>
                                <select id="staff_id" class="form-control" disabled>
                                    <option value="">{{ __('Select employee') }}</option>
                                    @foreach($staffList as $staff)
                                        <option value="{{ $staff->id }}">{{ $staff->selectOptionLabel() }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label>{{ __('Application date') }}</label>
                                <input class="form-control" type="date" id="application_dates" readonly>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="durations">{{ __('Duration (days)') }}</label>
                                <input class="form-control" type="text" id="durations" value="0" name="duration" readonly>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label>{{ __('Purpose') }}<span class="text-danger">*</span></label>
                                <input class="form-control" type="text" name="purpose" id="purpose_u" required>
                            </div>
                            <div class="col-md-6">
                                <label>{{ __('Movement date') }}</label>
                                <input class="form-control" type="date" name="movement_date" id="movement_date_u">
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label>{{ __('Coming within the day?') }}</label>
                                <div>
                                    <label class="mr-3"><input type="radio" name="coming_within_day" id="coming_yes_u" value="1"> {{ __('Yes') }}</label>
                                    <label><input type="radio" name="coming_within_day" id="coming_no_u" value="0"> {{ __('No') }}</label>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-3 visit-date-range-row">
                            <div class="col-md-6">
                                <label for="start_dates">{{ __('From date') }}<span class="visit-date-required text-danger">*</span></label>
                                <input class="form-control" type="date" name="start_date" id="start_dates" onchange="daycalculates()">
                            </div>
                            <div class="col-md-6">
                                <label for="end_dates">{{ __('To date') }}<span class="visit-date-required text-danger">*</span></label>
                                <input class="form-control" type="date" name="end_date" id="end_dates" onchange="daycalculates()">
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label>{{ __('Start time (out)') }}</label>
                                <input class="form-control" type="time" name="start_time_out" id="start_time_out_u">
                            </div>
                            <div class="col-md-4">
                                <label>{{ __('Approx end time (in)') }}</label>
                                <input class="form-control" type="time" name="approx_end_time_in" id="approx_end_time_in_u">
                            </div>
                            <div class="col-md-4">
                                <label>{{ __('End time (in)') }}</label>
                                <input class="form-control" type="time" name="end_time_in" id="end_time_in_u">
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label>{{ __('Location') }}</label>
                                <input class="form-control" type="text" name="location" id="location_u">
                            </div>
                            <div class="col-md-6">
                                <label>{{ __('Remarks') }}</label>
                                <input class="form-control" type="text" name="remarks" id="remarks_u">
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-12">
                                <label>{{ __('Extra note') }}</label>
                                <textarea class="form-control" name="reason" id="reasons" rows="3"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('Update') }}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="modal fade" id="reconciliation_view">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('Movement Application Details') }}</h5>
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                </div>
                <div class="modal-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label>{{ __('Employee') }}</label>
                            <select id="staff_ids" class="form-control" disabled>
                                <option value="">{{ __('Select employee') }}</option>
                                @foreach($staffList as $staff)
                                    <option value="{{ $staff->id }}">{{ $staff->selectOptionLabel() }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label>{{ __('Application date') }}</label>
                            <input class="form-control" type="date" id="application_datess" readonly>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label>{{ __('Duration (days)') }}</label>
                            <input class="form-control" type="text" id="durationss" readonly>
                        </div>
                        <div class="col-md-6">
                            <label>{{ __('Coming within the day?') }}</label>
                            <input class="form-control" type="text" id="coming_within_view" readonly>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label>{{ __('Purpose') }}</label>
                            <input class="form-control" type="text" id="purpose_ss" readonly>
                        </div>
                        <div class="col-md-6">
                            <label>{{ __('Movement date') }}</label>
                            <input class="form-control" type="date" id="movement_date_ss" readonly>
                        </div>
                    </div>
                    <div class="row mb-3 visit-date-range-row">
                        <div class="col-md-6">
                            <label>{{ __('From date') }}</label>
                            <input class="form-control" type="date" id="start_datess" readonly>
                        </div>
                        <div class="col-md-6">
                            <label>{{ __('To date') }}</label>
                            <input class="form-control" type="date" id="end_datess" readonly>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-4">
                            <label>{{ __('Start time (out)') }}</label>
                            <input class="form-control" type="time" id="start_time_out_ss" readonly>
                        </div>
                        <div class="col-md-4">
                            <label>{{ __('Approx end time (in)') }}</label>
                            <input class="form-control" type="time" id="approx_end_time_in_ss" readonly>
                        </div>
                        <div class="col-md-4">
                            <label>{{ __('End time (in)') }}</label>
                            <input class="form-control" type="time" id="end_time_in_ss" readonly>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label>{{ __('Location') }}</label>
                            <input class="form-control" type="text" id="location_ss" readonly>
                        </div>
                        <div class="col-md-6">
                            <label>{{ __('Remarks') }}</label>
                            <input class="form-control" type="text" id="remarks_ss" readonly>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-12">
                            <label>{{ __('Extra note') }}</label>
                            <textarea class="form-control" id="reasonss" rows="2" readonly></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Close') }}</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        function reconcilition() {
            var form = $('#Attendance_reconcilion form').get(0);
            if (form) {
                form.reset();
            }
            $('#Attendance_reconcilion input[name="coming_within_day"][value="1"]').prop('checked', true);
            $('#Attendance_reconcilion').modal('show');
        }

        function syncVisitDateRangeVisibility($modal) {
            var withinDay = $modal.find('input[name="coming_within_day"][value="1"]').is(':checked');
            var $row = $modal.find('.visit-date-range-row');
            var $start = $modal.find('input[name="start_date"]');
            var $end = $modal.find('input[name="end_date"]');
            var $dur = $modal.find('input[name="duration"]');
            var $reqStars = $modal.find('.visit-date-required');
            if (withinDay) {
                $row.hide();
                $start.prop('required', false).val('');
                $end.prop('required', false).val('');
                $reqStars.hide();
                $dur.val('1');
            } else {
                $row.show();
                $start.prop('required', true);
                $end.prop('required', true);
                $reqStars.show();
                if ($modal.attr('id') === 'Attendance_reconcilion') {
                    daycalculate();
                } else if ($modal.attr('id') === 'Attendance_update_modal') {
                    daycalculates();
                }
            }
        }

        function reconcilition_update(el) {
            var v = $(el).data('visit');
            $('#id').val(v.id);
            $('#application_dates').val(v.application_date);
            $('#start_dates').val(v.start_date || '');
            $('#end_dates').val(v.end_date || '');
            $('#durations').val(v.duration);
            $('#reasons').val(v.reason || '');
            $('#purpose_u').val(v.purpose || '');
            $('#movement_date_u').val(v.movement_date || '');
            $('#start_time_out_u').val(v.start_time_out || '');
            $('#approx_end_time_in_u').val(v.approx_end_time_in || '');
            $('#end_time_in_u').val(v.end_time_in || '');
            $('#location_u').val(v.location || '');
            $('#remarks_u').val(v.remarks || '');
            if (v.coming_within_day === 0 || v.coming_within_day === '0' || v.coming_within_day === false) {
                $('#coming_no_u').prop('checked', true);
            } else {
                $('#coming_yes_u').prop('checked', true);
            }
            $('#staff_id').val(v.staff_id);
            $('#Attendance_update_modal').modal('show');
        }

        function reconcilition_view(el) {
            var v = $(el).data('visit');
            $('#staff_ids').val(v.staff_id);
            $('#application_datess').val(v.application_date);
            $('#durationss').val(v.duration);
            $('#coming_within_view').val((v.coming_within_day === 0 || v.coming_within_day === '0' || v.coming_within_day === false) ? '{{ __('No') }}' : '{{ __('Yes') }}');
            $('#purpose_ss').val(v.purpose || '');
            $('#movement_date_ss').val(v.movement_date || '');
            $('#start_datess').val(v.start_date || '');
            $('#end_datess').val(v.end_date || '');
            var withinDayYes = !(v.coming_within_day === 0 || v.coming_within_day === '0' || v.coming_within_day === false);
            $('#reconciliation_view .visit-date-range-row').toggle(!withinDayYes);
            $('#start_time_out_ss').val(v.start_time_out || '');
            $('#approx_end_time_in_ss').val(v.approx_end_time_in || '');
            $('#end_time_in_ss').val(v.end_time_in || '');
            $('#location_ss').val(v.location || '');
            $('#remarks_ss').val(v.remarks || '');
            $('#reasonss').val(v.reason || '');
            $('#reconciliation_view').modal('show');
        }

        function daycalculate() {
            var start_date = new Date($('#start_date').val());
            var end_date = new Date($('#end_date').val());
            if (!$('#start_date').val() || !$('#end_date').val()) return;
            var timeDifference = end_date - start_date;
            var diffInDays = Math.floor(timeDifference / (1000 * 60 * 60 * 24)) + 1;
            $('#duration').val(diffInDays > 0 ? diffInDays : 0);
        }

        function daycalculates() {
            var start_date = new Date($('#start_dates').val());
            var end_date = new Date($('#end_dates').val());
            if (!$('#start_dates').val() || !$('#end_dates').val()) return;
            var timeDifference = end_date - start_date;
            var diffInDays = Math.floor(timeDifference / (1000 * 60 * 60 * 24)) + 1;
            $('#durations').val(diffInDays > 0 ? diffInDays : 0);
        }

        $('#start_date').on('change', daycalculate);
        $('#start_dates').on('change', daycalculates);

        $('#Attendance_reconcilion, #Attendance_update_modal').on('shown.bs.modal', function () {
            syncVisitDateRangeVisibility($(this));
        });

        $(document).on('change', '#Attendance_reconcilion input[name="coming_within_day"], #Attendance_update_modal input[name="coming_within_day"]', function () {
            syncVisitDateRangeVisibility($(this).closest('.modal'));
        });
    </script>
@endsection