@extends('layouts.admin')

@section('header', 'Import Plates')

@section('content')
    <div class="max-w-2xl mx-auto bg-white rounded-lg shadow p-6" x-data="{ fileName: '', vatChecked: true }">
        <form action="{{ route('admin.import.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf

            <div>
                <label for="site" class="block text-sm font-medium text-gray-700">Select Site</label>

                @if (auth()->user()->role->name === 'Admin')
                    <select id="site" name="site_id" required
                        class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
                        <option value="">[Please select]</option>
                        @foreach ($sites as $site)
                            <option value="{{ $site->id }}" {{ request('site_id') == $site->id ? 'selected' : '' }}>
                                {{ $site->name }}
                            </option>
                        @endforeach
                    </select>
                @else
                    <input type="hidden" name="site_id" value="{{ auth()->user()->site_id }}">
                    <div class="mt-1 block w-full py-2 text-base sm:text-sm text-gray-900">
                        Importing for: <strong>{{ auth()->user()->site->name }}</strong>
                    </div>
                @endif
            </div>

            <div>
                <label for="plate_type_id" class="block text-sm font-medium text-gray-700">Plate Type</label>
                <select id="plate_type_id" name="plate_type_id" required
                    @change="
                        let text = $event.target.options[$event.target.selectedIndex].text.toLowerCase();
                        if(text.includes('stock')) vatChecked = true;
                        if(text.includes('commission')) vatChecked = false;
                    "
                    class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
                    <option value="">[Please select]</option>
                    @foreach ($plateTypes as $type)
                        <option value="{{ $type->id }}">{{ $type->name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="flex items-start">
                <div class="flex items-center h-5">
                    <input id="add_vat" name="add_vat" type="checkbox" value="1" x-model="vatChecked"
                        class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
                </div>
                <div class="ml-3 text-sm">
                    <label for="add_vat" class="font-medium text-gray-700">Add VAT?</label>
                    <p class="text-gray-500">If checked, VAT (20%) will be added to the base price.</p>
                </div>
            </div>

            <div x-data="{ isDropping: false }">
                <label for="file" class="block text-sm font-medium text-gray-700">Upload File (CSV, Excel)</label>
                <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-dashed rounded-md transition-colors duration-200"
                    :class="isDropping ? 'border-blue-400 bg-blue-50' : 'border-gray-300'"
                    @dragover.prevent="isDropping = true" @dragleave.prevent="isDropping = false"
                    @drop.prevent="
                        isDropping = false;
                        if ($event.dataTransfer.files.length > 0) {
                            $refs.fileInput.files = $event.dataTransfer.files;
                            fileName = $event.dataTransfer.files[0].name;
                        }
                    ">
                    <div class="space-y-1 text-center">
                        <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none"
                            viewBox="0 0 48 48" aria-hidden="true">
                            <path
                                d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        <div class="flex text-sm text-gray-600 justify-center">
                            <label for="file"
                                class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-500">
                                <span x-text="fileName ? 'Change file' : 'Upload a file'">Upload a file</span>
                                <input id="file" name="file" type="file" class="sr-only" required
                                    x-ref="fileInput" @change="fileName = $event.target.files[0].name">
                            </label>
                            <p class="pl-1" x-show="!fileName">or drag and drop</p>
                        </div>
                        <p class="text-sm text-gray-900 font-medium" x-show="fileName" x-text="fileName"></p>
                        <p class="text-xs text-gray-500" x-show="!fileName">
                            CSV, XLS, XLSX up to 10MB
                        </p>
                    </div>
                </div>
            </div>

            <div>
                <button type="submit"
                    class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                    Start Import
                </button>
            </div>
        </form>
    </div>
@endsection