@extends('backEnd.layouts.master')
@section('title', 'Support Shifts')

@section('content')
<div class="container-fluid py-3">
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <div>
            <h4 class="mb-0 fw-bold"><i class="fas fa-clock me-2"></i>Shift Schedule</h4>
            <small class="text-muted">Weekly moderator shift grid</small>
        </div>
        <a href="{{ route('admin.support.moderators') }}" class="btn btn-outline-secondary btn-sm">Moderators</a>
    </div>

    <div class="card shadow-sm border-0 mb-3">
        <div class="card-header bg-transparent fw-semibold">Add Shift</div>
        <div class="card-body">
            <form action="{{ route('admin.support.shifts.store') }}" method="POST" class="row g-2">
                @csrf
                <div class="col-md-3">
                    <label class="form-label small">Moderator</label>
                    <select name="moderator_id" class="form-select form-select-sm" required>
                        @foreach($moderators as $m)
                        <option value="{{ $m->id }}">{{ $m->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label small">Type</label>
                    <select name="shift_type" class="form-select form-select-sm">
                        <option value="morning">Morning</option>
                        <option value="afternoon">Afternoon</option>
                        <option value="night">Night</option>
                        <option value="custom">Custom</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label small">Start</label>
                    <input type="time" name="start_time" class="form-control form-control-sm" required>
                </div>
                <div class="col-md-2">
                    <label class="form-label small">End</label>
                    <input type="time" name="end_time" class="form-control form-control-sm" required>
                </div>
                <div class="col-md-3">
                    <label class="form-label small">Working Days</label>
                    <div class="d-flex flex-wrap gap-1">
                        @foreach($dayLabels as $i => $label)
                        <label class="btn btn-sm btn-outline-secondary">
                            <input type="checkbox" name="working_days[]" value="{{ $i }}" class="d-none" @checked(in_array($i, [1,2,3,4,5,6], true))>
                            {{ $label }}
                        </label>
                        @endforeach
                    </div>
                </div>
                <div class="col-12">
                    <button type="submit" class="btn btn-success btn-sm"><i class="fas fa-plus me-1"></i> Add Shift</button>
                </div>
            </form>
        </div>
    </div>

    @foreach($moderators as $moderator)
    <div class="card shadow-sm border-0 mb-3">
        <div class="card-header bg-transparent fw-semibold">{{ $moderator->name }}</div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table mb-0 table-sm">
                    <thead class="table-light">
                        <tr>
                            <th>Type</th>
                            <th>Time</th>
                            <th>Days</th>
                            <th>Status</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($moderator->shifts as $shift)
                        <tr>
                            <td>{{ ucfirst($shift->shift_type) }}</td>
                            <td>{{ substr($shift->start_time, 0, 5) }} – {{ substr($shift->end_time, 0, 5) }}</td>
                            <td>
                                @foreach($shift->working_days ?? [] as $d)
                                <span class="badge bg-light text-dark border">{{ $dayLabels[$d] ?? $d }}</span>
                                @endforeach
                            </td>
                            <td>
                                <span class="badge bg-{{ $shift->is_active ? 'success' : 'secondary' }}">{{ $shift->is_active ? 'Active' : 'Off' }}</span>
                                @if($shift->isCurrentlyOnShift())<span class="badge bg-info text-dark ms-1">Now</span>@endif
                            </td>
                            <td class="text-end">
                                <form action="{{ route('admin.support.shifts.destroy', $shift->id) }}" method="POST" class="d-inline" id="del-shift-{{ $shift->id }}">@csrf @method('DELETE')
                                    <button type="button" class="btn btn-sm btn-outline-danger delete-confirm py-0 px-2" data-form="#del-shift-{{ $shift->id }}"><i class="fas fa-trash"></i></button>
                                </form>
                            </td>
                        </tr>
                        @empty
                        <tr><td colspan="5" class="text-center py-3 text-muted">No shifts scheduled.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @endforeach
</div>
@endsection

@push('scripts')
<script>
document.querySelectorAll('label.btn input[type=checkbox]').forEach(function (cb) {
    cb.addEventListener('change', function () {
        cb.closest('label').classList.toggle('btn-primary', cb.checked);
        cb.closest('label').classList.toggle('btn-outline-secondary', !cb.checked);
    });
    cb.dispatchEvent(new Event('change'));
});
</script>
@endpush