@extends('layouts.app')

@section('title', 'New Proposal')

@section('content')
<div class="max-w-2xl mx-auto px-8 py-8">

    {{-- Back link --}}
    <a href="{{ route('proposals.index') }}"
       class="inline-flex items-center gap-1.5 text-sm text-slate-500 hover:text-slate-700 transition-colors duration-200 mb-6"
       data-animate>
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
        </svg>
        Proposals
    </a>

    <h1 class="text-xl font-semibold text-slate-900 mb-6" data-animate>New proposal</h1>

    <form method="POST" action="{{ route('proposals.store') }}">
        @csrf

        {{-- Form card --}}
        <div class="bg-white border border-slate-100 rounded-xl p-8 space-y-8" data-animate>

            {{-- Section 1: Assignment --}}
            <div>
                <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-4">Assignment</p>
                <div class="grid grid-cols-2 gap-4">

                    <div>
                        <label for="client_id" class="block text-sm font-medium text-slate-700 mb-1.5">Client</label>
                        <select id="client_id" name="client_id"
                                class="w-full border border-slate-200 rounded-lg px-4 py-3 text-sm text-slate-900 focus:outline-none focus:border-slate-900 focus:ring-2 focus:ring-slate-900/10 transition-colors duration-200 @error('client_id') border-red-300 @enderror">
                            <option value="">— Select client —</option>
                            @foreach ($clients as $client)
                                <option value="{{ $client->id }}" {{ old('client_id', $selectedClientId ?? '') == $client->id ? 'selected' : '' }}>
                                    {{ $client->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('client_id')
                            <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="project_id" class="block text-sm font-medium text-slate-700 mb-1.5">Project</label>
                        <select id="project_id" name="project_id"
                                class="w-full border border-slate-200 rounded-lg px-4 py-3 text-sm text-slate-900 focus:outline-none focus:border-slate-900 focus:ring-2 focus:ring-slate-900/10 transition-colors duration-200 @error('project_id') border-red-300 @enderror">
                            <option value="">— Select project —</option>
                            @foreach ($projects as $project)
                                <option value="{{ $project->id }}" {{ old('project_id', $selectedProjectId ?? '') == $project->id ? 'selected' : '' }}>
                                    {{ $project->title }} — {{ $project->client->name ?? '' }}
                                </option>
                            @endforeach
                        </select>
                        @error('project_id')
                            <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                </div>
            </div>

            <div class="border-t border-slate-100"></div>

            {{-- Section 2: Value & timeline --}}
            <div>
                <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-4">Value &amp; timeline</p>
                <div class="grid grid-cols-2 gap-4">

                    <div>
                        <label for="amount" class="block text-sm font-medium text-slate-700 mb-1.5">Amount</label>
                        <input type="number" id="amount" name="amount" value="{{ old('amount') }}"
                               step="0.01" min="0.01"
                               class="w-full border border-slate-200 rounded-lg px-4 py-3 text-sm text-slate-900 focus:outline-none focus:border-slate-900 focus:ring-2 focus:ring-slate-900/10 transition-colors duration-200 @error('amount') border-red-300 @enderror"
                               placeholder="0.00">
                        @error('amount')
                            <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="currency" class="block text-sm font-medium text-slate-700 mb-1.5">Currency</label>
                        <select id="currency" name="currency"
                                class="w-full border border-slate-200 rounded-lg px-4 py-3 text-sm text-slate-900 focus:outline-none focus:border-slate-900 focus:ring-2 focus:ring-slate-900/10 transition-colors duration-200 @error('currency') border-red-300 @enderror">
                            @foreach ($currencies as $currency)
                                <option value="{{ $currency->value }}" {{ old('currency') === $currency->value ? 'selected' : '' }}>
                                    {{ $currency->symbol() }} {{ $currency->value }}
                                </option>
                            @endforeach
                        </select>
                        @error('currency')
                            <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="valid_until" class="block text-sm font-medium text-slate-700 mb-1.5">Valid until</label>
                        <input type="date" id="valid_until" name="valid_until" value="{{ old('valid_until') }}"
                               class="w-full border border-slate-200 rounded-lg px-4 py-3 text-sm text-slate-900 focus:outline-none focus:border-slate-900 focus:ring-2 focus:ring-slate-900/10 transition-colors duration-200 @error('valid_until') border-red-300 @enderror">
                        @error('valid_until')
                            <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="status" class="block text-sm font-medium text-slate-700 mb-1.5">Status</label>
                        <select id="status" name="status"
                                class="w-full border border-slate-200 rounded-lg px-4 py-3 text-sm text-slate-900 focus:outline-none focus:border-slate-900 focus:ring-2 focus:ring-slate-900/10 transition-colors duration-200 @error('status') border-red-300 @enderror">
                            @foreach ($statuses as $status)
                                <option value="{{ $status->value }}" {{ old('status') === $status->value ? 'selected' : '' }}>
                                    {{ ucfirst($status->value) }}
                                </option>
                            @endforeach
                        </select>
                        @error('status')
                            <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                </div>
            </div>

            <div class="border-t border-slate-100"></div>

            {{-- Section 3: Proposal details --}}
            <div>
                <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-4">Proposal details</p>
                <div class="space-y-4">

                    <div>
                        <label for="title" class="block text-sm font-medium text-slate-700 mb-1.5">Title</label>
                        <input type="text" id="title" name="title" value="{{ old('title') }}"
                               class="w-full border border-slate-200 rounded-lg px-4 py-3 text-sm text-slate-900 focus:outline-none focus:border-slate-900 focus:ring-2 focus:ring-slate-900/10 transition-colors duration-200 @error('title') border-red-300 @enderror"
                               placeholder="e.g. E-commerce Platform Redesign — Proposal">
                        @error('title')
                            <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="scope" class="block text-sm font-medium text-slate-700 mb-1.5">Scope of work</label>
                        <textarea id="scope" name="scope" rows="6"
                                  class="w-full border border-slate-200 rounded-lg px-4 py-3 text-sm text-slate-900 focus:outline-none focus:border-slate-900 focus:ring-2 focus:ring-slate-900/10 transition-colors duration-200 @error('scope') border-red-300 @enderror"
                                  placeholder="Describe the full scope of work...">{{ old('scope') }}</textarea>
                        @error('scope')
                            <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="notes" class="block text-sm font-medium text-slate-700 mb-1.5">
                            Notes <span class="text-slate-400 font-normal">(optional)</span>
                        </label>
                        <textarea id="notes" name="notes" rows="3"
                                  class="w-full border border-slate-200 rounded-lg px-4 py-3 text-sm text-slate-900 focus:outline-none focus:border-slate-900 focus:ring-2 focus:ring-slate-900/10 transition-colors duration-200 @error('notes') border-red-300 @enderror"
                                  placeholder="Internal notes about this proposal...">{{ old('notes') }}</textarea>
                        @error('notes')
                            <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                </div>
            </div>

            {{-- Contract Terms (collapsible) --}}
            <div class="border-t border-slate-100 pt-6 mt-2" x-data="{ open: false }">
                <button type="button"
                        @click="open = !open"
                        class="flex items-center gap-2 text-xs font-semibold text-slate-400 uppercase tracking-wider hover:text-slate-600 transition-colors w-full text-left mb-4">
                    <svg class="w-3 h-3 transition-transform duration-200" :class="open ? 'rotate-90' : ''" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
                    </svg>
                    Contract Terms
                    <span class="font-normal normal-case text-slate-300">(optional — uses defaults if empty)</span>
                </button>
                <div x-show="open" x-transition class="space-y-4">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label for="revision_rounds" class="block text-sm font-medium text-slate-700 mb-1">Revision Rounds</label>
                            <input type="number" id="revision_rounds" name="revision_rounds" min="0" max="99"
                                   value="{{ old('revision_rounds', 2) }}"
                                   class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-700 focus:border-transparent">
                        </div>
                        <div>
                            <label for="support_weeks" class="block text-sm font-medium text-slate-700 mb-1">Post-Launch Support (weeks)</label>
                            <input type="number" id="support_weeks" name="support_weeks" min="0" max="99"
                                   value="{{ old('support_weeks', 2) }}"
                                   class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-700 focus:border-transparent">
                        </div>
                        <div>
                            <label for="emergency_support_months" class="block text-sm font-medium text-slate-700 mb-1">Emergency Support (months)</label>
                            <input type="number" id="emergency_support_months" name="emergency_support_months" min="0" max="99"
                                   value="{{ old('emergency_support_months', 3) }}"
                                   class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-700 focus:border-transparent">
                        </div>
                        <div>
                            <label for="late_payment_penalty_pct" class="block text-sm font-medium text-slate-700 mb-1">Late Payment Penalty (%)</label>
                            <input type="number" id="late_payment_penalty_pct" name="late_payment_penalty_pct" min="0" max="100" step="0.01"
                                   value="{{ old('late_payment_penalty_pct', 10) }}"
                                   class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-700 focus:border-transparent">
                        </div>
                        <div>
                            <label for="late_payment_days" class="block text-sm font-medium text-slate-700 mb-1">Grace Period (days)</label>
                            <input type="number" id="late_payment_days" name="late_payment_days" min="1" max="90"
                                   value="{{ old('late_payment_days', 7) }}"
                                   class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-700 focus:border-transparent">
                        </div>
                        <div>
                            <label for="governing_law" class="block text-sm font-medium text-slate-700 mb-1">Governing Law</label>
                            <input type="text" id="governing_law" name="governing_law"
                                   value="{{ old('governing_law', 'United Kingdom') }}"
                                   class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-700 focus:border-transparent">
                        </div>
                    </div>
                    <div>
                        <label for="ip_ownership_note" class="block text-sm font-medium text-slate-700 mb-1">IP Ownership Note</label>
                        <textarea id="ip_ownership_note" name="ip_ownership_note" rows="3"
                                  class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-700 focus:border-transparent resize-none">{{ old('ip_ownership_note', 'Upon full payment, the Client is granted full ownership of the final deliverables, source code, and exported assets.') }}</textarea>
                    </div>
                    <div>
                        <label for="payment_terms_notes" class="block text-sm font-medium text-slate-700 mb-1">
                            Payment Terms Notes
                            <span class="text-slate-400 font-normal">(optional, free text)</span>
                        </label>
                        <textarea id="payment_terms_notes" name="payment_terms_notes" rows="3"
                                  placeholder="Any additional payment terms or conditions…"
                                  class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-700 focus:border-transparent resize-none">{{ old('payment_terms_notes', '') }}</textarea>
                    </div>
                </div>
            </div>

        </div>

        {{-- Footer --}}
        <div class="flex items-center justify-between mt-6" data-animate>
            <a href="{{ route('proposals.index') }}"
               class="border border-slate-200 text-slate-600 rounded-lg px-4 py-2 text-sm font-medium hover:bg-slate-50 transition-all duration-200 cursor-pointer">
                Cancel
            </a>
            <button type="submit"
                    class="bg-sky-700 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:opacity-90 transition-all duration-200 cursor-pointer">
                Create proposal
            </button>
        </div>

    </form>
</div>

<script>
(function() {
  var prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (prefersReduced) return;
  var Motion = window.Motion;
  if (!Motion) return;

  // Page elements fade+slide in
  var els = document.querySelectorAll('[data-animate]');
  if (els.length) {
    Motion.animate(els, { opacity: [0, 1], y: [16, 0] }, { delay: Motion.stagger(0.07), duration: 0.25, easing: 'ease-out' });
  }

  // Focus animation: expand ring on focus
  document.querySelectorAll('input,select,textarea').forEach(function(el) {
    el.addEventListener('focus', function() {
      Motion.animate(el, { scale: [1, 1.005] }, { duration: 0.15, easing: 'ease-out' });
    });
    el.addEventListener('blur', function() {
      Motion.animate(el, { scale: [1.005, 1] }, { duration: 0.15, easing: 'ease-out' });
    });
  });
})();
</script>
@endsection