@extends('layouts.app')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="card">
        <div class="card-header">
            <div class="row align-items-center">
                <div class="col-6">
                    <h5 class="card-title mb-0">Create Checklist Item</h5>
                </div>
                <div class="col-6 text-end">
                    <a href="{{ route('checklist-items.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Back
                    </a>
                </div>
            </div>
            <hr />
        </div>

        <div class="card-body">
            @can('create checklist items')
                <form action="{{ route('checklist-items.store') }}" method="POST">
                    @csrf

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="checklist_id" class="form-label">Checklist *</label>
                            <select class="form-control @error('checklist_id') is-invalid @enderror"
                                    id="checklist_id" name="checklist_id" required>
                                <option value="">Select Checklist</option>

                                @foreach($checklists as $checklist)
                                    @php
                                        // ✅ Safe date formatting (works if string/Carbon/null)
                                        $cDate = $checklist->date ? \Carbon\Carbon::parse($checklist->date) : null;
                                    @endphp

                                    <option value="{{ $checklist->id }}" {{ old('checklist_id') == $checklist->id ? 'selected' : '' }}>
                                        {{ $checklist->mosque->name ?? '-' }} - {{ $cDate ? $cDate->format('d M Y') : '-' }}
                                    </option>
                                @endforeach
                            </select>

                            @error('checklist_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="task_title" class="form-label">Task Title *</label>
                            <input type="text" class="form-control @error('task_title') is-invalid @enderror"
                                   id="task_title" name="task_title"
                                   value="{{ old('task_title') }}"
                                   placeholder="Enter task title" required>
                            @error('task_title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="status" class="form-label">Status *</label>
                            <select class="form-control @error('status') is-invalid @enderror"
                                    id="status" name="status" required>
                                @foreach($statuses as $key => $label)
                                    <option value="{{ $key }}" {{ old('status') == $key ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                            @error('status')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="proof_required" class="form-label">Proof Required *</label>
                            <select class="form-control @error('proof_required') is-invalid @enderror"
                                    id="proof_required" name="proof_required" required>
                                <option value="0" {{ old('proof_required') === '0' ? 'selected' : '' }}>No</option>
                                <option value="1" {{ old('proof_required') === '1' ? 'selected' : '' }}>Yes</option>
                            </select>
                            @error('proof_required')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="start_time" class="form-label">Start Time</label>
                            <input type="datetime-local" class="form-control @error('start_time') is-invalid @enderror"
                                   id="start_time" name="start_time"
                                   value="{{ old('start_time') }}">
                            @error('start_time')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="complete_time" class="form-label">Complete Time</label>
                            <input type="datetime-local" class="form-control @error('complete_time') is-invalid @enderror"
                                   id="complete_time" name="complete_time"
                                   value="{{ old('complete_time') }}">
                            @error('complete_time')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="mt-4">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> Save Item
                        </button>
                        <a href="{{ route('checklist-items.index') }}" class="btn btn-secondary">Cancel</a>
                    </div>
                </form>
            @else
                <div class="alert alert-danger">
                    <i class="fas fa-ban"></i> You don't have permission to create checklist items.
                </div>
            @endcan
        </div>
    </div>
</div>
@endsection