@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>
                <div class="d-flex align-items-center gap-2 mb-1">
                    <i class="bi bi-file-earmark-text text-indigo-600 fs-4" style="color: #4f46e5;"></i>
                    <h4 class="fw-bold text-dark mb-0">Daily Exhibition Report</h4>
                </div>
                <p class="text-muted small mb-0">Submit your verified financial metrics, visitor logs, and venue media
                    updates.</p>
            </div>
            <a href="{{ route('dashboard') }}"
                class="btn btn-outline-secondary px-3 shadow-sm d-flex align-items-center gap-2"
                style="border-radius: 10px; font-weight: 500;">
                <i class="bi bi-arrow-left"></i> Back to Desk
            </a>
        </div>

        <div class="card border-0 shadow-sm rounded-4" style="max-width: 900px;">
            <div class="card-header bg-white border-bottom py-3 px-4">
                <h5 class="mb-0 fw-bold text-dark">Operational Metrics Log</h5>
            </div>
            <div class="card-body p-4">
                <form action="{{ route('employee.report.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <div class="row g-4">
                        <div class="col-md-12">
                            <label class="form-label fw-semibold text-secondary small">Associated Exhibition Event</label>
                            <select name="exhibition_id" class="form-select @error('exhibition_id') is-invalid @enderror"
                                required style="border-radius: 8px; padding: 11px; background-color: #f8fafc;">
                                <option value="">-- Select Active Assigned Allocation --</option>
                                @foreach($exhibitions as $exhibition)
                                    <option value="{{ $exhibition->id }}" selected>{{ $exhibition->name }}
                                        ({{ $exhibition->city }}, {{ $exhibition->location }})</option>
                                @endforeach
                            </select>
                            @error('exhibition_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-semibold text-secondary small">Total Sales Amount</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light text-muted border-end-0"
                                    style="border-radius: 8px 0 0 8px;"><i class="bi bi-currency-rupee"></i></span>
                                <input type="number" name="sales_amount"
                                    class="form-control @error('sales_amount') is-invalid @enderror" placeholder="0.00"
                                    required min="0" style="border-radius: 0 8px 8px 0; padding: 11px;">
                                @error('sales_amount') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-semibold text-secondary small">Total Visitor Footfall</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light text-muted border-end-0"
                                    style="border-radius: 8px 0 0 8px;"><i class="bi bi-people-fill"></i></span>
                                <input type="number" name="visitor_count"
                                    class="form-control @error('visitor_count') is-invalid @enderror" placeholder="0"
                                    required min="0" style="border-radius: 0 8px 8px 0; padding: 11px;">
                                @error('visitor_count') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-semibold text-secondary small">Business Leads Captured</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light text-muted border-end-0"
                                    style="border-radius: 8px 0 0 8px;"><i class="bi bi-person-vcard-fill"></i></span>
                                <input type="number" name="lead_count"
                                    class="form-control @error('lead_count') is-invalid @enderror" placeholder="0" required
                                    min="0" style="border-radius: 0 8px 8px 0; padding: 11px;">
                                @error('lead_count') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                        </div>

                        <div class="col-md-12 mt-4">
                            <label class="form-label fw-semibold text-secondary small">Upload Stall/Site Photos (Multiple
                                Allowed | Max: 2MB per image)</label>
                            <div class="p-4 bg-light rounded-3 text-center border"
                                style="border-style: dashed !important; border-color: #cbd5e1 !important;">
                                <i class="bi bi-images text-indigo-600 fs-1 d-block mb-2" style="color: #4f46e5;"></i>
                                <span class="d-block small text-dark fw-medium mb-2">You can select multiple photos at
                                    once</span>
                                <input type="file" name="photos[]" class="form-control form-control-sm mx-auto shadow-sm"
                                    accept="image/*" multiple style="max-width: 320px; border-radius: 6px;">
                            </div>
                        </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 d-flex align-items-center gap-2"
                            style="background-color: #4f46e5; border: none; border-radius: 10px; height: 48px; font-weight: 600;">
                            <i class="bi bi-send-check-fill"></i> Submit Daily Update
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection