@extends('employee.layouts.app')
@section('title', get_setting('site_name').' | '.__('Movement Application'))
@section('content')
    <style>
        .emp-visit-wrap .card {
            border-radius: 14px;
            border: 1px solid #edf0f6;
            box-shadow: 0 0.125rem 0.5rem rgba(15, 23, 42, 0.04);
        }
        .emp-visit-wrap .card-header {
            background: #fff;
            border-bottom: 1px solid #edf0f6;
            font-weight: 700;
            padding: 0.9rem 1.15rem;
        }
        .emp-visit-wrap .card-body.p-2 { padding: 0.5rem !important; }
        .emp-visit-wrap .card-footer {
            background: #fff;
            border-top: 1px solid #edf0f6;
            padding: 0.75rem 1.15rem;
        }
        .emp-visit-filters {
            background: #f8fafc;
            border-bottom: 1px solid #edf0f6;
            padding: 14px 16px;
        }
        .emp-visit-filters label {
            font-weight: 700;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: rgba(15, 23, 42, .55);
            margin-bottom: 6px;
        }
        .emp-visit-filters .form-group { margin-bottom: 10px; }
        @media (min-width: 992px) { .emp-visit-filters .form-group { margin-bottom: 0; } }
        .emp-visit-stat {
            background: #fff;
            border: 1px solid #edf0f6;
            border-radius: 10px;
            padding: 10px 14px;
            text-align: center;
            height: 100%;
        }
        .emp-visit-stat .num { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
        .emp-visit-stat .lbl {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: #64748b;
        }
        .emp-visit-table { margin-bottom: 0; font-size: 13px; }
        .emp-visit-table thead th {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: rgba(15, 23, 42, .65);
            border-top: 0;
            white-space: nowrap;
            padding: 0.75rem 0.85rem;
        }
        .emp-visit-table tbody td {
            vertical-align: middle;
            padding: 0.85rem;
        }
        .emp-visit-table .emp-visit-empty {
            padding: 2rem 1rem !important;
            text-align: center;
            color: #64748b;
        }
        .emp-visit-text {
            max-width: 140px;
            white-space: normal;
            word-break: break-word;
            font-size: 13px;
        }
        .emp-visit-badge {
            display: inline-flex;
            align-items: center;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
            white-space: nowrap;
        }
        .emp-visit-badge.pending { background: rgba(245, 158, 11, .14); color: #b45309; }
        .emp-visit-badge.approved { background: rgba(14, 165, 233, .12); color: #0369a1; }
        .emp-visit-badge.closed { background: rgba(34, 197, 94, .12); color: #166534; }
        .emp-visit-actions { display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
        .emp-visit-modal .modal-content {
            border: none;
            border-radius: 12px;
            box-shadow: 0 0.5rem 2rem rgba(15, 23, 42, 0.15);
        }
        .emp-visit-modal .modal-header,
        .emp-visit-modal .modal-footer { border-color: #edf0f6; }
        .emp-visit-label {
            display: block;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: rgba(15, 23, 42, .55);
            margin-bottom: 6px;
        }
        .emp-visit-modal-section {
            background: #f8fafc;
            border: 1px solid #edf0f6;
            border-radius: 10px;
            padding: 1rem;
            margin-bottom: 1rem;
        }
        .emp-visit-modal-section-title {
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .08em;
            color: rgba(15, 23, 42, .55);
            margin-bottom: 0.75rem;
        }
    </style>

    <div class="container-fluid emp-visit-wrap">
        <div class="row mt-3">
            <div class="col-12 col-xl-11 mx-auto">

                <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
                    <div>
                        <h4 class="page-title mb-0">{{ __('Movement application') }}</h4>
                        <p class="text-muted mb-0 small">{{ __('Apply for official movement and track approval status.') }}</p>
                    </div>
                    <button type="button" class="btn btn-primary" onclick="reconcilition()">
                        <i class="fas fa-plus mr-1"></i> {{ __('New application') }}
                    </button>
                </div>

                @if (session()->has('message'))
                    <div class="alert alert-success">{{ session('message') }}</div>
                @endif
                @if (session()->has('error'))
                    <div class="alert alert-danger">{{ session('error') }}</div>
                @endif

                <div class="form-row mb-3">
                    <div class="col-6 col-md-3 mb-2">
                        <div class="emp-visit-stat">
                            <div class="num text-primary">{{ (int) ($visitStats->total ?? 0) }}</div>
                            <div class="lbl">{{ __('Total') }}</div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3 mb-2">
                        <div class="emp-visit-stat">
                            <div class="num text-warning">{{ (int) ($visitStats->pending ?? 0) }}</div>
                            <div class="lbl">{{ __('Pending') }}</div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3 mb-2">
                        <div class="emp-visit-stat">
                            <div class="num text-info">{{ (int) ($visitStats->approved ?? 0) }}</div>
                            <div class="lbl">{{ __('Approved') }}</div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3 mb-2">
                        <div class="emp-visit-stat">
                            <div class="num text-success">{{ (int) ($visitStats->closed ?? 0) }}</div>
                            <div class="lbl">{{ __('Closed') }}</div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                        <span><i class="fas fa-walking mr-1 text-muted"></i> {{ __('My applications') }}</span>
                        @if($hasFilters ?? false)
                            <a href="{{ route('visit.application') }}" class="btn btn-sm btn-outline-secondary">{{ __('Clear filters') }}</a>
                        @endif
                    </div>

                    <form method="get">
                        <div class="emp-visit-filters">
                            <div class="form-row align-items-end">
                                <div class="form-group col-6 col-md-4 col-lg-3">
                                    <label for="filter_start_date">{{ __('Start date') }}</label>
                                    <input type="date" class="form-control" id="filter_start_date" name="start_date" value="{{ request('start_date') }}">
                                </div>
                                <div class="form-group col-6 col-md-4 col-lg-3">
                                    <label for="filter_end_date">{{ __('End date') }}</label>
                                    <input type="date" class="form-control" id="filter_end_date" name="end_date" value="{{ request('end_date') }}">
                                </div>
                                <div class="form-group col-12 col-md-4 col-lg-2 mb-0">
                                    <label class="d-none d-lg-block">&nbsp;</label>
                                    <button type="submit" class="btn btn-primary btn-block">
                                        <i class="fas fa-filter"></i> {{ __('Filter') }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>

                    <div class="card-body p-2">
                        <div class="table-responsive">
                            <table class="table table-hover emp-visit-table">
                                <thead class="thead-light">
                                <tr>
                                    <th>#</th>
                                    <th>{{ __('Apply date') }}</th>
                                    <th>{{ __('Movement date') }}</th>
                                    <th>{{ __('Purpose') }}</th>
                                    <th>{{ __('From / To') }}</th>
                                    <th>{{ __('Duration') }}</th>
                                    <th>{{ __('Location') }}</th>
                                    <th>{{ __('Remarks') }}</th>
                                    <th class="text-center">{{ __('Status') }}</th>
                                    <th class="text-right">{{ __('Action') }}</th>
                                </tr>
                                </thead>
                                <tbody>
                                @forelse($visits as $visit)
                                    <tr>
                                        <td class="text-muted font-weight-bold">{{ $visits->firstItem() + $loop->index }}</td>
                                        <td style="font-variant-numeric: tabular-nums;">{{ $visit->application_date }}</td>
                                        <td style="font-variant-numeric: tabular-nums;">{{ $visit->movement_date ?? '—' }}</td>
                                        <td class="emp-visit-text"><strong>{{ $visit->purpose ?? '—' }}</strong></td>
                                        <td class="small" style="font-variant-numeric: tabular-nums;">
                                            @if($visit->start_date || $visit->end_date)
                                                {{ $visit->start_date ?? '—' }}<br>{{ $visit->end_date ?? '—' }}
                                            @else
                                                —
                                            @endif
                                        </td>
                                        <td>{{ $visit->duration }}</td>
                                        <td class="emp-visit-text">{{ $visit->location ?? '—' }}</td>
                                        <td class="emp-visit-text">{{ $visit->remarks ?? ($visit->reason ?? '—') }}</td>
                                        <td class="text-center">
                                            @if($visit->status == 1 && $visit->is_closed == 1)
                                                <span class="emp-visit-badge closed">{{ __('Closed') }}</span>
                                            @elseif($visit->status == 1)
                                                <span class="emp-visit-badge approved">{{ __('Approved') }}</span>
                                            @else
                                                <span class="emp-visit-badge pending">{{ __('Pending') }}</span>
                                            @endif
                                        </td>
                                        <td class="text-right emp-visit-actions">
                                            @if($visit->status == 0)
                                                <button type="button" class="btn btn-sm btn-light"
                                                        data-visit='@json($visit)'
                                                        onclick="reconcilition_update(this)"
                                                        title="{{ __('Edit') }}">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                            @endif
                                            <button type="button" class="btn btn-sm btn-primary"
                                                    data-visit='@json($visit)'
                                                    onclick="reconcilition_view(this)"
                                                    title="{{ __('View') }}">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                            @if($visit->status == 1 && $visit->is_closed == 0)
                                                <button type="button" class="btn btn-sm btn-success"
                                                        data-visit='@json($visit)'
                                                        onclick="visit_close(this)">
                                                    {{ __('Close') }}
                                                </button>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="10" class="emp-visit-empty">
                                            @if($hasFilters ?? false)
                                                {{ __('No applications match your filters.') }}
                                            @else
                                                {{ __('No movement applications yet.') }}
                                            @endif
                                        </td>
                                    </tr>
                                @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

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

            </div>
        </div>
    </div>
@endsection

@section('modal')
    <div class="modal fade emp-visit-modal" id="Attendance_reconcilion">
        <form action="{{ route('visit.application.store') }}" method="POST">
            @csrf
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title font-weight-bold">{{ __('New movement application') }}</h5>
                        <button type="button" class="close" data-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="emp-visit-modal-section">
                            <div class="emp-visit-modal-section-title">{{ __('Application info') }}</div>
                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <label class="emp-visit-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 class="col-md-6 form-group mb-md-0">
                                    <label class="emp-visit-label">{{ __('Duration (days)') }}</label>
                                    <input class="form-control" type="text" id="duration" value="0" name="duration" readonly>
                                </div>
                            </div>
                        </div>
                        <div class="emp-visit-modal-section">
                            <div class="emp-visit-modal-section-title">{{ __('Movement details') }}</div>
                            <div class="row mb-3">
                                <div class="col-md-6 form-group">
                                    <label class="emp-visit-label">{{ __('Purpose') }} <span class="text-danger">*</span></label>
                                    <input class="form-control" type="text" name="purpose" required>
                                </div>
                                <div class="col-md-6 form-group">
                                    <label class="emp-visit-label">{{ __('Movement date') }}</label>
                                    <input class="form-control" type="date" name="movement_date">
                                </div>
                            </div>
                            <div class="form-group mb-3">
                                <label class="emp-visit-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 class="row visit-date-range-row mb-3" style="display: none;">
                                <div class="col-md-6 form-group">
                                    <label class="emp-visit-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 form-group">
                                    <label class="emp-visit-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 form-group">
                                    <label class="emp-visit-label">{{ __('Start time (out)') }}</label>
                                    <input class="form-control" type="time" name="start_time_out">
                                </div>
                                <div class="col-md-4 form-group">
                                    <label class="emp-visit-label">{{ __('Approx end time (in)') }}</label>
                                    <input class="form-control" type="time" name="approx_end_time_in">
                                </div>
                                <div class="col-md-4 form-group">
                                    <label class="emp-visit-label">{{ __('End time (in)') }}</label>
                                    <input class="form-control" type="time" name="end_time_in">
                                </div>
                            </div>
                            <div class="row mb-0">
                                <div class="col-md-6 form-group">
                                    <label class="emp-visit-label">{{ __('Location') }}</label>
                                    <input class="form-control" type="text" name="location">
                                </div>
                                <div class="col-md-6 form-group mb-md-0">
                                    <label class="emp-visit-label">{{ __('Remarks') }}</label>
                                    <input class="form-control" type="text" name="remarks">
                                </div>
                            </div>
                        </div>
                        <div class="form-group mb-0">
                            <label class="emp-visit-label">{{ __('Extra note') }}</label>
                            <textarea class="form-control" name="reason" rows="2"></textarea>
                        </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"><i class="fas fa-paper-plane mr-1"></i> {{ __('Submit') }}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="modal fade emp-visit-modal" id="Attendance_update_modal">
        <form action="{{ route('visit.application.update') }}" method="POST">
            @csrf
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title font-weight-bold">{{ __('Update movement application') }}</h5>
                        <button type="button" class="close" data-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="id" id="id">
                        <div class="emp-visit-modal-section">
                            <div class="emp-visit-modal-section-title">{{ __('Application info') }}</div>
                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <label class="emp-visit-label" for="application_dates">{{ __('Application date') }} <span class="text-danger">*</span></label>
                                    <input class="form-control" type="date" id="application_dates" value="{{ date('Y-m-d') }}" name="application_date" readonly>
                                </div>
                                <div class="col-md-6 form-group mb-md-0">
                                    <label class="emp-visit-label" for="durations">{{ __('Duration (days)') }}</label>
                                    <input class="form-control" type="text" id="durations" value="0" name="duration" readonly>
                                </div>
                            </div>
                        </div>
                        <div class="emp-visit-modal-section">
                            <div class="emp-visit-modal-section-title">{{ __('Movement details') }}</div>
                            <div class="row mb-3">
                                <div class="col-md-6 form-group">
                                    <label class="emp-visit-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 form-group">
                                    <label class="emp-visit-label">{{ __('Movement date') }}</label>
                                    <input class="form-control" type="date" name="movement_date" id="movement_date_u">
                                </div>
                            </div>
                            <div class="form-group mb-3">
                                <label class="emp-visit-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 class="row visit-date-range-row mb-3">
                                <div class="col-md-6 form-group">
                                    <label class="emp-visit-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 form-group">
                                    <label class="emp-visit-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 form-group">
                                    <label class="emp-visit-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 form-group">
                                    <label class="emp-visit-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 form-group">
                                    <label class="emp-visit-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-0">
                                <div class="col-md-6 form-group">
                                    <label class="emp-visit-label">{{ __('Location') }}</label>
                                    <input class="form-control" type="text" name="location" id="location_u">
                                </div>
                                <div class="col-md-6 form-group mb-md-0">
                                    <label class="emp-visit-label">{{ __('Remarks') }}</label>
                                    <input class="form-control" type="text" name="remarks" id="remarks_u">
                                </div>
                            </div>
                        </div>
                        <div class="form-group mb-0">
                            <label class="emp-visit-label" for="reasons">{{ __('Extra note') }}</label>
                            <textarea class="form-control" name="reason" id="reasons" rows="3"></textarea>
                        </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 emp-visit-modal" id="reconciliation_view">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title font-weight-bold">{{ __('Movement application') }}</h5>
                    <button type="button" class="close" data-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="emp-visit-modal-section">
                        <div class="row mb-3">
                            <div class="col-md-6 form-group">
                                <label class="emp-visit-label">{{ __('Application date') }}</label>
                                <input class="form-control" type="date" id="application_datess" readonly>
                            </div>
                            <div class="col-md-6 form-group">
                                <label class="emp-visit-label">{{ __('Duration (days)') }}</label>
                                <input class="form-control" type="text" id="durationss" readonly>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6 form-group mb-md-0">
                                <label class="emp-visit-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 form-group">
                                <label class="emp-visit-label">{{ __('Purpose') }}</label>
                                <input class="form-control" type="text" id="purpose_ss" readonly>
                            </div>
                            <div class="col-md-6 form-group">
                                <label class="emp-visit-label">{{ __('Movement date') }}</label>
                                <input class="form-control" type="date" id="movement_date_ss" readonly>
                            </div>
                        </div>
                        <div class="row visit-date-range-row mb-3">
                            <div class="col-md-6 form-group">
                                <label class="emp-visit-label">{{ __('From date') }}</label>
                                <input class="form-control" type="date" id="start_datess" readonly>
                            </div>
                            <div class="col-md-6 form-group">
                                <label class="emp-visit-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 form-group">
                                <label class="emp-visit-label">{{ __('Start time (out)') }}</label>
                                <input class="form-control" type="time" id="start_time_out_ss" readonly>
                            </div>
                            <div class="col-md-4 form-group">
                                <label class="emp-visit-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 form-group">
                                <label class="emp-visit-label">{{ __('End time (in)') }}</label>
                                <input class="form-control" type="time" id="end_time_in_ss" readonly>
                            </div>
                        </div>
                        <div class="row mb-0">
                            <div class="col-md-6 form-group">
                                <label class="emp-visit-label">{{ __('Location') }}</label>
                                <input class="form-control" type="text" id="location_ss" readonly>
                            </div>
                            <div class="col-md-6 form-group mb-md-0">
                                <label class="emp-visit-label">{{ __('Remarks') }}</label>
                                <input class="form-control" type="text" id="remarks_ss" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="form-group mb-0">
                        <label class="emp-visit-label">{{ __('Extra note') }}</label>
                        <textarea class="form-control" id="reasonss" rows="2" readonly></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Close') }}</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade emp-visit-modal" id="visit_close_modal">
        <form action="{{ route('visit.application.close') }}" method="POST">
            @csrf
            <div class="modal-dialog modal-md">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title font-weight-bold">{{ __('Close movement application') }}</h5>
                        <button type="button" class="close" data-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="id" id="close_visit_id">
                        <div class="form-group">
                            <label class="emp-visit-label">{{ __('Return time (end time in)') }} <span class="text-danger">*</span></label>
                            <input type="time" class="form-control" name="end_time_in" id="close_end_time_in" required>
                        </div>
                        <div class="form-group mb-0">
                            <label class="emp-visit-label">{{ __('Remarks') }} <span class="text-muted font-weight-normal">({{ __('optional') }})</span></label>
                            <input type="text" class="form-control" name="remarks" id="close_remarks">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-success">{{ __('Close') }}</button>
                    </div>
                </div>
            </div>
        </form>
    </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);
            }
            $('#Attendance_update_modal').modal('show');
        }

        function reconcilition_view(el) {
            var v = $(el).data('visit');
            $('#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'));
        });

        function visit_close(el) {
            var v = $(el).data('visit');
            $('#close_visit_id').val(v.id);
            $('#close_end_time_in').val(v.end_time_in || '');
            $('#close_remarks').val(v.remarks || '');
            $('#visit_close_modal').modal('show');
        }
    </script>
@endsection