@extends('layouts.app')

@section('content')
    <div class="container-fluid px-4 py-4" style="background-color: #f8fafc; min-height: 100vh;">

        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h4 class="fw-bold text-dark mb-0">Create New Exhibition</h4>
                <p class="text-muted small mb-0">Setup a new event, venue details, and assign your team.</p>
            </div>
            <a href="{{ route('admin.exhibitions.index') }}" class="btn btn-outline-secondary px-3 shadow-sm"
                style="border-radius: 10px;">
                <i class="bi bi-arrow-left me-1"></i> Back to List
            </a>
        </div>

        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-body p-4">
                <form action="{{ route('admin.exhibitions.store') }}" method="POST">
                    @csrf

                    <div class="row g-4">
                        <div class="col-md-12">
                            <h5 class="fw-bold mb-3" style="color: #4f46e5;">1. Exhibition & Venue Details</h5>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold text-secondary small">Exhibition Name</label>
                            <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                                placeholder="e.g., Silk India Expo 2026" required
                                style="border-radius: 8px; padding: 10px;">
                            @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold text-secondary small">City</label>
                            <input type="text" name="city" class="form-control @error('city') is-invalid @enderror"
                                placeholder="e.g., Nagpur" required style="border-radius: 8px; padding: 10px;">
                            @error('city') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold text-secondary small">Specific Location / Hall</label>
                            <input type="text" name="location" class="form-control @error('location') is-invalid @enderror"
                                placeholder="e.g., Reshimbagh Ground, Hall No. 1" required
                                style="border-radius: 8px; padding: 10px;">
                            @error('location') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold text-secondary small">Report Submission Deadline (Module
                                14)</label>
                            <input type="time" name="report_deadline" class="form-control" value="22:00" required
                                style="border-radius: 8px; padding: 10px;">
                            <span class="text-muted" style="font-size: 11px;">Default is 10:00 PM. System alerts trigger
                                based on this time.</span>
                        </div>

                        <div class="col-md-12">
                            <label class="form-label fw-semibold text-secondary small">Full Venue Address</label>
                            <textarea name="venue_address" class="form-control" rows="2"
                                placeholder="Enter complete venue address details..." required
                                style="border-radius: 8px;"></textarea>
                        </div>

                        <div class="col-md-12 mt-4">
                            <hr class="text-muted opacity-25">
                            <h5 class="fw-bold mb-3" style="color: #4f46e5;">2. Schedule Dates</h5>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold text-secondary small">Start Date</label>
                            <input type="date" name="start_date" class="form-control" required
                                style="border-radius: 8px; padding: 10px;">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold text-secondary small">End Date</label>
                            <input type="date" name="end_date" class="form-control" required
                                style="border-radius: 8px; padding: 10px;">
                        </div>

                        <div class="col-md-12 mt-4">
                            <hr class="text-muted opacity-25">
                            <h5 class="fw-bold mb-3" style="color: #4f46e5;">3. Team Assignment</h5>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold text-secondary small">Assign Exhibition Manager</label>
                            <select name="manager_id" class="form-select" required
                                style="border-radius: 8px; padding: 10px;">
                                <option value="">Choose a Manager...</option>
                                @foreach($managers as $manager)
                                    <option value="{{ $manager->id }}">{{ $manager->name }} ({{ $manager->email }})</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold text-secondary small mb-2">Assign Representatives /
                                Employees</label>
                            <div class="p-3 bg-light rounded-3"
                                style="max-height: 160px; overflow-y: auto; border: 1px solid #dee2e6;">
                                @if($employees->isEmpty())
                                    <p class="text-muted small mb-0">No active employees found.</p>
                                @else
                                    @foreach($employees as $employee)
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" name="employee_ids[]"
                                                value="{{ $employee->id }}" id="emp_{{ $employee->id }}">
                                            <label class="form-check-label small text-dark ms-1" for="emp_{{ $employee->id }}">
                                                {{ $employee->name }} ({{ $employee->email }})
                                            </label>
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                        </div>

                        <div class="col-md-12">
                            <label class="form-label fw-semibold text-secondary small">Special Notes / Instructions</label>
                            <textarea name="notes" class="form-control" rows="2"
                                placeholder="Any dynamic instructions for the ground staff..."
                                style="border-radius: 8px;"></textarea>
                        </div>
                    </div>

                    <div class="d-flex justify-content-end mt-4 pt-3 border-top border-light">
                        <button type="submit" class="btn btn-primary px-5 shadow-sm"
                            style="background-color: #4f46e5; border: none; border-radius: 10px; height: 48px; font-weight: 600;">
                            <i class="bi bi-cloud-check me-2"></i> Save & Launch Exhibition
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection