@extends('layouts.app')

@section('title', 'New Marketing Request')

@section('content')
<div class="max-w-4xl mx-auto space-y-6" x-data="requestFormHandler()">

    <!-- Form Header -->
    <div class="pb-4 border-b border-slate-200 flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-slate-900 tracking-tight">New Marketing Request</h1>
            <p class="text-xs text-slate-500 mt-1">Submit a structured request to the Harcourts Design & Marketing team.</p>
        </div>
        <a href="{{ route('requests.index') }}" class="px-3 py-1.5 bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold rounded text-xs transition-colors">
            &larr; Back to Requests
        </a>
    </div>

    @if ($errors->any())
        <div class="bg-red-50 border-l-4 border-red-500 p-4 text-red-700 text-xs rounded">
            <div class="font-bold text-sm mb-1">Please fix the following errors:</div>
            <ul class="list-disc list-inside space-y-1">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="POST" action="{{ route('requests.store') }}" enctype="multipart/form-data" class="bg-white rounded-lg border border-slate-200 shadow-sm p-6 space-y-6">
        @csrf

        <!-- Section 1: Request Type & Basic Info -->
        <div>
            <h2 class="text-sm font-bold text-harcourts-navy uppercase tracking-wider mb-4 pb-2 border-b border-slate-100">
                1. Request Type & Target Details
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Request Type -->
                <div>
                    <label for="request_type_id" class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">
                        Request Type <span class="text-red-500">*</span>
                    </label>
                    <select name="request_type_id" id="request_type_id" x-model="selectedTypeId" @change="updateTypeInfo()" required
                        class="w-full px-3 py-2 border border-slate-300 rounded-md text-sm focus:ring-2 focus:ring-harcourts-blue focus:border-harcourts-blue">
                        <option value="">-- Select Request Type --</option>
                        @foreach($requestTypes as $type)
                            <option value="{{ $type->id }}"
                                data-requires-url="{{ $type->requires_property_url ? '1' : '0' }}"
                                data-supports-campaign="{{ $type->supports_campaign_fields ? '1' : '0' }}"
                                {{ old('request_type_id') == $type->id ? 'selected' : '' }}>
                                {{ $type->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- Agent Dropdown -->
                <div>
                    <label for="agent_id" class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">
                        Agent
                    </label>
                    <select name="agent_id" id="agent_id"
                        class="w-full px-3 py-2 border border-slate-300 rounded-md text-sm focus:ring-2 focus:ring-harcourts-blue focus:border-harcourts-blue">
                        <option value="">-- Select Agent (Optional) --</option>
                        @foreach($agents as $agent)
                            <option value="{{ $agent->id }}" {{ old('agent_id') == $agent->id ? 'selected' : '' }}>
                                {{ $agent->name }} {{ $agent->branch ? "({$agent->branch})" : '' }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>

            <!-- Property URL & Address -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
                <div>
                    <label for="property_url" class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">
                        Property Listing URL
                        <span x-show="requiresUrl" class="text-red-500">*</span>
                    </label>
                    <input type="url" name="property_url" id="property_url" value="{{ old('property_url') }}"
                        placeholder="https://harcourts.net/nz/office/listing/..."
                        :required="requiresUrl"
                        class="w-full px-3 py-2 border border-slate-300 rounded-md text-sm focus:ring-2 focus:ring-harcourts-blue focus:border-harcourts-blue">
                    <p class="text-[11px] text-slate-500 mt-1">
                        Designer uses this link to pull property photos, copy, and listing details.
                    </p>
                </div>

                <div>
                    <label for="property_address" class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">
                        Property Address (Optional)
                    </label>
                    <input type="text" name="property_address" id="property_address" value="{{ old('property_address') }}"
                        placeholder="e.g. 19 Prado Drive, Pukekohe"
                        class="w-full px-3 py-2 border border-slate-300 rounded-md text-sm focus:ring-2 focus:ring-harcourts-blue focus:border-harcourts-blue">
                </div>
            </div>
        </div>

        <!-- Dynamic Paid Advertising Campaign Fields (Alpine.js) -->
        <div x-show="supportsCampaign" x-cloak class="bg-blue-50/70 border border-blue-200 rounded-lg p-5 space-y-4">
            <h2 class="text-xs font-bold text-blue-900 uppercase tracking-wider pb-2 border-b border-blue-200 flex items-center space-x-2">
                <svg class="w-4 h-4 text-blue-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"/></svg>
                <span>Paid Advertising Campaign Details</span>
            </h2>

            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-700 mb-1">Campaign Platform</label>
                    <select name="campaign_platform" class="w-full px-3 py-1.5 border border-slate-300 rounded text-xs">
                        <option value="Facebook + Instagram">Facebook + Instagram</option>
                        <option value="Facebook">Facebook Only</option>
                        <option value="Instagram">Instagram Only</option>
                    </select>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-700 mb-1">Campaign Objective</label>
                    <select name="campaign_objective" class="w-full px-3 py-1.5 border border-slate-300 rounded text-xs">
                        <option value="Leads">Leads</option>
                        <option value="Traffic">Traffic</option>
                        <option value="Awareness">Awareness</option>
                        <option value="Engagement">Engagement</option>
                    </select>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-700 mb-1">Campaign Budget ($)</label>
                    <input type="text" name="campaign_budget" placeholder="e.g. $250.00" class="w-full px-3 py-1.5 border border-slate-300 rounded text-xs">
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-700 mb-1">Campaign Start Date</label>
                    <input type="date" name="campaign_start_date" class="w-full px-3 py-1.5 border border-slate-300 rounded text-xs">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-700 mb-1">Campaign End Date</label>
                    <input type="date" name="campaign_end_date" class="w-full px-3 py-1.5 border border-slate-300 rounded text-xs">
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-700 mb-1">Target Areas / Suburbs</label>
                    <input type="text" name="target_areas" placeholder="e.g. Pukekohe, Papakura, Franklin" class="w-full px-3 py-1.5 border border-slate-300 rounded text-xs">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-700 mb-1">Call to Action (CTA)</label>
                    <input type="text" name="cta" placeholder="e.g. Learn More / Contact Agent" class="w-full px-3 py-1.5 border border-slate-300 rounded text-xs">
                </div>
            </div>

            <div class="flex items-center space-x-6 pt-2 text-xs">
                <label class="flex items-center space-x-2 font-medium text-slate-700 cursor-pointer">
                    <input type="checkbox" name="ad_copy_required" value="1" checked class="rounded text-harcourts-blue">
                    <span>Ad Copy Required</span>
                </label>
                <label class="flex items-center space-x-2 font-medium text-slate-700 cursor-pointer">
                    <input type="checkbox" name="creative_required" value="1" checked class="rounded text-harcourts-blue">
                    <span>Creative Required</span>
                </label>
                <label class="flex items-center space-x-2 font-medium text-slate-700 cursor-pointer">
                    <input type="checkbox" name="lead_form_required" value="1" class="rounded text-harcourts-blue">
                    <span>Lead Form Setup</span>
                </label>
            </div>
        </div>

        <!-- Section 2: Deadline & Priority -->
        <div>
            <h2 class="text-sm font-bold text-harcourts-navy uppercase tracking-wider mb-4 pb-2 border-b border-slate-100">
                2. Deadline & Priority Setup
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="required_date" class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">
                        Required By Date <span class="text-red-500">*</span>
                    </label>
                    <input type="date" name="required_date" id="required_date" value="{{ old('required_date', date('Y-m-d', strtotime('+3 days'))) }}" required
                        class="w-full px-3 py-2 border border-slate-300 rounded-md text-sm focus:ring-2 focus:ring-harcourts-blue focus:border-harcourts-blue">
                </div>

                <div>
                    <label for="required_time" class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">
                        Required By Time (Optional)
                    </label>
                    <input type="time" name="required_time" id="required_time" value="{{ old('required_time', '15:00') }}"
                        class="w-full px-3 py-2 border border-slate-300 rounded-md text-sm focus:ring-2 focus:ring-harcourts-blue focus:border-harcourts-blue">
                </div>
            </div>

            <!-- Priority Notice & Override -->
            <div class="mt-4 p-4 bg-slate-50 border border-slate-200 rounded-md text-xs space-y-3">
                <div class="flex items-start space-x-2 text-slate-600">
                    <svg class="w-4 h-4 text-harcourts-blue flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    <span>Priority is automatically calculated based on working days remaining before deadline (Urgent = &le;1 working day, Priority = 1-2 working days, Standard = &gt;2 working days).</span>
                </div>

                <div class="pt-2 border-t border-slate-200">
                    <label class="flex items-center space-x-2 font-bold text-slate-800 cursor-pointer">
                        <input type="checkbox" name="priority_override" value="1" x-model="isUrgentOverride" class="rounded text-red-600 focus:ring-red-500">
                        <span>Manual Urgent Priority Override</span>
                    </label>

                    <div x-show="isUrgentOverride" x-cloak class="mt-3">
                        <label for="urgent_reason" class="block text-xs font-bold text-red-700 uppercase tracking-wider mb-1">
                            Urgent Reason <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="urgent_reason" id="urgent_reason" value="{{ old('urgent_reason') }}"
                            placeholder="Explain why this request requires urgent priority override..."
                            :required="isUrgentOverride"
                            class="w-full px-3 py-2 border border-red-300 bg-red-50/40 rounded-md text-xs focus:ring-red-500 focus:border-red-500">
                    </div>
                </div>
            </div>
        </div>

        <!-- Section 3: Instructions & Attachments -->
        <div>
            <h2 class="text-sm font-bold text-harcourts-navy uppercase tracking-wider mb-4 pb-2 border-b border-slate-100">
                3. Design Instructions & Attachments
            </h2>

            <div class="space-y-4">
                <div>
                    <label for="instructions" class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">
                        Instructions / Creative Notes
                    </label>
                    <textarea name="instructions" id="instructions" rows="4"
                        placeholder="Provide details regarding layout preferences, headline changes, open home dates/times, pricing text, etc."
                        class="w-full px-3 py-2 border border-slate-300 rounded-md text-sm focus:ring-2 focus:ring-harcourts-blue focus:border-harcourts-blue">{{ old('instructions') }}</textarea>
                </div>

                <div>
                    <label for="attachments" class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">
                        Additional Attachments (Optional)
                    </label>
                    <input type="file" name="attachments[]" id="attachments" multiple
                        accept=".pdf,.jpg,.jpeg,.png,.doc,.docx"
                        class="w-full text-xs text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-xs file:font-semibold file:bg-harcourts-blue file:text-white hover:file:bg-blue-800 cursor-pointer">
                    <p class="text-[11px] text-slate-500 mt-1">
                        Allowed formats: PDF, JPG, JPEG, PNG, DOC, DOCX. Max 20MB per file.
                    </p>
                </div>
            </div>
        </div>

        <!-- Submit Button -->
        <div class="pt-4 border-t border-slate-200 flex items-center justify-end space-x-4">
            <a href="{{ route('requests.index') }}" class="px-4 py-2.5 text-xs font-semibold text-slate-600 hover:text-slate-900">
                Cancel
            </a>
            <button type="submit" class="px-6 py-2.5 bg-harcourts-blue hover:bg-blue-800 text-white font-bold text-xs uppercase tracking-wider rounded-md shadow focus:outline-none focus:ring-2 focus:ring-harcourts-blue transition-colors">
                Submit Marketing Request
            </button>
        </div>

    </form>
</div>

<script>
    function requestFormHandler() {
        return {
            selectedTypeId: '{{ old("request_type_id", "") }}',
            requiresUrl: true,
            supportsCampaign: false,
            isUrgentOverride: {{ old('priority_override') ? 'true' : 'false' }},

            init() {
                this.updateTypeInfo();
            },

            updateTypeInfo() {
                const select = document.getElementById('request_type_id');
                if (!select || !select.options[select.selectedIndex]) return;
                const option = select.options[select.selectedIndex];
                this.requiresUrl = option.getAttribute('data-requires-url') === '1';
                this.supportsCampaign = option.getAttribute('data-supports-campaign') === '1';
            }
        }
    }
</script>
@endsection