@extends('layouts.admin')

@section('header', 'Create New Site')

@section('content')
    <div class="bg-white rounded-lg shadow overflow-hidden">
        <div class="p-6">
            <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
                Enter Site Details
            </h3>

            @if ($errors->any())
                <div class="mb-4 bg-red-50 border-l-4 border-red-400 p-4">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                                fill="currentColor">
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                                    clip-rule="evenodd" />
                            </svg>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-red-800">
                                There were errors with your submission
                            </h3>
                            <div class="mt-2 text-sm text-red-700">
                                <ul class="list-disc pl-5 space-y-1">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            <form action="{{ route('admin.sites.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="grid grid-cols-1 gap-6">
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700">Site Name</label>
                        <input type="text" name="name" id="name" value="{{ old('name') }}" required
                            class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md p-2 border">
                    </div>

                    <div>
                        <label for="logo" class="block text-sm font-medium text-gray-700">Logo (optional)</label>
                        <input type="file" name="logo" id="logo"
                            class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                    </div>

                    <fieldset class="border border-gray-300 rounded-lg p-6 bg-gray-50">
                        <legend class="text-lg font-medium text-gray-900 px-2">Linking to your site</legend>
                        <p class="text-sm text-gray-500 mb-6 px-2">Configure how the application constructs links to your
                            external website.</p>

                        <div class="space-y-6">
                            <!-- Base URL -->
                            <div class="relative" x-data="{ open: false }">
                                <div class="flex items-center mb-1">
                                    <label for="url" class="block text-sm font-medium text-gray-700">Base URL</label>
                                    <button type="button" @mouseenter="open = true" @mouseleave="open = false"
                                        class="ml-2 text-gray-400 hover:text-blue-500 focus:outline-none">
                                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                        </svg>
                                    </button>
                                    <div x-show="open" style="display: none;" x-transition:enter="transition ease-out duration-200"
                                        x-transition:enter-start="opacity-0 translate-y-1"
                                        x-transition:enter-end="opacity-100 translate-y-0"
                                        x-transition:leave="transition ease-in duration-150"
                                        x-transition:leave-start="opacity-100 translate-y-0"
                                        x-transition:leave-end="opacity-0 translate-y-1"
                                        class="absolute left-0 bottom-full mb-2 w-72 p-4 bg-white rounded-lg shadow-xl border border-gray-100 z-50 text-sm text-gray-600">
                                        <div class="font-semibold text-gray-900 mb-1">Base URL</div>
                                        <p>The main homepage URL of your website. This is used as the root for all links
                                            directed to your site.</p>
                                        <div class="mt-2 text-xs bg-gray-100 p-2 rounded">Example: https://example.com</div>
                                        <div
                                            class="absolute bottom-[-6px] left-4 w-3 h-3 bg-white border-b border-r border-gray-100 transform rotate-45">
                                        </div>
                                    </div>
                                </div>
                                <input type="url" name="url" id="url" value="{{ old('url') }}" required
                                    class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md p-2 border"
                                    placeholder="https://example.com">
                                <p class="mt-1 text-xs text-gray-500">The full URL of your website's homepage.</p>
                            </div>

                            <!-- Search URL Pattern -->
                            <div class="relative" x-data="{ open: false }">
                                <div class="flex items-center mb-1">
                                    <label for="search_url" class="block text-sm font-medium text-gray-700">Search URL
                                        Pattern <span class="text-gray-400 font-normal">(optional)</span></label>
                                    <button type="button" @mouseenter="open = true" @mouseleave="open = false"
                                        class="ml-2 text-gray-400 hover:text-blue-500 focus:outline-none">
                                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                        </svg>
                                    </button>
                                    <div x-show="open" style="display: none;" x-transition:enter="transition ease-out duration-200"
                                        x-transition:enter-start="opacity-0 translate-y-1"
                                        x-transition:enter-end="opacity-100 translate-y-0"
                                        x-transition:leave="transition ease-in duration-150"
                                        x-transition:leave-start="opacity-100 translate-y-0"
                                        x-transition:leave-end="opacity-0 translate-y-1"
                                        class="absolute left-0 bottom-full mb-2 w-80 p-4 bg-white rounded-lg shadow-xl border border-gray-100 z-50 text-sm text-gray-600">
                                        <div class="font-semibold text-gray-900 mb-1">Search URL Pattern</div>
                                        <p>Defines how we link to specific search results or plate pages.</p>
                                        <p class="mt-1">Use <code
                                                class="bg-gray-100 px-1 rounded text-pink-600">[term]</code> as the
                                            placeholder for the registration number.</p>
                                        <div class="mt-2 text-xs bg-gray-100 p-2 rounded">
                                            Example: /search?q=[term]<br>
                                            Result: https://site.com/search?q=A1BC
                                        </div>
                                        <div
                                            class="absolute bottom-[-6px] left-4 w-3 h-3 bg-white border-b border-r border-gray-100 transform rotate-45">
                                        </div>
                                    </div>
                                </div>
                                <input type="text" name="search_url" id="search_url" value="{{ old('search_url') }}"
                                    class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md p-2 border"
                                    placeholder="/search?q=[term]">
                                <p class="mt-1 text-xs text-gray-500">Pattern to construct links to specific plates. Use
                                    [term] as placeholder.</p>
                            </div>

                            <!-- Feed URL -->
                            <div class="relative" x-data="{ open: false }">
                                <div class="flex items-center mb-1">
                                    <label for="feed_url" class="block text-sm font-medium text-gray-700">Stock Feed URL
                                        <span class="text-gray-400 font-normal">(optional)</span></label>
                                    <button type="button" @mouseenter="open = true" @mouseleave="open = false"
                                        class="ml-2 text-gray-400 hover:text-blue-500 focus:outline-none">
                                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                        </svg>
                                    </button>
                                    <div x-show="open" style="display: none;" x-transition:enter="transition ease-out duration-200"
                                        x-transition:enter-start="opacity-0 translate-y-1"
                                        x-transition:enter-end="opacity-100 translate-y-0"
                                        x-transition:leave="transition ease-in duration-150"
                                        x-transition:leave-start="opacity-100 translate-y-0"
                                        x-transition:leave-end="opacity-0 translate-y-1"
                                        class="absolute left-0 bottom-full mb-2 w-80 p-4 bg-white rounded-lg shadow-xl border border-gray-100 z-50 text-sm text-gray-600">
                                        <div class="font-semibold text-gray-900 mb-1">Stock Feed URL</div>
                                        <p>The API endpoint to automatically import plates for this site on a daily basis.</p>
                                        <div
                                            class="absolute bottom-[-6px] left-4 w-3 h-3 bg-white border-b border-r border-gray-100 transform rotate-45">
                                        </div>
                                    </div>
                                </div>
                                <input type="url" name="feed_url" id="feed_url" value="{{ old('feed_url') }}"
                                    class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md p-2 border"
                                    placeholder="https://example.com/api/feed/plates">
                                <p class="mt-1 text-xs text-gray-500">URL to the JSON stock feed.</p>
                            </div>


                            <!-- Space Character -->
                            <div class="relative" x-data="{ open: false }">
                                <div class="flex items-center mb-1">
                                    <label for="space_char" class="block text-sm font-medium text-gray-700">Space
                                        Character</label>
                                    <button type="button" @mouseenter="open = true" @mouseleave="open = false"
                                        class="ml-2 text-gray-400 hover:text-blue-500 focus:outline-none">
                                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                        </svg>
                                    </button>
                                    <div x-show="open" style="display: none;" x-transition:enter="transition ease-out duration-200"
                                        x-transition:enter-start="opacity-0 translate-y-1"
                                        x-transition:enter-end="opacity-100 translate-y-0"
                                        x-transition:leave="transition ease-in duration-150"
                                        x-transition:leave-start="opacity-100 translate-y-0"
                                        x-transition:leave-end="opacity-0 translate-y-1"
                                        class="absolute left-0 bottom-full mb-2 w-72 p-4 bg-white rounded-lg shadow-xl border border-gray-100 z-50 text-sm text-gray-600">
                                        <div class="font-semibold text-gray-900 mb-1">Space Character</div>
                                        <p>Select how spaces in registration numbers should be handled in the URL.</p>
                                        <ul class="mt-2 list-disc list-inside text-xs space-y-1">
                                            <li><strong>Space</strong>: Keep as is (becomes %20)</li>
                                            <li><strong>Dash</strong>: Replace with hyphens (A1 BCD -> A1-BCD)</li>
                                            <li><strong>Plus</strong>: Replace with plus signs (A1 BCD -> A1+BCD)</li>
                                        </ul>
                                        <div
                                            class="absolute bottom-[-6px] left-4 w-3 h-3 bg-white border-b border-r border-gray-100 transform rotate-45">
                                        </div>
                                    </div>
                                </div>
                                <select name="space_char" id="space_char" required
                                    class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                                    <option value=" " {{ old('space_char') == ' ' ? 'selected' : '' }}>Space (Default)
                                    </option>
                                    <option value="-" {{ old('space_char') == '-' ? 'selected' : '' }}>Dash (-)
                                    </option>
                                    <option value="+" {{ old('space_char') == '+' ? 'selected' : '' }}>Plus (+)
                                    </option>
                                </select>
                                <p class="mt-1 text-xs text-gray-500">Character used to replace spaces in generated URLs.
                                </p>
                            </div>
                        </div>
                    </fieldset>





                    <div class="flex justify-end">
                        <a href="{{ route('admin.sites.index') }}"
                            class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 mr-2">
                            Cancel
                        </a>
                        <button type="submit"
                            class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                            Create Site
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection