@php use App\Models\User; @endphp
@extends('admin.layouts.app')
@section('title', get_setting('site_name').' | Attendance Reconciliation')
@section('content')
    <style>
        .ar-wrap .card { border-radius: 14px; border: 1px solid #edf0f6; box-shadow: 0 0.125rem 0.5rem rgba(15, 23, 42, 0.04); }
        .ar-wrap .card-header { background: #fff; border-bottom: 1px solid #edf0f6; font-weight: 700; }
        .ar-wrap label { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: rgba(15,23,42,.55); }
        .ar-filters { background: #f8fafc; border-bottom: 1px solid #edf0f6; padding: 14px 16px; }
        .ar-filters .form-group { margin-bottom: 10px; }
        @media (min-width: 992px) { .ar-filters .form-group { margin-bottom: 0; } }
        .ar-filters .select2-container { width: 100% !important; }
        .ar-filters .select2-selection__rendered { line-height: 31px !important; }
        .ar-filters .select2-container .select2-selection--single { height: 38px !important; }
        .ar-filters .select2-selection__arrow { height: 36px !important; }
        .ar-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: rgba(15,23,42,.65); border-top: 0; white-space: nowrap; }
        .ar-table tbody td { vertical-align: middle; }
        .ar-staff-cell { font-weight: 600; max-width: 260px; }
        .ar-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; }
        .ar-badge.approved { background: rgba(34,197,94,.12); color: #166534; }
        .ar-badge.pending { background: rgba(245,158,11,.12); color: #b45309; }
        .ar-action-btns { display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
        .ar-modal .modal-content { border: none; border-radius: 12px; box-shadow: 0 0.5rem 2rem rgba(15, 23, 42, 0.15); }
        .ar-modal .modal-header { border-bottom: 1px solid #edf0f6; }
        .ar-modal .modal-footer { border-top: 1px solid #edf0f6; }
        .ar-modal-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(15,23,42,.55); margin-bottom: 6px; }
        .ar-modal-section { background: #f8fafc; border: 1px solid #edf0f6; border-radius: 10px; padding: 14px; margin-bottom: 14px; }
        .ar-modal-section-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: rgba(15,23,42,.55); margin-bottom: 10px; }
        .ar-modal .select2-container { width: 100% !important; }
        .ar-modal .select2-selection__rendered { line-height: 31px !important; }
        .ar-modal .select2-container .select2-selection--single { height: 38px !important; }
        .ar-modal .select2-selection__arrow { height: 36px !important; }
        .ar-time-cell { font-variant-numeric: tabular-nums; white-space: nowrap; }
        .ar-remarks-cell { max-width: 180px; white-space: normal; word-break: break-word; font-size: 13px; }
    </style>

    <div class="container-fluid ar-wrap">
        <div class="row mt-3">
            <div class="col-12 d-flex flex-wrap justify-content-between align-items-center mb-3">
                <div>
                    <h4 class="page-title mb-0">Attendance Reconciliation</h4>
                    <p class="text-muted mb-0">Review, approve, and manage attendance correction requests.</p>
                </div>
                <button type="button" class="btn btn-primary" onclick="reconcilition()">
                    <i class="mdi mdi-plus"></i> Add New
                </button>
            </div>

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

            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                        <span>Filters</span>
                        <a href="{{ route('admin.attendance.reconciliation') }}" class="btn btn-sm btn-outline-secondary">Clear Filters</a>
                    </div>
                    <form action="" method="get">
                        <div class="ar-filters">
                            <div class="form-row align-items-end">
                                <div class="form-group col-md-6 col-lg-3">
                                    <label>Staff Information</label>
                                    <select name="staff_id" class="select2 form-control" id="ar_filter_staff" data-placeholder="All Employees">
                                        <option value="">All Employees</option>
                                        @foreach($staffList as $staff)
                                            @if($staff->user?->is_active)
                                                <option value="{{ $staff->id }}" @selected(request()->staff_id == $staff->id)>
                                                    {{ $staff->user?->name ?? 'Staff #'.$staff->id }}({{ $staff->user_id }})-{{ $staff->designation?->name ?? 'No Designation' }}
                                                </option>
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group col-md-6 col-lg-2">
                                    <label>Approval Status</label>
                                    <select class="form-control" name="status">
                                        <option value="">All Status</option>
                                        <option value="1" @selected(request()->status === '1' || request()->status === 1)>Approved</option>
                                        <option value="0" @selected(request()->status === '0' || request()->status === 0)>Pending</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-6 col-lg-2">
                                    <label>Start Date</label>
                                    <input type="date" class="form-control" name="start_date" value="{{ request()->start_date }}">
                                </div>
                                <div class="form-group col-md-6 col-lg-2">
                                    <label>End Date</label>
                                    <input type="date" class="form-control" name="end_date" value="{{ request()->end_date }}">
                                </div>
                                <div class="form-group col-md-6 col-lg-2">
                                    <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 table-responsive p-0">
                        <table class="table table-hover mb-0 ar-table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Employee</th>
                                    <th>Attendance Date</th>
                                    <th>In Time</th>
                                    <th>Out Time</th>
                                    <th>In Remarks</th>
                                    <th>Out Remarks</th>
                                    <th>Apply Date</th>
                                    <th>Status</th>
                                    <th class="text-right">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($reconciliations as $key => $reconciliation)
                                    <tr>
                                        <td>{{ $reconciliations->firstItem() + $key }}</td>
                                        <td class="ar-staff-cell">
                                            {{ $reconciliation->staff?->user?->name ?? '—' }}
                                            <br>
                                            <small class="text-muted">
                                                ID: {{ $reconciliation->staff?->user_id ?? '—' }}
                                                · {{ $reconciliation->staff?->designation?->name ?? 'No Designation' }}
                                            </small>
                                        </td>
                                        <td>{{ $reconciliation->attendance_date }}</td>
                                        <td class="ar-time-cell">{{ $reconciliation->signIn != null ? date('h:i A', strtotime($reconciliation->signIn)) : '—' }}</td>
                                        <td class="ar-time-cell">{{ $reconciliation->signOut != null ? date('h:i A', strtotime($reconciliation->signOut)) : '—' }}</td>
                                        <td class="ar-remarks-cell">{{ $reconciliation->in_remarks ?: '—' }}</td>
                                        <td class="ar-remarks-cell">{{ $reconciliation->out_remarks ?: '—' }}</td>
                                        <td>{{ $reconciliation->application_date }}</td>
                                        <td>
                                            @if($reconciliation->status == 1)
                                                <span class="ar-badge approved" title="Approved by {{ User::where('id', $reconciliation->approved_by)->value('name') }}">
                                                    Approved
                                                </span>
                                            @else
                                                <span class="ar-badge pending">Pending</span>
                                            @endif
                                        </td>
                                        <td class="text-right">
                                            <div class="ar-action-btns">
                                                <a href="javascript:void(0)" class="btn btn-light btn-sm"
                                                   onclick="reconcilition_view({{ $reconciliation->id }}, '{{ $reconciliation->attendance_date }}', '{{ $reconciliation->signIn }}', '{{ $reconciliation->signOut }}', '{{ addslashes($reconciliation->in_remarks) }}', '{{ addslashes($reconciliation->out_remarks) }}', '{{ $reconciliation->staff_id }}')"
                                                   title="View"><i class="fas fa-eye"></i></a>
                                                @if($reconciliation->status == 0)
                                                    <a href="javascript:void(0)" class="btn btn-info btn-sm"
                                                       onclick="reconcilition_update({{ $reconciliation->id }}, '{{ $reconciliation->attendance_date }}', '{{ $reconciliation->signIn }}', '{{ $reconciliation->signOut }}', '{{ addslashes($reconciliation->in_remarks) }}', '{{ addslashes($reconciliation->out_remarks) }}', '{{ $reconciliation->staff_id }}')"
                                                       title="Edit"><i class="fas fa-edit"></i></a>
                                                    <a href="javascript:void(0)"
                                                       data-href="{{ route('attendance.reconciliation.destroy', $reconciliation->id) }}"
                                                       class="btn btn-danger btn-sm delete_modal" title="Delete"><i class="fas fa-trash"></i></a>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="10" class="text-center text-muted py-4">No records found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

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

@section('modal')
    <div class="modal fade ar-modal" id="Attendance_reconcilion">
        <form action="{{ route('admin.attendance.reconciliation.store') }}" method="POST">
            @csrf
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ __('Attendance Reconciliation') }}</h5>
                        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <div class="ar-modal-section">
                            <div class="ar-modal-section-title">Staff &amp; Date</div>
                            <div class="form-row">
                                <div class="form-group col-md-6 mb-md-0">
                                    <label class="ar-modal-label">Staff Information</label>
                                    <select name="staff_id" id="ar_add_staff" class="select2 form-control" required>
                                        <option value="">Please Select Staff</option>
                                        @foreach($staffList as $staff)
                                            @if($staff->user?->is_active)
                                                <option value="{{ $staff->id }}">
                                                    {{ $staff->user?->name ?? 'Staff #'.$staff->id }}({{ $staff->user_id }})
                                                </option>
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group col-md-6 mb-0">
                                    <label class="ar-modal-label">Attendance Date</label>
                                    <input class="form-control" type="date" name="attendance_date" required>
                                </div>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label class="ar-modal-label">In Time Reconciliation</label>
                                <input class="form-control" type="time" name="signIn">
                                <label class="ar-modal-label mt-3">In Time Remarks</label>
                                <textarea class="form-control" name="in_remarks" rows="3" placeholder="Reason for in-time correction"></textarea>
                            </div>
                            <div class="form-group col-md-6">
                                <label class="ar-modal-label">Out Time Reconciliation</label>
                                <input class="form-control" type="time" name="signOut">
                                <label class="ar-modal-label mt-3">Out Time Remarks</label>
                                <textarea class="form-control" name="out_remarks" rows="3" placeholder="Reason for out-time correction"></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 ar-modal" id="Attendance_update_modal">
        <form action="{{ route('admin.attendance.reconciliation.update') }}" method="POST">
            @csrf
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ __('Attendance Reconciliation Update') }}</h5>
                        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <div class="ar-modal-section">
                            <div class="ar-modal-section-title">Staff &amp; Date</div>
                            <div class="form-row">
                                <div class="form-group col-md-6 mb-md-0">
                                    <label class="ar-modal-label">Staff Information</label>
                                    <input type="hidden" name="staff_id" id="staff_id">
                                    <select id="staff_id_display" class="form-control bg-light" disabled tabindex="-1">
                                        <option value="">Please Select Staff</option>
                                        @foreach($staffList as $staff)
                                            <option value="{{ $staff->id }}">
                                                {{ $staff->user?->name ?? 'Staff #'.$staff->id }}({{ $staff->user_id }})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group col-md-6 mb-0">
                                    <label class="ar-modal-label">Attendance Date</label>
                                    <input class="form-control" type="date" id="date" name="attendance_date">
                                    <input type="hidden" name="id" id="id">
                                </div>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label class="ar-modal-label">In Time Reconciliation</label>
                                <input class="form-control" type="time" name="signIn" id="signin">
                                <label class="ar-modal-label mt-3">In Time Remarks</label>
                                <textarea class="form-control" name="in_remarks" id="in_remarks" rows="3"></textarea>
                            </div>
                            <div class="form-group col-md-6">
                                <label class="ar-modal-label">Out Time Reconciliation</label>
                                <input class="form-control" type="time" name="signOut" id="signout">
                                <label class="ar-modal-label mt-3">Out Time Remarks</label>
                                <textarea class="form-control" name="out_remarks" id="out_remarks" 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 ar-modal" id="reconciliation_view">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('Attendance Reconciliation') }}</h5>
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                </div>
                <div class="modal-body">
                    <div class="ar-modal-section">
                        <div class="ar-modal-section-title">Staff &amp; Date</div>
                        <div class="form-row">
                            <div class="form-group col-md-6 mb-md-0">
                                <label class="ar-modal-label">Staff Information</label>
                                <select id="staff_ids" class="form-control bg-light" disabled>
                                    <option value="">Please Select Staff</option>
                                    @foreach($staffList as $staff)
                                        <option value="{{ $staff->id }}">
                                            {{ $staff->user?->name ?? 'Staff #'.$staff->id }}({{ $staff->user_id }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-md-6 mb-0">
                                <label class="ar-modal-label">Attendance Date</label>
                                <input class="form-control bg-light" type="date" id="dates" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label class="ar-modal-label">In Time Reconciliation</label>
                            <input class="form-control bg-light" type="time" id="signins" readonly>
                            <label class="ar-modal-label mt-3">In Time Remarks</label>
                            <textarea class="form-control bg-light" id="in_remarkss" rows="3" readonly></textarea>
                        </div>
                        <div class="form-group col-md-6">
                            <label class="ar-modal-label">Out Time Reconciliation</label>
                            <input class="form-control bg-light" type="time" id="signouts" readonly>
                            <label class="ar-modal-label mt-3">Out Time Remarks</label>
                            <textarea class="form-control bg-light" id="out_remarkss" rows="3" readonly></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    @can('Attendance-Approve')
                        <form action="{{ route('attendance.reconciliation.approve') }}" method="POST" class="mr-auto">
                            @csrf
                            <input type="hidden" name="reconciliation_id" id="reconcilaition_id">
                            <button type="submit" class="btn btn-success">{{ __('Approve') }}</button>
                        </form>
                    @endcan
                    <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Close') }}</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        function arInitSelect2() {
            var $filter = $('#ar_filter_staff');
            if ($filter.length && !$filter.hasClass('select2-hidden-accessible')) {
                $filter.select2({ width: '100%', placeholder: $filter.data('placeholder') || 'All Employees' });
            }

            var $addStaff = $('#ar_add_staff');
            if ($addStaff.length) {
                if ($addStaff.hasClass('select2-hidden-accessible')) {
                    $addStaff.select2('destroy');
                }
                $addStaff.select2({
                    width: '100%',
                    placeholder: 'Please Select Staff',
                    dropdownParent: $('#Attendance_reconcilion')
                });
            }
        }

        $(document).ready(function () {
            arInitSelect2();
        });

        function reconcilition() {
            $('#Attendance_reconcilion').modal('show');
            setTimeout(arInitSelect2, 150);
        }

        function reconcilition_update(id, date, signin, signout, in_remarks, out_remarks, staff_id) {
            $('#signin').val(signin);
            $('#id').val(id);
            $('#signout').val(signout);
            $('#in_remarks').val(in_remarks);
            $('#out_remarks').val(out_remarks);
            $('#date').val(date);
            $('#staff_id').val(staff_id);
            $('#staff_id_display').val(staff_id);
            $('#Attendance_update_modal').modal('show');
        }

        function reconcilition_view(id, date, signin, signout, in_remarks, out_remarks, staff_id) {
            $('#signins').val(signin);
            $('#signouts').val(signout);
            $('#in_remarkss').val(in_remarks);
            $('#out_remarkss').val(out_remarks);
            $('#staff_ids').val(staff_id);
            $('#dates').val(date);
            $('#reconcilaition_id').val(id);
            $('#reconciliation_view').modal('show');
        }
    </script>
@endsection