@extends('layouts.buy-and-sell.general-form')

@section('content')
    <div class="min-h-screen dark:bg-gray-900 py-6 px-4">
        <div class="mx-auto">
            {{-- Alerts --}}
            @if (session('success'))
                <x-alert title="{{ session('success') }}" positive solid/>
            @endif
            @if (session('error'))
                <x-alert title="{{ session('error') }}" negative solid/>
            @endif

            {{-- Back Button --}}
            <div class="mb-6">
                <div class="mb-4">
                    <a href="{{ route('buy-tickets.create') }}"
                       class="inline-flex items-center gap-2 text-gray-700 hover:text-main-one transition-colors">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                             stroke="currentColor" class="w-5 h-5">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                  d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"/>
                        </svg>
                        <span class="font-medium">{{ __('Back to tickets') }}</span>
                    </a>
                </div>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-1 gap-6">
                <div class="lg:col-span-1">
                    {{-- Title Section --}}
                    <div class="bg-m-yellow dark:bg-gray-800 rounded-lg shadow-md p-6 mb-6">
                        <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">
                            {{ __('Edit Purchase Ticket Draft') }}
                        </h1>
                        <p class="text-gray-600 dark:text-gray-400">
                            {{ __('You are editing a draft purchase ticket. Please review and complete the details below.') }}
                        </p>
                    </div>

                    {{-- Ticket Details --}}
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                        <div class="dark:prose-invert">
                            <livewire:buy-tickets.edit-buy-ticket.edit-buy-form
                                :buyTicket="$ticket"
                                edit-context="draft"
                            />

                            {{-- Back Button --}}
                            <div class="mt-6 lg:mt-0 lg:-translate-y-10 lg:inline-block">
                                <a href="{{ route('buy-tickets.create', ['view' => 'buy-form-step']) }}"
                                   class="w-full lg:w-auto btn btn-secondary px-4 py-3 bg-gray-200 rounded dark:bg-gray-700 inline-flex items-center justify-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                         stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-2">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                              d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"/>
                                    </svg>
                                    {{ __('Back to create ticket') }}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection