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

@section('content')
    <div class="max-w-6xl mx-auto">

        @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 class="flex flex-col lg:flex-row gap-8">
            <!-- Introduction Section -->
            <x-tickets.introduction-create />
            <!-- List of Machines in Progress -->
            <div class="w-full lg:w-1/3 bg-white p-6 rounded-lg shadow-md mb-8 flex flex-col">
                <h2 class="text-2xl font-bold text-gray-800 mb-4">List of Machines in Progress</h2>
                <p class="text-gray-600 mb-4">
                    Here you can find the list of machines that are currently being processed.
                </p>
                <div class="flex-1 overflow-y-auto" style="max-height: 200px;">
                    @foreach ($listDrafts as $draft)
                        <div class="bg-gray-100 rounded-lg p-4 mb-4 flex items-center justify-between shadow">
                            <div>
                                <div class="text-sm font-semibold text-gray-800">
                                    {{ $draft->request->machine_details['generalInfo']['machine_name'] }}</div>
                                <div class="text-sm text-gray-600">type: {{ $draft->request->machine_type }}</div>
                                <div class="text-xs text-gray-500">draft
                                    at: {{ $draft->created_at->format('Y-m-d H:i') }}</div>
                            </div>
                            <div class="flex gap-2">
                                <a href="{{ route('sell-forms.drafts.edit', $draft->id) }}"
                                   class="text-blue-600 hover:underline text-sm m-auto">Edit</a>

                                <div x-data>
                                    <form x-ref="deleteForm" method="POST"
                                          action="{{ route('sell-forms.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="block w-full px-4 py-2 text-sm text-left text-red-600 hover:bg-red-50 dark:hover:bg-gray-700"
                                    >
                                        Delete
                                    </x-confirm-button>
                                </div>


                            </div>
                        </div>
                    @endforeach
                    @if ($listDrafts->isEmpty())
                        <div class="text-gray-500 text-sm">No machines in progress.</div>
                    @else
                        <div x-data>
                            <form x-ref="submitDraftsForm" method="POST"
                                  action="{{ route('sell-forms.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="bg-main-one text-white px-4 py-2 rounded text-center hover:bg-main-two w-full"
                            >
                                Submit all draft tickets
                            </x-confirm-button>
                        </div>
                    @endif
                </div>
            </div>
        </div>
        <!-- Form Container -->
        <div class="bg-white p-8 rounded-lg shadow-md">
            <livewire:sale-tickets.create.sale-main-form :show-step="$showStep"/>
        </div>
    </div>
@endsection