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

@section('content')
    <div class="tw-wrapper">
        <div class="max-w-7xl mx-auto px-4 sm:px-0 mt-6 mb-12">

            <div class="mb-4">
                <div class="tw-wrapper">
                    @if (session()->has('success'))
                        <x-alert :title="session('success')" positive squared />
                    @endif
                    @if (session()->has('error'))
                        <x-alert :title="session('error')" negative squared />
                    @endif
                    @if (session()->has('warning'))
                        <x-alert :title="session('warning')" warning squared />
                    @endif
                </div>
            </div>

            <x-tickets.introduction-create />

            <div
                class="flex flex-col-reverse lg:flex-row gap-6 lg:gap-0 lg:bg-white lg:rounded-2xl lg:shadow-xl lg:border lg:border-gray-100 lg:overflow-hidden">

                <div
                    class="flex-1 flex flex-col bg-white rounded-2xl shadow-md border border-gray-100 lg:bg-transparent lg:rounded-none lg:shadow-none lg:border-0 lg:border-r lg:border-gray-100">
                    <livewire:sale-ticket.create.sale-ticket-create-form />
                </div>

                <div
                    class="w-full lg:w-80 flex flex-col p-6 bg-white lg:bg-[#F8FAFC] rounded-2xl shadow-md border border-gray-100 lg:rounded-none lg:shadow-none lg:border-0">

                    <h3 class="text-xl font-bold text-gray-700 uppercase tracking-wider mb-6">Active Drafts</h3>

                    @if ($listDrafts->isEmpty())
                        <div
                            class="flex flex-col items-center justify-center text-center p-2 mt-4 bg-white rounded-xl shadow-sm border border-gray-100">
                            <img src="{{ asset('images/resource/empty_draft.png') }}"
                                alt="Empty Drafts - Create your first machine listing" class="w-100 mb-3 opacity-80">
                            <h4 class="font-bold text-gray-800 mb-1 text-xl">Draft list empty.</h4>
                            <p class="text-xs text-gray-500 mb-4">Ready to register your next used machinery or loom draft?
                            </p>
                        </div>
                    @else
                        <div class="space-y-3 overflow-y-auto max-h-[550px] pr-2 custom-scrollbar">
                            @foreach ($listDrafts as $draft)
                                <div
                                    class="bg-white rounded-lg p-4 shadow-sm border border-gray-100 transition-all hover:shadow-md">
                                    <div class="flex justify-between items-start mb-2">
                                        <div>
                                            <h4 class="text-gray-800 text-sm truncate w-36">
                                                {{ $draft->request->machine_details['generalInfo']['machine_name'] ?? 'Untitled Machine' }}
                                            </h4>
                                            <p class="text-xs text-gray-500 mt-1">
                                                {{ $draft->created_at->format('d M Y, H:i') }}
                                            </p>
                                        </div>
                                        <span
                                            class="inline-flex items-center gap-1.5 py-1 px-2 rounded-md text-[10px] font-bold uppercase bg-amber-50 text-amber-600 border border-amber-200">
                                            <span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span> Draft
                                        </span>
                                    </div>

                                    <div class="flex items-center justify-between mt-3 pt-3 border-t border-gray-50">
                                        <p class="text-xs text-gray-400 truncate">{{ $draft->request->machine_type }}</p>
                                        <div class="flex gap-2">

                                            <a href="{{ route('sale-tickets.drafts.edit', $draft->id) }}"
                                                class="flex items-center justify-center w-9 h-9 rounded-md border border-blue-200 text-blue-600 bg-blue-50 hover:bg-blue-100 hover:border-blue-300 transition"
                                                title="Edit draft">
                                                <i class="ti ti-pencil text-lg"></i>
                                            </a>

                                            <div x-data>
                                                <form x-ref="deleteForm" method="POST"
                                                    action="{{ route('sale-tickets.drafts.destroy', $draft->id) }}">
                                                    @csrf @method('DELETE')
                                                </form>

                                                <x-confirm-button type="warning" title="Are you sure?"
                                                    description="This will permanently delete the ticket. This action cannot be undone."
                                                    acceptLabel="Yes, delete it" acceptColor="red" form-ref="deleteForm"
                                                    class="flex items-center justify-center w-9 h-9 rounded-md border border-red-200 text-red-600 bg-red-50 hover:bg-red-100 hover:border-red-300 transition">
                                                    <i class="ti ti-trash text-lg"></i>
                                                </x-confirm-button>


                                            </div>

                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <div class="mt-6 pt-4 border-t border-gray-200" x-data>
                            <form x-ref="submitDraftsForm" method="POST"
                                action="{{ route('sale-tickets.drafts.submit-for-review') }}" class="hidden">
                                @csrf
                            </form>

                            <x-confirm-button type="warning" title="Submit all draft tickets?"
                                description="Are you sure you want to submit all draft tickets for review?"
                                acceptLabel="Yes, submit" acceptColor="green" form-ref="submitDraftsForm"
                                class="w-full bg-[#15803d] text-white px-4 py-2.5 rounded-lg text-sm font-medium hover:bg-[#166534] transition-colors flex justify-center items-center">
                                Submit all draft tickets
                            </x-confirm-button>

                        </div>
                    @endif
                </div>

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