@extends('layouts.admin')

@section('css')
@vite(['node_modules/choices.js/public/assets/styles/choices.min.css'])
@endsection


@section('content')
    <div class="row">
        <div class="col-xl-9 mx-auto">
            <div class="card">
                <div class="card-header">
                    <h4 class="header-title">Create New Booking</h4>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.bookings.store') }}" method="POST" id="bookingForm">
                        @csrf
                        
                        <!-- Section 1: Customer & Agent -->
                        <div class="row mb-4">
                            <div class="col-md-6 border-end">
                                <h5 class="mb-3 text-primary">Customer Information</h5>
                                <div class="mb-3">
                                    <label class="form-label">Select Customer</label>
                                    <select name="customer_id" class="form-control" data-choices required>
                                        <option value="">Choose Customer...</option>
                                        @foreach($customers as $customer)
                                            <option value="{{ $customer->id }}" {{ old('customer_id') == $customer->id ? 'selected' : '' }}>
                                                {{ $customer->name }} ({{ $customer->customer_code }})
                                            </option>
                                        @endforeach
                                    </select>

                                    @error('customer_id') <div class="text-danger small">{{ $message }}</div> @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h5 class="mb-3 text-primary">Selling Agent</h5>
                                <div class="mb-3">
                                    <label class="form-label">Select Agent</label>
                                    <select name="agent_id" class="form-control" data-choices required>

                                        <option value="">Choose Agent...</option>
                                        @foreach($agents as $agent)
                                            <option value="{{ $agent->id }}" {{ old('agent_id') == $agent->id ? 'selected' : '' }}>
                                                {{ $agent->name }} ({{ $agent->referral_code }})
                                            </option>
                                        @endforeach
                                    </select>

                                    @error('agent_id') <div class="text-danger small">{{ $message }}</div> @enderror
                                </div>
                            </div>
                        </div>

                        <hr>

                        <!-- Section 2: Property Selection -->
                        <h5 class="mb-3 text-primary">Property Information</h5>
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Select Project</label>
                                    <select id="projectSelect" class="form-control" data-choices required>

                                        <option value="">Choose Project...</option>
                                        @foreach($projects as $project)
                                            <option value="{{ $project->id }}">{{ $project->name }}</option>
                                        @endforeach
                                    </select>

                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Select Plot</label>
                                    <select name="plot_id" id="plotSelect" class="form-control" required disabled>

                                        <option value="">Choose Project First...</option>
                                    </select>
                                    @error('plot_id') <div class="text-danger small">{{ $message }}</div> @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row mb-4 bg-light p-3 rounded mx-0">
                            <div class="col-md-4 text-center">
                                <p class="text-muted mb-1">Total Area</p>
                                <h4 id="displayArea">0.00 sqft</h4>
                            </div>
                            <div class="col-md-4 text-center border-start border-end">
                                <p class="text-muted mb-1">Price per sqft</p>
                                <h4 id="displayRate">₹ 0.00</h4>
                                <input type="hidden" name="price_per_sqft" id="priceInput">
                            </div>
                            <div class="col-md-4 text-center">
                                <p class="text-primary-emphasis mb-1 fw-bold">Total Amount</p>
                                <h4 class="text-primary" id="displayTotal">₹ 0.00</h4>
                            </div>
                        </div>

                        <hr>

                        <!-- Section 3: Booking Details -->
                        <h5 class="mb-3 text-primary">Booking & EMI Details</h5>
                        <div class="row mb-4">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">Booking Deposit (₹)</label>
                                    <input type="number" name="booking_amount" id="bookingAmount" class="form-control" value="{{ old('booking_amount', 0) }}" required>
                                    @error('booking_amount') <div class="text-danger small">{{ $message }}</div> @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">EMI Months</label>
                                    <input type="number" name="emi_months" id="emiMonths" class="form-control" value="{{ old('emi_months', 1) }}" required>
                                    @error('emi_months') <div class="text-danger small">{{ $message }}</div> @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">Payment Mode</label>
                                    <select name="payment_mode" class="form-select" required>
                                        <option value="cash" {{ old('payment_mode') == 'cash' ? 'selected' : '' }}>Cash (PV)</option>
                                        <option value="online" {{ old('payment_mode') == 'online' ? 'selected' : '' }}>Online (BV)</option>
                                    </select>
                                    @error('payment_mode') <div class="text-danger small">{{ $message }}</div> @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row mb-4 bg-info-subtle p-3 rounded mx-0">
                            <div class="col-md-6 text-center border-end border-info-subtle">
                                <p class="text-muted mb-1">Remaining Balance</p>
                                <h4 id="displayRemaining">₹ 0.00</h4>
                            </div>
                            <div class="col-md-6 text-center">
                                <p class="text-info-emphasis mb-1 fw-bold">Monthly EMI</p>
                                <h4 class="text-info" id="displayEmi">₹ 0.00</h4>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Administrative Notes (Optional)</label>
                            <textarea name="notes" class="form-control" rows="3">{{ old('notes') }}</textarea>
                        </div>

                        <div class="text-end border-top pt-3 mt-4">
                            <a href="{{ route('admin.bookings.index') }}" class="btn btn-light me-2">Cancel</a>
                            <button type="submit" class="btn btn-primary px-4">Create Booking</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const projectSelect = document.getElementById('projectSelect');
    const plotSelect = document.getElementById('plotSelect');
    const displayArea = document.getElementById('displayArea');
    const displayRate = document.getElementById('displayRate');
    const displayTotal = document.getElementById('displayTotal');
    const priceInput = document.getElementById('priceInput');
    const bookingAmount = document.getElementById('bookingAmount');
    const emiMonths = document.getElementById('emiMonths');
    const displayRemaining = document.getElementById('displayRemaining');
    const displayEmi = document.getElementById('displayEmi');

    let currentPlot = null;
    let plotChoices = null;

    // Initialize Choices for Plot Select
    if (window.Choices) {
        plotChoices = new Choices(plotSelect, {
            searchEnabled: true,
            placeholder: true,
            placeholderValue: 'Choose Project First...',
            itemSelectText: '',
        });
    }

    // Fetch Plots by Project
    projectSelect.addEventListener('change', function() {
        const projectId = this.value;
        
        if (plotChoices) {
            plotChoices.clearStore();
            plotChoices.disable();
            plotChoices.setChoices([{ value: '', label: 'Loading...', selected: true, disabled: true }]);
        } else {
            plotSelect.innerHTML = '<option value="">Loading...</option>';
            plotSelect.disabled = true;
        }
        
        if (!projectId) {
            if (plotChoices) {
                plotChoices.setChoices([{ value: '', label: 'Choose Project First...', selected: true, disabled: true }]);
            } else {
                plotSelect.innerHTML = '<option value="">Choose Project First...</option>';
            }
            return;
        }

        const url = "{{ route('admin.plots.available', ['project' => ':projectId']) }}".replace(':projectId', projectId);
        fetch(url)
            .then(res => res.json())
            .then(data => {
                const choices = data.map(plot => ({
                    value: plot.id.toString(),
                    label: plot.plot_number.toString(),
                    customProperties: {
                        area: plot.total_area,
                        price: plot.price_per_sqft
                    }
                }));

                if (plotChoices) {
                    plotChoices.clearStore();
                    plotChoices.enable();
                    plotChoices.setChoices([
                        { value: '', label: 'Select Plot...', selected: true, disabled: true },
                        ...choices
                    ], 'value', 'label', false);
                } else {
                    plotSelect.innerHTML = '<option value="">Select Plot...</option>';
                    data.forEach(plot => {
                        plotSelect.innerHTML += `<option value="${plot.id}" data-area="${plot.total_area}" data-price="${plot.price_per_sqft}">${plot.plot_number}</option>`;
                    });
                    plotSelect.disabled = false;
                }
            });
    });

    // Handle Plot Selection
    plotSelect.addEventListener('change', function() {
        let area, rate;

        if (plotChoices) {
            const choice = plotChoices.getValue();
            if (!choice || !choice.customProperties) {
                resetCalcs();
                return;
            }
            area = parseFloat(choice.customProperties.area);
            rate = parseFloat(choice.customProperties.price);
        } else {
            const selected = this.options[this.selectedIndex];
            if (!this.value) {
                resetCalcs();
                return;
            }
            area = parseFloat(selected.dataset.area);
            rate = parseFloat(selected.dataset.price);
        }

        const total = area * rate;

        displayArea.innerText = area.toFixed(2) + ' sqft';
        displayRate.innerText = '₹ ' + rate.toLocaleString();
        displayTotal.innerText = '₹ ' + total.toLocaleString();
        priceInput.value = rate;
        
        currentPlot = { area, rate, total };
        updateCalcs();
    });


    // Update EMI Calculations
    [bookingAmount, emiMonths].forEach(el => {
        el.addEventListener('input', updateCalcs);
    });

    function updateCalcs() {
        if (!currentPlot) return;

        const deposit = parseFloat(bookingAmount.value) || 0;
        const months = parseInt(emiMonths.value) || 1;
        
        const remaining = currentPlot.total - deposit;
        const emi = remaining / months;

        displayRemaining.innerText = '₹ ' + remaining.toLocaleString();
        displayEmi.innerText = '₹ ' + emi.toLocaleString();
    }

    function resetCalcs() {
        displayArea.innerText = '0.00 sqft';
        displayRate.innerText = '₹ 0.00';
        displayTotal.innerText = '₹ 0.00';
        displayRemaining.innerText = '₹ 0.00';
        displayEmi.innerText = '₹ 0.00';
        priceInput.value = '';
        currentPlot = null;
    }
});
</script>
@endsection