@extends('layouts.admin')

@section('title', 'Create Property Deal')

@push('styles')
    <style>
        :root {
            --psg-pink: #F95CA8;
            --psg-blue: #1E4072;
            --bg-light: #F8F9FC;
        }

        .admin-form-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .form-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            margin-bottom: 30px;
            overflow: hidden;
        }

        .form-card-header {
            background: var(--psg-blue);
            color: white;
            padding: 20px 30px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .form-card-body {
            padding: 30px;
        }

        .form-section-title {
            color: var(--psg-pink);
            font-weight: 800;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            gap: 10px;
            border-bottom: 1px solid #EEE;
            padding-bottom: 10px;
        }

        .admin-label {
            display: block;
            font-weight: 700;
            color: #444;
            font-size: 0.8rem;
            margin-bottom: 8px;
            text-transform: uppercase;
        }

        .admin-input {
            width: 100%;
            padding: 12px 18px;
            border: 1px solid #E3E6F0;
            border-radius: 10px;
            background: var(--bg-light);
            transition: all 0.3s;
            font-weight: 500;
            color: #4E5E7A;
        }

        .admin-input:focus {
            background: white;
            border-color: var(--psg-pink);
            outline: none;
            box-shadow: 0 0 0 4px rgba(249, 92, 168, 0.05);
        }

        .admin-input:read-only {
            background: #EDF0F5;
            cursor: not-allowed;
            color: #888;
        }

        .calc-box {
            background: #F0F4F8;
            border-radius: 12px;
            padding: 20px;
            border-left: 5px solid var(--psg-pink);
        }

        .calc-value {
            font-size: 1.5rem;
            font-weight: 900;
            color: var(--psg-blue);
            margin: 0;
        }

        .calc-label {
            font-size: 0.7rem;
            font-weight: 800;
            text-transform: uppercase;
            color: #888;
            margin-bottom: 5px;
            display: block;
        }

        .upload-area {
            border: 2px dashed #E3E6F0;
            border-radius: 12px;
            padding: 30px;
            text-align: center;
            background: var(--bg-light);
            cursor: pointer;
            transition: 0.3s;
        }

        .upload-area:hover, .upload-area.drag-over {
            border-color: var(--psg-pink);
            background: rgba(249, 92, 168, 0.03);
        }

        .preview-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }

        .preview-box {
            aspect-ratio: 1;
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid #EEE;
            position: relative;
        }

        .preview-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .sticky-footer {
            position: sticky;
            bottom: 20px;
            background: white;
            padding: 20px 40px;
            border-radius: 50px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            z-index: 100;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 40px;
            border: 1px solid #EEE;
        }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 12px;
        }

        .feature-item {
            background: #F8F9FC;
            padding: 10px 15px;
            border-radius: 8px;
            border: 1px solid #E3E6F0;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            transition: 0.2s;
        }

        .feature-item:hover {
            border-color: var(--psg-pink);
        }

        .feature-item input {
            cursor: pointer;
        }

        .text-pink { color: var(--psg-pink); }
    </style>
@endpush

@section('content')
<div class="admin-form-container">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold">Broadcast New Deal</h2>
            <p class="text-muted">Create a new property listing with auto-calculated sourcing fees.</p>
        </div>
        <a href="{{ route('admin.available-properties.index') }}" class="btn btn-outline-secondary rounded-pill px-4">
            <i class="bi bi-arrow-left me-2"></i>Back to List
        </a>
    </div>

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

        @if ($errors->any())
            <div class="alert alert-danger rounded-4 border-0 shadow-sm p-4 mb-4">
                <h6 class="fw-bold text-danger"><i class="bi bi-exclamation-triangle-fill me-2"></i> Fix errors:</h6>
                <ul class="mb-0 small">
                    @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach
                </ul>
            </div>
        @endif

        <!-- Card 1: Deal Basics -->
        <div class="form-card">
            <div class="form-card-header">
                <i class="bi bi-speedometer2"></i> Deal Strategy & Pricing
            </div>
            <div class="form-card-body">
                <div class="row g-4">
                    <div class="col-md-4">
                        <label class="admin-label">Deal Type</label>
                        <select name="deal_type" id="deal_type" class="admin-input" required>
                            <option value="">Select Strategy</option>
                            <option value="Below Market Value">Below Market Value (BMV)</option>
                            <option value="Refurbishment project">Refurbishment Project</option>
                            <option value="Rental Yield">Rental Yield / BTL</option>
                            <option value="HMO">HMO</option>
                            <option value="Development opportunity">Development Opportunity</option>
                            <option value="Other">Other</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="admin-label">Marketing Purpose</label>
                        <select name="marketing_purpose_id" class="admin-input" required>
                            @foreach($marketingPurposes as $purpose)
                                <option value="{{ $purpose->id }}">{{ $purpose->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="admin-label">Assignable Contract Available?</label>
                        <select name="assignable_contract" class="admin-input">
                            <option value="No">No</option>
                            <option value="Yes">Yes</option>
                        </select>
                    </div>
                </div>

                <div class="form-section-title mt-5">Financial Calculations</div>
                <div class="row g-4 mb-4">
                    <div class="col-md-4">
                        <label class="admin-label">Vendor Sale Price (£)</label>
                        <input type="number" name="price" id="vendor-price" class="admin-input" placeholder="e.g. 150000" required>
                    </div>
                    <div class="col-md-4">
                        <label class="admin-label">Fees (2% or Min 5000)</label>
                        <input type="text" id="fees-display" class="admin-input" readonly placeholder="Auto-calculated">
                    </div>
                    <div class="col-md-4">
                        <label class="admin-label">Portal Sale Price (£)</label>
                        <input type="text" id="portal-price-display" class="admin-input" readonly placeholder="Auto-calculated">
                    </div>
                </div>

                <div class="row g-4">
                    <div class="col-md-4">
                        <label class="admin-label">Market Value (Min)</label>
                        <input type="number" name="market_value_min" id="mv-min" class="admin-input" placeholder="e.g. 180000">
                    </div>
                    <div class="col-md-4">
                        <label class="admin-label">Market Value (Max)</label>
                        <input type="number" name="market_value_max" id="mv-max" class="admin-input" placeholder="e.g. 200000">
                    </div>
                    <div class="col-md-4">
                        <label class="admin-label">Average Market Value</label>
                        <input type="text" id="mv-avg-display" class="admin-input" readonly placeholder="Auto-calculated">
                    </div>
                </div>

                <div class="row mt-4">
                    <div class="col-md-4">
                        <div class="calc-box">
                            <span class="calc-label text-muted">Min Discount</span>
                            <h3 class="calc-value text-blue" id="min-discount-display" style="font-size: 1.5rem;">0%</h3>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="calc-box">
                            <span class="calc-label text-muted">Max Discount</span>
                            <h3 class="calc-value text-blue" id="max-discount-display" style="font-size: 1.5rem;">0%</h3>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="calc-box" style="background: var(--psg-pink); color: white;">
                            <span class="calc-label" style="color: rgba(255,255,255,0.8)">Avg Investor Discount</span>
                            <h3 class="calc-value" id="discount-display">0%</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Card 2: Property Details -->
        <div class="form-card">
            <div class="form-card-header">
                <i class="bi bi-house-door"></i> Property Specifications
            </div>
            <div class="form-card-body">
                <div class="row g-4 mb-5">
                    <div class="col-md-8">
                        <label class="admin-label">Property Title / Headline</label>
                        <input type="text" name="headline" class="admin-input" placeholder="e.g. 3 Bed Semi in Manchester with 25% BMV" required>
                    </div>
                    <div class="col-md-4">
                        <label class="admin-label">Cash Buyers Only?</label>
                        <select name="is_cash_buy" class="admin-input">
                            <option value="0">No</option>
                            <option value="1">Yes</option>
                        </select>
                    </div>
                </div>

                <div class="form-section-title">Address & Location</div>
                <div class="row g-4 mb-4">
                    <div class="col-md-8">
                        <label class="admin-label">Search Full Address (Google Maps)</label>
                        <input type="text" id="google-search" name="location" class="admin-input" placeholder="Start typing address...">
                        <input type="hidden" name="latitude" id="lat">
                        <input type="hidden" name="longitude" id="lng">
                    </div>
                    <div class="col-md-4">
                        <label class="admin-label">Door / Unit Number</label>
                        <input type="text" name="door_number" class="admin-input" placeholder="e.g. Flat 4">
                    </div>
                    <div class="col-md-6">
                        <label class="admin-label">City / Town</label>
                        <input type="text" name="city" id="city" class="admin-input">
                    </div>
                    <div class="col-md-6">
                        <label class="admin-label">Post Code</label>
                        <input type="text" name="postcode" id="postcode" class="admin-input">
                    </div>
                </div>

                <div class="form-section-title">Structure & Features</div>
                <div class="row g-4">
                    <div class="col-md-4">
                        <label class="admin-label">Property Category</label>
                        <select name="property_category" id="prop_category" class="admin-input">
                            @foreach($propertyCategories as $cat)
                                <option value="{{ $cat->name }}">{{ $cat->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="admin-label">Property Type</label>
                        <select name="property_type_id" id="prop_type_select" class="admin-input" required>
                            @foreach($propertyTypes as $type)
                                <option value="{{ $type->id }}" data-category="{{ $type->propertyCategory ? $type->propertyCategory->name : 'N/A' }}">{{ $type->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="admin-label">Detachment / Unit Type</label>
                        <select name="unit_type_id" id="unit_type_select" class="admin-input">
                            <option value="">N/A</option>
                            @foreach($unitTypes as $u)
                                <option value="{{ $u->id }}" data-parent="{{ $u->property_type_id }}">{{ $u->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="admin-label">No. of Bedrooms</label>
                        <select name="bedrooms" class="admin-input">
                            @for($i=0; $i<=10; $i++) <option value="{{$i}}">{{$i}} Beds</option> @endfor
                            <option value="10+">10+ Beds</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="admin-label">No. of Bathrooms</label>
                        <select name="bathrooms" class="admin-input">
                            @for($i=0; $i<=5; $i++) <option value="{{$i}}">{{$i}} Baths</option> @endfor
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="admin-label">Internal Area (Sq Ft)</label>
                        <input type="number" name="area_sq_ft" class="admin-input" placeholder="e.g. 1100">
                    </div>
                </div>

                <div class="form-section-title mt-5">Tenure & Deadlines</div>
                <div class="row g-4">
                    <div class="col-md-4">
                        <label class="admin-label">Tenure</label>
                        <select name="tenure_type" id="tenure" class="admin-input">
                            <option value="Freehold">Freehold</option>
                            <option value="Leasehold">Leasehold</option>
                        </select>
                    </div>
                    <div class="col-md-4" id="lease-years-box" style="display:none;">
                        <label class="admin-label">Lease Years Remaining</label>
                        <input type="number" name="lease_years_remaining" class="admin-input" placeholder="e.g. 99">
                    </div>
                    <div class="col-md-4">
                        <label class="admin-label">Share of Freehold?</label>
                        <select name="share_of_freehold" class="admin-input">
                            <option value="No">No</option>
                            <option value="Yes">Yes</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="admin-label">Exchange Deadline</label>
                        <select name="exchange_deadline" class="admin-input">
                            <option value="14 days">14 Days</option>
                            <option value="within 28 days">Within 28 Days</option>
                            <option value="6 weeks">6 Weeks</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="admin-label">Completion Deadline</label>
                        <select name="completion_deadline" class="admin-input">
                            <option value="14 days">14 Days</option>
                            <option value="within 28 days">Within 28 Days</option>
                            <option value="6 weeks">6 Weeks</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <!-- Card 3: Media & Description -->
        <div class="form-card">
            <div class="form-card-header">
                <i class="bi bi-card-text"></i> Property Description & Media
            </div>
            <div class="form-card-body">
                <div class="admin-form-group mb-5">
                    <label class="admin-label">Property Description</label>
                    <textarea name="full_description" id="description-editor" class="admin-input"></textarea>
                </div>

                <div class="form-section-title">Amenities & Key Features</div>
                <div class="feature-grid mb-5">
                    @foreach($features as $f)
                        <label class="feature-item">
                            <input type="checkbox" name="features[]" value="{{ $f->id }}">
                            <span class="small fw-bold">{{ $f->name }}</span>
                        </label>
                    @endforeach
                </div>

                <div class="form-section-title">Media Uploads</div>
                <div class="row g-4">
                    <div class="col-md-6">
                        <label class="admin-label">Main Thumbnail</label>
                        <div class="upload-area" id="thumb-drop">
                            <i class="bi bi-cloud-arrow-up fs-2 text-pink"></i>
                            <p class="mb-0 small fw-bold">Click or drop Main Image</p>
                            <input type="file" name="thumbnail" id="thumb-input" class="d-none" accept="image/*">
                            <div id="thumb-preview" class="preview-grid"></div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="admin-label">Gallery Images (Up to 10)</label>
                        <div class="upload-area" id="gallery-drop">
                            <i class="bi bi-images fs-2 text-pink"></i>
                            <p class="mb-0 small fw-bold">Click or drop Gallery Images</p>
                            <input type="file" name="gallery_images[]" id="gallery-input" class="d-none" multiple accept="image/*">
                            <div id="gallery-preview" class="preview-grid"></div>
                        </div>
                    </div>
                    <div class="col-12">
                        <label class="admin-label">Videos</label>
                        <div class="upload-area" id="video-drop">
                            <i class="bi bi-camera-video fs-2 text-pink"></i>
                            <p class="mb-0 small fw-bold">Click or drop Property Video</p>
                            <input type="file" name="video" id="video-input" class="d-none" accept="video/*">
                            <div id="video-preview" class="mt-3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sticky Footer Actions -->
        <div class="sticky-footer">
            <div class="d-flex align-items-center gap-4">
                <div class="text-start">
                    <span class="small text-muted text-uppercase fw-bold">Portal Sale Price</span>
                    <h3 class="fw-black mb-0 text-pink" id="footer-price-display">£0</h3>
                </div>
                <div class="vr"></div>
                <div class="text-start">
                    <span class="small text-muted text-uppercase fw-bold">Investor Discount</span>
                    <h3 class="fw-black mb-0 text-dark" id="footer-discount-display">0%</h3>
                </div>
            </div>
            <div class="d-flex gap-3">
                <button type="submit" name="status" value="draft" class="btn btn-outline-secondary px-5 py-3 rounded-pill fw-bold">
                    Save Draft
                </button>
                <button type="submit" name="status" value="pending" class="btn btn-dark px-5 py-3 rounded-pill fw-bold" style="background: var(--psg-blue)">
                    Publish Deal <i class="bi bi-broadcast ms-2"></i>
                </button>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script src="https://cdn.ckeditor.com/ckeditor5/40.0.0/classic/ckeditor.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDtagAWzRL7h2Safzk7EwKK0x6v42RlsdI&libraries=places"></script>
<script>
    // CKEDITOR
    ClassicEditor.create(document.querySelector('#description-editor')).catch(console.error);

    // Google Maps
    function initMap() {
        const input = document.getElementById('google-search');
        const autocomplete = new google.maps.places.Autocomplete(input, { componentRestrictions: { country: "gb" } });
        autocomplete.addListener('place_changed', function() {
            const place = autocomplete.getPlace();
            if (place.geometry) {
                document.getElementById('lat').value = place.geometry.location.lat();
                document.getElementById('lng').value = place.geometry.location.lng();
                
                place.address_components.forEach(comp => {
                    if (comp.types.includes('locality')) document.getElementById('city').value = comp.long_name;
                    if (comp.types.includes('postal_code')) document.getElementById('postcode').value = comp.long_name;
                });
            }
        });
    }
    google.maps.event.addDomListener(window, 'load', initMap);

    // Dynamic Cascading Dropdowns: Category -> Property Type -> Unit Type
    const catSelect = document.getElementById('prop_category');
    const typeSelect = document.getElementById('prop_type_select');
    const unitSelect = document.getElementById('unit_type_select');
    
    const typeOptions = Array.from(typeSelect.options);
    const unitOptions = Array.from(unitSelect.options);

    function updatePropertyTypes() {
        const cat = catSelect.value;
        typeSelect.innerHTML = '';
        typeOptions.forEach(opt => {
            if (opt.getAttribute('data-category') === cat) {
                typeSelect.appendChild(opt.cloneNode(true));
            }
        });
        updateUnitTypes(); // Cascading update
    }

    function updateUnitTypes() {
        const parentId = typeSelect.value;
        unitSelect.innerHTML = '<option value="">N/A</option>';
        unitOptions.forEach(opt => {
            if (opt.getAttribute('data-parent') == parentId) {
                unitSelect.appendChild(opt.cloneNode(true));
            }
        });
    }

    catSelect.addEventListener('change', updatePropertyTypes);
    typeSelect.addEventListener('change', updateUnitTypes);
    
    // Initial calls
    updatePropertyTypes();

    // Calculations
    const vPrice = document.getElementById('vendor-price');
    const mvMin = document.getElementById('mv-min');
    const mvMax = document.getElementById('mv-max');

    function runCalcs() {
        const v = parseFloat(vPrice.value) || 0;
        const fee = Math.max(v * 0.02, 5000);
        const portal = v + fee;
        
        document.getElementById('fees-display').value = '£' + fee.toLocaleString();
        document.getElementById('portal-price-display').value = '£' + portal.toLocaleString();
        document.getElementById('footer-price-display').textContent = '£' + portal.toLocaleString();

        const mi = parseFloat(mvMin.value) || 0;
        const ma = parseFloat(mvMax.value) || 0;
        const avg = (mi + ma) / 2;

        if (mi > 0 && portal > 0) {
            const minDisc = ((mi - portal) / mi) * 100;
            document.getElementById('min-discount-display').textContent = Math.max(0, minDisc).toFixed(1) + '%';
        } else {
            document.getElementById('min-discount-display').textContent = '0%';
        }

        if (ma > 0 && portal > 0) {
            const maxDisc = ((ma - portal) / ma) * 100;
            document.getElementById('max-discount-display').textContent = Math.max(0, maxDisc).toFixed(1) + '%';
        } else {
            document.getElementById('max-discount-display').textContent = '0%';
        }

        if (avg > 0 && portal > 0) {
            document.getElementById('mv-avg-display').value = '£' + avg.toLocaleString();
            const disc = ((avg - portal) / avg) * 100;
            const shownDisc = Math.max(0, disc).toFixed(1) + '%';
            document.getElementById('discount-display').textContent = shownDisc;
            document.getElementById('footer-discount-display').textContent = shownDisc;
        } else {
            document.getElementById('mv-avg-display').value = '';
            document.getElementById('discount-display').textContent = '0%';
            document.getElementById('footer-discount-display').textContent = '0%';
        }
    }
    [vPrice, mvMin, mvMax].forEach(el => el.addEventListener('input', runCalcs));

    // Tenure Logic
    const tenure = document.getElementById('tenure');
    tenure.addEventListener('change', () => {
        document.getElementById('lease-years-box').style.display = tenure.value === 'Leasehold' ? 'block' : 'none';
    });

    // Upload Previews
    function setupDragDrop(areaId, inputId, previewId, isMulti = false) {
        const area = document.getElementById(areaId);
        const input = document.getElementById(inputId);
        const preview = document.getElementById(previewId);

        area.onclick = () => input.click();

        ['dragover', 'dragleave', 'drop'].forEach(evt => {
            area.addEventListener(evt, e => {
                e.preventDefault();
                if (evt === 'dragover') area.classList.add('drag-over');
                else area.classList.remove('drag-over');
                
                if (evt === 'drop') {
                    input.files = e.dataTransfer.files;
                    handleFiles(input.files, preview, isMulti);
                }
            });
        });

        input.onchange = () => handleFiles(input.files, preview, isMulti);
    }

    function handleFiles(files, preview, isMulti) {
        if (!isMulti) preview.innerHTML = '';
        Array.from(files).forEach(file => {
            const reader = new FileReader();
            reader.onload = e => {
                if (file.type.startsWith('image/')) {
                    const div = document.createElement('div');
                    div.className = 'preview-box';
                    div.innerHTML = `<img src="${e.target.result}">`;
                    preview.appendChild(div);
                } else if (file.type.startsWith('video/')) {
                    preview.innerHTML = `<video controls class="w-100 rounded-3 shadow-sm"><source src="${e.target.result}" type="${file.type}"></video>`;
                }
            }
            if (file.type.startsWith('image/')) reader.readAsDataURL(file);
            else if (file.type.startsWith('video/')) reader.readAsDataURL(file);
        });
    }

    setupDragDrop('thumb-drop', 'thumb-input', 'thumb-preview');
    setupDragDrop('gallery-drop', 'gallery-input', 'gallery-preview', true);
    setupDragDrop('video-drop', 'video-input', 'video-preview');

</script>
@endpush