@extends('layouts.dashboard.inface', ['section' => 'properties'])
@section('extra-styles')
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }

        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }

        .material-symbols-outlined.fill {
            font-variation-settings: 'FILL' 1;
        }

        .form-section {
            @apply bg-white dark:bg-[#1e2030] p-6 rounded-xl border border-[#e5e7eb] dark:border-[#2d2f45] shadow-sm;
        }

        .label-text {
            @apply block text-sm font-semibold text-[#111218] dark:text-gray-200 mb-1.5;
        }

        .input-field {
            @apply w-full h-11 px-4 rounded-lg border border-[#e5e7eb] dark:border-[#4b5563] bg-gray-50 dark:bg-[#2d2f45] text-[#111218] dark:text-white placeholder-[#9ca3af] focus:outline-none focus:ring-2 focus:ring-primary/50 text-sm transition-all;
        }

        .select-field {
            @apply w-full h-11 pl-4 pr-10 rounded-lg border border-[#e5e7eb] dark:border-[#4b5563] bg-gray-50 dark:bg-[#2d2f45] text-[#111218] dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 appearance-none cursor-pointer transition-all;
        }
    </style>
@endsection

@section('content')
    <div class="flex-1 overflow-y-auto bg-background-light dark:bg-background-dark p-6 lg:p-10">
        <div class="max-w-4xl mx-auto flex flex-col gap-8 pb-20">
            <div class="flex flex-col gap-2">
                <nav class="flex items-center gap-2 text-sm text-[#616589] dark:text-gray-400">
                    <a class="hover:text-primary transition-colors" href="#">Inventory</a>
                    <span class="material-symbols-outlined text-base">chevron_right</span>
                    <span class="text-[#111218] dark:text-white font-medium">Add New Property</span>
                </nav>
                <h1 class="text-3xl font-bold text-[#111218] dark:text-white tracking-tight">Create New Property
                </h1>
                <p class="text-[#616589] dark:text-gray-400">Enter the details to list a new unit or lot in the
                    inventory.</p>
            </div>
            <form class="flex flex-col gap-6">
                <div class="form-section">
                    <div class="flex items-center gap-2 mb-6 text-primary">
                        <span class="material-symbols-outlined text-2xl">info</span>
                        <h2 class="text-lg font-bold text-[#111218] dark:text-white">Basic Information</h2>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div class="space-y-1.5">
                            <label class="form-label-custom" for="property_id">Identificador #</label>
                            <input class="form-input-custom" id="property_id" placeholder="e.g. Agua-Dulce-L1M1"
                                type="text" />
                        </div>
                        <div class="space-y-1.5">
                            <label class="form-label-custom" for="development">Development</label>

                            <select class="form-input-custom appearance-none" id="development">
                                <option value="">Select Development</option>
                                <option>Cielo Vista Towers</option>
                                <option>Marina Blue</option>
                                <option>Centro Historico Lofts</option>
                            </select>

                        </div>

                        <div class="space-y-1.5">
                            <label class="form-label-custom" for="property_type">Property Type</label>

                            <select class="form-input-custom appearance-none" id="property_type">
                                <option value="">Select Type</option>
                                <option>Residencial</option>
                                <option>Commercial</option>
                                <option>Land / Lot</option>
                                <option>Industrial</option>
                            </select>

                        </div>
                    </div>
                </div>
                <div class="form-section">
                    <div class="flex items-center gap-2 mb-6 text-primary">
                        <span class="material-symbols-outlined text-2xl">grid_view</span>
                        <h2 class="text-lg font-bold text-[#111218] dark:text-white">Details &amp; Features</h2>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                        <div>
                            <label class="label-text" for="size">Size (m²)</label>
                            <input class="input-field" id="size" placeholder="0.00" type="number" />
                        </div>
                        <div>
                            <label class="label-text" for="bedrooms">Bedrooms</label>
                            <input class="input-field" id="bedrooms" placeholder="0" type="number" />
                        </div>
                        <div>
                            <label class="label-text" for="bathrooms">Bathrooms</label>
                            <input class="input-field" id="bathrooms" placeholder="0" step="0.5" type="number" />
                        </div>
                    </div>
                    <div>
                        <label class="label-text mb-3">Amenities</label>
                        <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
                            <label class="flex items-center gap-2 cursor-pointer group">
                                <input class="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary"
                                    type="checkbox" />
                                <span
                                    class="text-sm text-[#616589] dark:text-gray-400 group-hover:text-[#111218] dark:group-hover:text-white transition-colors">Pool</span>
                            </label>
                            <label class="flex items-center gap-2 cursor-pointer group">
                                <input class="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary"
                                    type="checkbox" />
                                <span
                                    class="text-sm text-[#616589] dark:text-gray-400 group-hover:text-[#111218] dark:group-hover:text-white transition-colors">Gym</span>
                            </label>
                            <label class="flex items-center gap-2 cursor-pointer group">
                                <input class="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary"
                                    type="checkbox" />
                                <span
                                    class="text-sm text-[#616589] dark:text-gray-400 group-hover:text-[#111218] dark:group-hover:text-white transition-colors">Security
                                    24/7</span>
                            </label>
                            <label class="flex items-center gap-2 cursor-pointer group">
                                <input class="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary"
                                    type="checkbox" />
                                <span
                                    class="text-sm text-[#616589] dark:text-gray-400 group-hover:text-[#111218] dark:group-hover:text-white transition-colors">Parking</span>
                            </label>
                            <label class="flex items-center gap-2 cursor-pointer group">
                                <input class="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary"
                                    type="checkbox" />
                                <span
                                    class="text-sm text-[#616589] dark:text-gray-400 group-hover:text-[#111218] dark:group-hover:text-white transition-colors">Elevator</span>
                            </label>
                            <label class="flex items-center gap-2 cursor-pointer group">
                                <input class="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary"
                                    type="checkbox" />
                                <span
                                    class="text-sm text-[#616589] dark:text-gray-400 group-hover:text-[#111218] dark:group-hover:text-white transition-colors">Garden</span>
                            </label>
                            <label class="flex items-center gap-2 cursor-pointer group">
                                <input class="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary"
                                    type="checkbox" />
                                <span
                                    class="text-sm text-[#616589] dark:text-gray-400 group-hover:text-[#111218] dark:group-hover:text-white transition-colors">Balcony</span>
                            </label>
                            <label class="flex items-center gap-2 cursor-pointer group">
                                <input class="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary"
                                    type="checkbox" />
                                <span
                                    class="text-sm text-[#616589] dark:text-gray-400 group-hover:text-[#111218] dark:group-hover:text-white transition-colors">Pet
                                    Friendly</span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-section">
                    <div class="flex items-center gap-2 mb-6 text-primary">
                        <span class="material-symbols-outlined text-2xl">payments</span>
                        <h2 class="text-lg font-bold text-[#111218] dark:text-white">Pricing &amp; Status</h2>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="label-text" for="price">Price (MXN)</label>
                            <div class="relative">
                                <span class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500 font-medium">$</span>
                                <input class="input-field pl-8" id="price" placeholder="0.00" type="text" />
                            </div>
                        </div>
                        <div>
                            <label class="label-text" for="status">Initial Status</label>
                            <div class="relative">
                                <select class="select-field" id="status">
                                    <option>Available</option>
                                    <option>Reserved</option>
                                    <option>Blocked</option>
                                </select>
                                <span
                                    class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 text-[#9ca3af] pointer-events-none">expand_more</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-section">
                    <div class="flex items-center gap-2 mb-6 text-primary">
                        <span class="material-symbols-outlined text-2xl">location_on</span>
                        <h2 class="text-lg font-bold text-[#111218] dark:text-white">Location</h2>
                    </div>
                    <div class="flex flex-col gap-6">
                        <div>
                            <label class="label-text" for="address">Full Address</label>
                            <input class="input-field" id="address"
                                placeholder="Street, Number, Neighborhood, Zip Code, City..." type="text" />
                        </div>
                        <div>
                            <label class="label-text">Map Integration</label>
                            <div
                                class="w-full h-64 rounded-xl overflow-hidden relative border border-[#e5e7eb] dark:border-[#4b5563]">
                                <img alt="Map placeholder" class="w-full h-full object-cover grayscale-[0.5]"
                                    src="https://lh3.googleusercontent.com/aida-public/AB6AXuDvRO5n_XInhJWUeY30HAsGkzsNFxgByax6gBpB1PjScgSB_PC8d2yEaBKVMN9YFX6slBMgriQKnO9bSrNiKCrnyhTTgxn2EK3FC9LYAg5_pqhFQs3YyIxCaaa-0RkAetbjWDvxsHrAPk5f4px9kJTrbH6NA7UMWZWxUj2-keS5t68mvRiAFaDqplMXxf9YZFCuO7JNJAUiDETazCwa-rDggGYFOPWcVYQ_ywoV9iN9CZQuQQ2JEV89rNuGbMH3AMPv1K_s24oZgAo" />
                                <div class="absolute inset-0 flex items-center justify-center bg-black/5">
                                    <div class="bg-white dark:bg-[#1e2030] p-3 rounded-full shadow-xl">
                                        <span
                                            class="material-symbols-outlined text-red-500 fill text-4xl">location_on</span>
                                    </div>
                                </div>
                                <div
                                    class="absolute top-4 right-4 bg-white dark:bg-[#1e2030] p-2 rounded-lg shadow-md border border-[#e5e7eb] dark:border-[#2d2f45] text-xs font-medium flex items-center gap-2">
                                    <span class="material-symbols-outlined text-base">my_location</span>
                                    Precise location selected
                                </div>
                            </div>
                            <p class="text-xs text-[#616589] dark:text-gray-400 mt-2">Click on the map to pin the
                                exact property location for the client.</p>
                        </div>
                    </div>
                </div>
                <div class="form-section">
                    <div class="flex items-center gap-2 mb-6 text-primary">
                        <span class="material-symbols-outlined text-2xl">photo_camera</span>
                        <h2 class="text-lg font-bold text-[#111218] dark:text-white">Media Uploads</h2>
                    </div>
                    <div
                        class="border-2 border-dashed border-[#d1d5db] dark:border-[#4b5563] rounded-xl p-10 flex flex-col items-center justify-center bg-gray-50/50 dark:bg-[#2d2f45]/20 hover:bg-gray-50 dark:hover:bg-[#2d2f45]/40 transition-colors cursor-pointer group">
                        <div
                            class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-4 group-hover:scale-110 transition-transform">
                            <span class="material-symbols-outlined text-2xl">cloud_upload</span>
                        </div>
                        <p class="text-sm font-semibold text-[#111218] dark:text-white">Click to upload or drag and
                            drop</p>
                        <p class="text-xs text-[#616589] dark:text-gray-400 mt-1">PNG, JPG or WEBP (Max. 5MB each)
                        </p>
                        <input class="hidden" multiple="" type="file" />
                    </div>
                    <div class="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-5 gap-4 mt-6">
                        <div
                            class="relative aspect-square rounded-lg overflow-hidden border border-[#e5e7eb] dark:border-[#2d2f45]">
                            <img alt="Property thumbnail" class="w-full h-full object-cover"
                                src="https://lh3.googleusercontent.com/aida-public/AB6AXuCAoFDtVnBzl4myY-eSHC4Pjb95YcWdEFNrlSiV2kv9BCgV4djnfnsILdsbpwPA5v8zSBJn38NBcJ61DiPRUSLer8NFb-HQwaSJM2LaoxZ2o20fkpoeKBcghKmHzzl2wL57z9X_FtMXKnNKq4DmnY3fGtoAyTAOXJiaDbswOC5yM_2vIfcn5_DJZ9PfO4IMnWlnlkKsGRCgOuEU-GIR8HmvX8ZYFn79eSR9qF9iDweD5XMT7WfGhowNhsLn5jO4KkiR1-YewTFnVt0" />
                            <button
                                class="absolute top-1 right-1 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600 transition-colors"
                                type="button">
                                <span class="material-symbols-outlined text-sm">close</span>
                            </button>
                        </div>
                        <div
                            class="relative aspect-square rounded-lg overflow-hidden border border-[#e5e7eb] dark:border-[#2d2f45]">
                            <img alt="Property thumbnail" class="w-full h-full object-cover"
                                src="https://lh3.googleusercontent.com/aida-public/AB6AXuAx2OPHyexAHU73M_aZR6OzPUuw4Wu82F6AYrk6cUR20-AKD_n95Q_qh1bvV46BHcjSwPBRDo1NxB6uSoMjlPYvUNC1EKS7l3akBlP9nK1J4O8iH-5qwFBHuBL1ikYpb0EoxLuZVN8WdazMhEFlGLa9iRvjWUl4M9nk3bblVPXlw9zQqXR_HwotzbFZbf7r7gMpJOQvLcWhasnTbbClNilF5jViMq2SjGlP2ib3XeMUo5lDrI2qf3-ZlWDTUw_lVQ1eFTs5JVMvh1Q" />
                            <button
                                class="absolute top-1 right-1 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600 transition-colors"
                                type="button">
                                <span class="material-symbols-outlined text-sm">close</span>
                            </button>
                        </div>
                        <div
                            class="relative aspect-square rounded-lg overflow-hidden border border-[#e5e7eb] dark:border-[#2d2f45] bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
                            <span class="text-gray-400 material-symbols-outlined">image</span>
                        </div>
                    </div>
                </div>
                <div class="flex items-center justify-end gap-4 pt-4">
                    <button
                        class="h-12 px-8 rounded-lg border border-[#d1d5db] dark:border-[#4b5563] bg-white dark:bg-[#2d2f45] text-[#111218] dark:text-white text-sm font-semibold hover:bg-gray-50 dark:hover:bg-[#3d4059] transition-colors"
                        type="button">
                        Cancel
                    </button>
                    <button
                        class="h-12 px-10 rounded-lg bg-primary text-white text-sm font-bold shadow-lg shadow-primary/30 hover:bg-blue-700 transition-colors flex items-center gap-2"
                        type="submit">
                        <span class="material-symbols-outlined text-xl">save</span>
                        Save Property
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection