@extends('employee.layouts.app')
@section('title', get_setting('site_name').' | '.__('Attendance Reconciliation'))
@section('content')
    <style>
        .emp-recon-wrap .card {
            border-radius: 14px;
            border: 1px solid #edf0f6;
            box-shadow: 0 0.125rem 0.5rem rgba(15, 23, 42, 0.04);
        }
        .emp-recon-wrap .card-header {
            background: #fff;
            border-bottom: 1px solid #edf0f6;
            font-weight: 700;
            padding: 0.9rem 1.15rem;
        }
        .emp-recon-wrap .card-body.p-2 { padding: 0.5rem !important; }
        .emp-recon-wrap .card-footer {
            background: #fff;
            border-top: 1px solid #edf0f6;
            padding: 0.75rem 1.15rem;
        }
        .emp-recon-filters {
            background: #f8fafc;
            border-bottom: 1px solid #edf0f6;
            padding: 14px 16px;
        }
        .emp-recon-filters label {
            font-weight: 700;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: rgba(15, 23, 42, .55);
            margin-bottom: 6px;
        }
        .emp-recon-filters .form-group { margin-bottom: 10px; }
        @media (min-width: 992px) { .emp-recon-filters .form-group { margin-bottom: 0; } }
        .emp-recon-stat {
            background: #fff;
            border: 1px solid #edf0f6;
            border-radius: 10px;
            padding: 10px 14px;
            text-align: center;
            height: 100%;
        }
        .emp-recon-stat .num { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
        .emp-recon-stat .lbl {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: #64748b;
        }
        .emp-recon-table { margin-bottom: 0; font-size: 13px; }
        .emp-recon-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-recon-table tbody td {
            vertical-align: middle;
            padding: 0.85rem;
        }
        .emp-recon-table .emp-recon-empty {
            padding: 2rem 1rem !important;
            text-align: center;
            color: #64748b;
        }
        .emp-recon-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
        .emp-recon-remarks {
            max-width: 160px;
            white-space: normal;
            word-break: break-word;
            font-size: 13px;
            color: #475569;
        }
        .emp-recon-badge {
            display: inline-flex;
            align-items: center;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
        }
        .emp-recon-badge.approved { background: rgba(34, 197, 94, .12); color: #166534; }
        .emp-recon-badge.pending { background: rgba(245, 158, 11, .14); color: #b45309; }
        .emp-recon-actions { display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
        .emp-recon-modal .modal-content {
            border: none;
            border-radius: 12px;
            box-shadow: 0 0.5rem 2rem rgba(15, 23, 42, 0.15);
        }
        .emp-recon-modal .modal-header,
        .emp-recon-modal .modal-footer { border-color: #edf0f6; }
        .emp-recon-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-recon-modal-section {
            background: #f8fafc;
            border: 1px solid #edf0f6;
            border-radius: 10px;
            padding: 1rem;
            margin-bottom: 1rem;
        }
        .emp-recon-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-recon-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">{{ __('Attendance reconciliation') }}</h4>
                        <p class="text-muted mb-0 small">{{ __('Request corrections to your attendance in/out times.') }}</p>
                    </div>
                    <button type="button" class="btn btn-primary" onclick="reconcilition()">
                        <i class="fas fa-plus mr-1"></i> {{ __('New request') }}
                    </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-4 mb-2">
                        <div class="emp-recon-stat">
                            <div class="num text-primary">{{ (int) ($reconStats->total ?? 0) }}</div>
                            <div class="lbl">{{ __('Total') }}</div>
                        </div>
                    </div>
                    <div class="col-6 col-md-4 mb-2">
                        <div class="emp-recon-stat">
                            <div class="num text-warning">{{ (int) ($reconStats->pending ?? 0) }}</div>
                            <div class="lbl">{{ __('Pending') }}</div>
                        </div>
                    </div>
                    <div class="col-12 col-md-4 mb-2">
                        <div class="emp-recon-stat">
                            <div class="num text-success">{{ (int) ($reconStats->approved ?? 0) }}</div>
                            <div class="lbl">{{ __('Approved') }}</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-user-clock mr-1 text-muted"></i> {{ __('My reconciliation requests') }}</span>
                        @if($hasFilters ?? false)
                            <a href="{{ route('attendance.reconciliation') }}" class="btn btn-sm btn-outline-secondary">{{ __('Clear filters') }}</a>
                        @endif
                    </div>

                    <form method="get">
                        <div class="emp-recon-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-recon-table">
                                <thead class="thead-light">
                                <tr>
                                    <th>#</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 class="text-center">{{ __('Status') }}</th>
                                    <th class="text-right">{{ __('Action') }}</th>
                                </tr>
                                </thead>
                                <tbody>
                                @forelse($reconciliations as $reconciliation)
                                    <tr>
                                        <td class="text-muted font-weight-bold">{{ $reconciliations->firstItem() + $loop->index }}</td>
                                        <td class="font-weight-bold" style="font-variant-numeric: tabular-nums;">{{ $reconciliation->attendance_date }}</td>
                                        <td class="emp-recon-time">{{ $reconciliation->signIn != null ? date('h:i A', strtotime($reconciliation->signIn)) : '—' }}</td>
                                        <td class="emp-recon-time">{{ $reconciliation->signOut != null ? date('h:i A', strtotime($reconciliation->signOut)) : '—' }}</td>
                                        <td class="emp-recon-remarks">{{ $reconciliation->in_remarks ?: '—' }}</td>
                                        <td class="emp-recon-remarks">{{ $reconciliation->out_remarks ?: '—' }}</td>
                                        <td style="font-variant-numeric: tabular-nums;">{{ $reconciliation->application_date }}</td>
                                        <td class="text-center">
                                            @if($reconciliation->status == 1)
                                                <span class="emp-recon-badge approved">{{ __('Approved') }}</span>
                                            @else
                                                <span class="emp-recon-badge pending">{{ __('Pending') }}</span>
                                            @endif
                                        </td>
                                        <td class="text-right emp-recon-actions">
                                            @if($reconciliation->status == 0)
                                                <button type="button" class="btn btn-sm btn-light btn-recon-edit"
                                                        data-recon='@json($reconciliation)'
                                                        title="{{ __('Edit') }}">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                            @endif
                                            <button type="button" class="btn btn-sm btn-primary btn-recon-view"
                                                    data-recon='@json($reconciliation)'
                                                    title="{{ __('View') }}">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="9" class="emp-recon-empty">
                                            @if($hasFilters ?? false)
                                                {{ __('No requests match your filters.') }}
                                            @else
                                                {{ __('No reconciliation requests yet.') }}
                                            @endif
                                        </td>
                                    </tr>
                                @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

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

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

@section('modal')
    <div class="modal fade emp-recon-modal" id="Attendance_reconcilion">
        <form action="{{ route('attendance.reconciliation.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 reconciliation request') }}</h5>
                        <button type="button" class="close" data-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="emp-recon-modal-section">
                            <div class="emp-recon-modal-section-title">{{ __('Attendance date') }}</div>
                            <div class="form-group mb-0">
                                <label class="emp-recon-label" for="new_attendance_date">{{ __('Date') }} <span class="text-danger">*</span></label>
                                <input class="form-control" type="date" id="new_attendance_date" name="attendance_date" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="emp-recon-modal-section h-100 mb-md-0">
                                    <div class="emp-recon-modal-section-title">{{ __('In time') }}</div>
                                    <div class="form-group">
                                        <label class="emp-recon-label">{{ __('Time') }}</label>
                                        <input class="form-control" type="time" name="signIn">
                                    </div>
                                    <div class="form-group mb-0">
                                        <label class="emp-recon-label">{{ __('Remarks') }}</label>
                                        <textarea class="form-control" name="in_remarks" rows="3" placeholder="{{ __('Reason for in-time correction') }}"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="emp-recon-modal-section h-100 mb-0">
                                    <div class="emp-recon-modal-section-title">{{ __('Out time') }}</div>
                                    <div class="form-group">
                                        <label class="emp-recon-label">{{ __('Time') }}</label>
                                        <input class="form-control" type="time" name="signOut">
                                    </div>
                                    <div class="form-group mb-0">
                                        <label class="emp-recon-label">{{ __('Remarks') }}</label>
                                        <textarea class="form-control" name="out_remarks" rows="3" placeholder="{{ __('Reason for out-time correction') }}"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <p class="text-muted small mb-0 mt-2">
                            <i class="fas fa-info-circle mr-1"></i>
                            {{ __('Fill in at least in time or out time.') }}
                        </p>
                    </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-recon-modal" id="Attendance_update_modal">
        <form action="{{ route('attendance.reconciliation.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 reconciliation request') }}</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-recon-modal-section">
                            <div class="emp-recon-modal-section-title">{{ __('Attendance date') }}</div>
                            <div class="form-group mb-0">
                                <label class="emp-recon-label" for="date">{{ __('Date') }} <span class="text-danger">*</span></label>
                                <input class="form-control" type="date" id="date" name="attendance_date" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="emp-recon-modal-section h-100 mb-md-0">
                                    <div class="emp-recon-modal-section-title">{{ __('In time') }}</div>
                                    <div class="form-group">
                                        <label class="emp-recon-label">{{ __('Time') }}</label>
                                        <input class="form-control" type="time" name="signIn" id="signin">
                                    </div>
                                    <div class="form-group mb-0">
                                        <label class="emp-recon-label">{{ __('Remarks') }}</label>
                                        <textarea class="form-control" name="in_remarks" id="in_remarks" rows="3"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="emp-recon-modal-section h-100 mb-0">
                                    <div class="emp-recon-modal-section-title">{{ __('Out time') }}</div>
                                    <div class="form-group">
                                        <label class="emp-recon-label">{{ __('Time') }}</label>
                                        <input class="form-control" type="time" name="signOut" id="signout">
                                    </div>
                                    <div class="form-group mb-0">
                                        <label class="emp-recon-label">{{ __('Remarks') }}</label>
                                        <textarea class="form-control" name="out_remarks" id="out_remarks" rows="3"></textarea>
                                    </div>
                                </div>
                            </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 emp-recon-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">{{ __('Reconciliation details') }}</h5>
                    <button type="button" class="close" data-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="emp-recon-modal-section">
                        <div class="form-group mb-0">
                            <label class="emp-recon-label">{{ __('Attendance date') }}</label>
                            <input class="form-control" type="date" id="dates" readonly>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="emp-recon-modal-section h-100 mb-md-0">
                                <div class="emp-recon-modal-section-title">{{ __('In time') }}</div>
                                <div class="form-group">
                                    <label class="emp-recon-label">{{ __('Time') }}</label>
                                    <input class="form-control" type="time" id="signins" readonly>
                                </div>
                                <div class="form-group mb-0">
                                    <label class="emp-recon-label">{{ __('Remarks') }}</label>
                                    <textarea class="form-control" id="in_remarkss" rows="3" readonly></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="emp-recon-modal-section h-100 mb-0">
                                <div class="emp-recon-modal-section-title">{{ __('Out time') }}</div>
                                <div class="form-group">
                                    <label class="emp-recon-label">{{ __('Time') }}</label>
                                    <input class="form-control" type="time" id="signouts" readonly>
                                </div>
                                <div class="form-group mb-0">
                                    <label class="emp-recon-label">{{ __('Remarks') }}</label>
                                    <textarea class="form-control" id="out_remarkss" rows="3" readonly></textarea>
                                </div>
                            </div>
                        </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() {
            $('#Attendance_reconcilion').modal('show');
        }

        function reconcilition_update(el) {
            var r = $(el).data('recon');
            $('#signin').val(r.signIn || '');
            $('#id').val(r.id);
            $('#signout').val(r.signOut || '');
            $('#in_remarks').val(r.in_remarks || '');
            $('#out_remarks').val(r.out_remarks || '');
            $('#date').val(r.attendance_date);
            $('#Attendance_update_modal').modal('show');
        }

        function reconcilition_view(el) {
            var r = $(el).data('recon');
            $('#signins').val(r.signIn || '');
            $('#signouts').val(r.signOut || '');
            $('#in_remarkss').val(r.in_remarks || '');
            $('#out_remarkss').val(r.out_remarks || '');
            $('#dates').val(r.attendance_date);
            $('#reconciliation_view').modal('show');
        }

        $(document).on('click', '.btn-recon-edit', function () {
            reconcilition_update(this);
        });

        $(document).on('click', '.btn-recon-view', function () {
            reconcilition_view(this);
        });
    </script>
@endsection