@extends('layouts.purchase-and-sale.general-form')

@section('content')
    <div class="min-h-screen  dark:bg-gray-900 py-6 px-4">

        <div class="mx-auto">
            {{-- -------------  ALERTS THIS VIEW  ---------------------------------------------------------- --}}
            <div class="tw-wrapper">
                @if (session('success'))
                    <x-alert title="{{ session('success') }}" positive solid />
                @endif
                @if (session('error'))
                    <x-alert title="{{ session('error') }}" negative solid />
                @endif
            </div>
            {{-- -------------  END ALERTS THIS VIEW  ---------------------------------------------------------- --}}
            <div class="mb-6">


                <div class="flex-1 bg-white p-8 rounded-lg shadow-md mb-8 border-l-4 border-amber-500">
                    <div class="flex flex-col md:flex-row items-center gap-10">
                        <div class="flex-1 md:w-2/3">
                            <a href="{{ route('sale-tickets.create', ['view' => 'machine-type-step']) }}"
                                class="inline-flex items-center text-sm font-medium text-gray-500 hover:text-main-color transition-colors mb-6 group">
                                <i
                                    class="ti ti-arrow-back-up mr-2 text-xl group-hover:-translate-x-1 transition-transform"></i>
                                {{ __('Back to Create Ticket') }}
                            </a>

                            <h1 class="text-3xl font-bold text-main-color mb-2 text-center md:text-left uppercase">
                                {{ __('Continue your Request') }}
                            </h1>
                            <h2
                                class="text-xl text-amber-600 mb-6 text-center md:text-left flex items-center justify-center md:justify-start gap-2">
                                <i class="ti ti-file-pencil"></i>
                                {{ __('Editing Draft Ticket') }}
                            </h2>

                            <p class="text-gray-600 mb-4 text-center md:text-left font-medium">
                                {{ __('You have a pending machinery request. Review the information already entered and complete the missing details:') }}
                            </p>

                            <ul class="space-y-3 text-gray-600 text-left md:pl-2">
                                <li class="flex items-start gap-3">
                                    <i class="ti ti-rotate text-amber-500 text-xl flex-shrink-0 mt-0.5"></i>
                                    <span>{{ __('Check that all technical specifications remain accurate.') }}</span>
                                </li>
                                <li class="flex items-start gap-3">
                                    <i class="ti ti-photo-edit text-amber-500 text-xl flex-shrink-0 mt-0.5"></i>
                                    <span>{{ __('You can update images or machine descriptions before final submission.') }}</span>
                                </li>
                                <li class="flex items-start gap-3">
                                    <i class="ti ti-alert-circle text-amber-500 text-xl flex-shrink-0 mt-0.5"></i>
                                    <span>{{ __('Remember that this draft is not visible to ITG Machinery until you click "Submit".') }}</span>
                                </li>
                            </ul>

                            <p class="mt-8 text-gray-500 text-sm italic text-center md:text-left">
                                {{ __('Your progress is being saved. Take your time to ensure all data is correct.') }}
                            </p>
                        </div>

                        <div class="flex-1 md:w-1/3 flex items-center justify-center p-4">
                            <div class="relative">
                                <img src="{{ asset('images/resource/image_machine_itg.png') }}"
                                    alt="ITG Weaving Loom Machine"
                                    class="max-w-full h-auto rounded-lg drop-shadow-lg opacity-80">
                                <span
                                    class="absolute top-4 right-4 bg-amber-100 text-amber-700 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider shadow-sm border border-amber-200">
                                    Draft Mode
                                </span>

                            </div>
                        </div>
                    </div>
                </div>


            </div>
            <div class="grid grid-cols-1 lg:grid-cols-1 gap-6">


                <div class="lg:col-span-2 space-y-6">
                    <!-- Detalles del Ticket -------------------------------------------------------------------------->
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                        <div class=" dark:prose-invert">
                            <livewire:sale-ticket.edit.sale-ticket-edit-form :saleTicket="$ticket" edit-context="draft" />


                            <!-- button back -->
                            <div class="mt-6 lg:mt-0 lg:-translate-y-10 lg:inline-block">
                                <a href="{{ route('sale-tickets.create', ['view' => 'machine-type-step']) }}"
                                    class=" w-full lg:w-auto  group inline-flex items-center justify-center px-5 py-2.5 text-sm font-semibold text-red-500 transition-all duration-200 bg-white border border-red-400 rounded-lg hover:bg-gray-50 hover:text-red-600 hover:border-red-40000 shadow-sm ">

                                    <i
                                        class="ti ti-arrow-left mr-2 text-lg transition-transform group-hover:-translate-x-1"></i>

                                    <span>{{ __('Back to Create Ticket') }}</span>
                                </a>
                            </div>

                        </div>
                    </div>

                    <!-- Sección de Multimedia ------------------------------------------------------------------------>
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                        <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">
                            Multimedia
                        </h2>
                        <!-- Grid para fotos -------------------------------------------------------------------------->
                        <livewire:sale-ticket.edit.sections.sale-ticket-photo-list :ticket="$ticket" status="draft" />


                        <!-- Sección de video si existe -->
                        <livewire:sale-ticket.edit.sections.sale-ticket-video-list :ticket="$ticket" status="draft" />

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection