@extends('admin.admin_dashboard')

@section('customcss')
<style>
    .stat-card {
        border-radius: 10px;
        border: 1px solid #e2e8f0;
        background: #ffffff;
        padding: 16px 18px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.03);
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0;
    }
    .stat-icon-box {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }
    /* Shift Badges - High contrast & crystal clear */
    .badge-shift-morning {
        background-color: #0284c7 !important;
        color: #ffffff !important;
        font-weight: 600 !important;
        padding: 5px 10px !important;
        border-radius: 6px;
        font-size: 11.5px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
    .badge-shift-day {
        background-color: #d97706 !important;
        color: #ffffff !important;
        font-weight: 600 !important;
        padding: 5px 10px !important;
        border-radius: 6px;
        font-size: 11.5px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
    .schedule-pill {
        display: inline-block;
        font-size: 11px;
        background: #f8fafc;
        border: 1px solid #cbd5e1;
        border-radius: 5px;
        padding: 2px 6px;
        margin: 2px 3px 2px 0;
        color: #1e293b;
    }
    .schedule-pill.is-off {
        background: #fef2f2;
        border-color: #fca5a5;
        color: #dc2626;
        font-weight: bold;
    }
    .work-rules-table th {
        background-color: #f8fafc;
        color: #1e293b;
        font-weight: 600;
        font-size: 12.5px;
        border-bottom: 2px solid #cbd5e1;
        vertical-align: middle;
        padding: 10px 12px;
    }
    .work-rules-table td {
        vertical-align: middle;
        font-size: 12.5px;
        padding: 10px 12px;
    }
</style>
@endsection

@section('admin')
<div class="content-body" style="padding-bottom: 60px;">
    <div class="container-fluid">

        {{-- Page Header --}}
        <div class="row page-titles mb-3">
            <div class="col-sm-6 p-md-0">
                <div class="welcome-text">
                    <h4 class="mb-1 text-dark fw-bold">Employee Work Rules & Shifts</h4>
                    <p class="mb-0 text-muted" style="font-size: 12.5px;">Configure and manage shift schedules for all staff members</p>
                </div>
            </div>
            <div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex align-items-center">
                <a href="{{ route('admin.attendance.work_rules.create') }}" class="btn btn-success px-3 py-2">
                    <i class="fa fa-plus-circle me-1"></i> Assign New Work Rule
                </a>
            </div>
        </div>

        {{-- Statistics Overview Cards --}}
        <div class="row g-3 mb-3">
            <div class="col-xl-3 col-sm-6">
                <div class="stat-card">
                    <div>
                        <span class="text-muted fw-bold d-block mb-1" style="font-size: 11px; letter-spacing: 0.5px;">TOTAL RULES</span>
                        <h3 class="mb-0 fw-bold text-dark">{{ $stats['total'] ?? 0 }}</h3>
                    </div>
                    <div class="stat-icon-box bg-primary-subtle text-primary">
                        <i class="fa fa-clipboard-list"></i>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6">
                <div class="stat-card">
                    <div>
                        <span class="text-muted fw-bold d-block mb-1" style="font-size: 11px; letter-spacing: 0.5px;">ACTIVE RULES</span>
                        <h3 class="mb-0 fw-bold text-success">{{ $stats['active'] ?? 0 }}</h3>
                    </div>
                    <div class="stat-icon-box bg-success-subtle text-success">
                        <i class="fa fa-check-circle"></i>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6">
                <div class="stat-card">
                    <div>
                        <span class="text-muted fw-bold d-block mb-1" style="font-size: 11px; letter-spacing: 0.5px;">MORNING SHIFT</span>
                        <h3 class="mb-0 fw-bold text-info">{{ $stats['morning'] ?? 0 }}</h3>
                    </div>
                    <div class="stat-icon-box bg-info-subtle text-info">
                        <i class="fa fa-sun"></i>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6">
                <div class="stat-card">
                    <div>
                        <span class="text-muted fw-bold d-block mb-1" style="font-size: 11px; letter-spacing: 0.5px;">DAY SHIFT</span>
                        <h3 class="mb-0 fw-bold text-warning">{{ $stats['day'] ?? 0 }}</h3>
                    </div>
                    <div class="stat-icon-box bg-warning-subtle text-warning">
                        <i class="fa fa-cloud-sun"></i>
                    </div>
                </div>
            </div>
        </div>

        {{-- Filters Card --}}
        <div class="card mb-3">
            <div class="card-body py-3 px-3">
                <form method="GET" action="{{ route('admin.attendance.work_rules.index') }}">
                    <div class="row g-2 align-items-end">
                        
                        {{-- Search Text --}}
                        <div class="col-md-3 col-sm-6">
                            <label class="form-label mb-1 fw-semibold text-dark" style="font-size: 12px;">Search Employee</label>
                            <div class="input-group input-group-sm">
                                <span class="input-group-text"><i class="fa fa-search"></i></span>
                                <input type="text" name="search" class="form-control" placeholder="Name, Primary ID, ID..." value="{{ request('search') }}">
                            </div>
                        </div>

                        {{-- Employee Select --}}
                        <div class="col-md-3 col-sm-6">
                            <label class="form-label mb-1 fw-semibold text-dark" style="font-size: 12px;">Filter Employee</label>
                            <select name="employee_id" class="form-control form-control-sm default-select">
                                <option value="">All Employees</option>
                                @foreach($employees as $emp)
                                    @php
                                        $primary = (!empty($emp->primary_id) && $emp->primary_id !== '0' && $emp->primary_id !== 0) ? " [PID: {$emp->primary_id}]" : '';
                                        $secondary = (!empty($emp->e_id) && $emp->e_id !== '0' && $emp->e_id !== 0) ? " (ID: {$emp->e_id})" : '';
                                    @endphp
                                    <option value="{{ $emp->id }}" {{ request('employee_id') == $emp->id ? 'selected' : '' }}>
                                        {{ $emp->name }}{{ $primary }}{{ $secondary }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Shift Select --}}
                        <div class="col-md-2 col-sm-4">
                            <label class="form-label mb-1 fw-semibold text-dark" style="font-size: 12px;">Shift</label>
                            <select name="shift_id" class="form-control form-control-sm default-select">
                                <option value="">All Shifts</option>
                                @foreach($shifts as $shift)
                                    <option value="{{ $shift->id }}" {{ request('shift_id') == $shift->id ? 'selected' : '' }}>
                                        {{ $shift->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Status Select --}}
                        <div class="col-md-2 col-sm-4">
                            <label class="form-label mb-1 fw-semibold text-dark" style="font-size: 12px;">Status</label>
                            <select name="is_active" class="form-control form-control-sm default-select">
                                <option value="">All Status</option>
                                <option value="1" {{ request('is_active') === '1' ? 'selected' : '' }}>Active</option>
                                <option value="0" {{ request('is_active') === '0' ? 'selected' : '' }}>Inactive</option>
                            </select>
                        </div>

                        {{-- Submit Buttons --}}
                        <div class="col-md-2 col-sm-4 d-flex gap-2">
                            <button type="submit" class="btn btn-sm btn-primary w-100">
                                <i class="fa fa-filter me-1"></i> Filter
                            </button>
                            <a href="{{ route('admin.attendance.work_rules.index') }}" class="btn btn-sm btn-outline-secondary" title="Reset Filters">
                                <i class="fa fa-undo"></i>
                            </a>
                        </div>

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

        {{-- Work Rules Table --}}
        <div class="card">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover work-rules-table mb-0">
                        <thead>
                            <tr>
                                <th style="width: 85px;">Primary ID</th>
                                <th style="width: 85px;">Secondary ID</th>
                                <th>Employee Details</th>
                                <th style="width: 120px;">Shift</th>
                                <th>Weekly Schedule & Timings</th>
                                <th class="text-center" style="width: 95px;">Weekly Hours</th>
                                <th class="text-center" style="width: 75px;">Grace</th>
                                <th class="text-center" style="width: 85px;">Status</th>
                                <th class="text-end" style="width: 95px;">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($workRules as $rule)
                                @php
                                    $emp = $rule->employee;
                                    $primaryId = (!empty($emp->primary_id) && $emp->primary_id !== '0' && $emp->primary_id !== 0) ? $emp->primary_id : '-';
                                    $secondaryId = (!empty($emp->e_id) && $emp->e_id !== '0' && $emp->e_id !== 0) ? $emp->e_id : '-';
                                    $post = $emp->postDetails->name ?? ($emp->post ?? '-');
                                    $shiftName = $rule->shift->name ?? 'N/A';
                                    $isMorning = str_contains(strtolower($shiftName), 'morning');
                                    $shiftBadgeClass = $isMorning ? 'badge-shift-morning' : 'badge-shift-day';
                                    $totalMins = $rule->weeklySchedules->sum('work_minutes');
                                    $hoursStr = intdiv($totalMins, 60) . 'h ' . ($totalMins % 60) . 'm';
                                @endphp
                                <tr>
                                    
                                    {{-- Primary ID --}}
                                    <td class="fw-bold text-primary">{{ $primaryId }}</td>

                                    {{-- Secondary ID --}}
                                    <td class="text-muted">{{ $secondaryId }}</td>

                                    {{-- Employee Details --}}
                                    <td>
                                        <div class="fw-bold text-dark">{{ $emp->name ?? 'Unknown' }}</div>
                                        <small class="text-muted">{{ $post }}</small>
                                    </td>

                                    {{-- Shift with High-Contrast Solid Badge --}}
                                    <td>
                                        <span class="{{ $shiftBadgeClass }}">
                                            <i class="fa {{ $isMorning ? 'fa-sun' : 'fa-cloud-sun' }}"></i>
                                            {{ $shiftName }}
                                        </span>
                                    </td>

                                    {{-- Weekly Schedule --}}
                                    <td>
                                        <div class="d-flex flex-wrap align-items-center">
                                            @php
                                                $dayNames = [6 => 'Sat', 0 => 'Sun', 1 => 'Mon', 2 => 'Tue', 3 => 'Wed', 4 => 'Thu', 5 => 'Fri'];
                                                $schedules = $rule->weeklySchedules->keyBy('day_of_week');
                                            @endphp
                                            @foreach($dayNames as $dayNum => $dayLabel)
                                                @php
                                                    $sch = $schedules[$dayNum] ?? null;
                                                @endphp
                                                @if($sch && $sch->is_off)
                                                    <span class="schedule-pill is-off" title="{{ $dayLabel }}: Off Day">
                                                        {{ $dayLabel }}: Off
                                                    </span>
                                                @elseif($sch && $sch->start_time && $sch->end_time)
                                                    <span class="schedule-pill" title="{{ $dayLabel }}: {{ $sch->start_time }} - {{ $sch->end_time }}">
                                                        <strong>{{ $dayLabel }}:</strong> {{ \Carbon\Carbon::parse($sch->start_time)->format('H:i') }}-{{ \Carbon\Carbon::parse($sch->end_time)->format('H:i') }}
                                                    </span>
                                                @endif
                                            @endforeach
                                        </div>
                                    </td>

                                    {{-- Weekly Hours --}}
                                    <td class="text-center">
                                        <span class="badge bg-light text-dark border fw-bold">{{ $hoursStr }}</span>
                                    </td>

                                    {{-- Grace Time --}}
                                    <td class="text-center">
                                        <small class="text-muted">{{ $rule->grace_minutes }}m</small>
                                    </td>

                                    {{-- Status Toggle --}}
                                    <td class="text-center">
                                        <form method="POST" action="{{ route('admin.attendance.work_rules.toggle', $rule->id) }}" class="d-inline">
                                            @csrf
                                            @method('PATCH')
                                            <button type="submit" class="btn btn-xs {{ $rule->is_active ? 'btn-outline-success' : 'btn-outline-danger' }} rounded-pill px-2" title="Click to toggle status">
                                                {{ $rule->is_active ? 'Active' : 'Inactive' }}
                                            </button>
                                        </form>
                                    </td>

                                    {{-- Actions --}}
                                    <td class="text-end">
                                        <div class="d-flex justify-content-end gap-1">
                                            <a href="{{ route('admin.attendance.work_rules.edit', $rule->id) }}" class="btn btn-xs btn-primary shadow btn-xs sharp me-1" title="Edit Rule">
                                                <i class="fas fa-pencil-alt"></i>
                                            </a>
                                            <form method="POST" action="{{ route('admin.attendance.work_rules.destroy', $rule->id) }}" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this work rule?');">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-xs btn-danger shadow btn-xs sharp" title="Delete Rule">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>

                                </tr>
                            @empty
                                <tr>
                                    <td colspan="9" class="text-center py-5 text-muted">
                                        <i class="fa fa-calendar-times fs-2 mb-2 d-block text-secondary"></i>
                                        No employee work rules found matching the criteria.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                {{-- Pagination --}}
                @if($workRules->hasPages())
                    <div class="card-footer d-flex justify-content-between align-items-center py-2 px-3">
                        <small class="text-muted">
                            Showing {{ $workRules->firstItem() ?? 0 }} to {{ $workRules->lastItem() ?? 0 }} of {{ $workRules->total() }} entries
                        </small>
                        <div>
                            {{ $workRules->links() }}
                        </div>
                    </div>
                @endif

            </div>
        </div>

    </div>
</div>
@endsection