@extends('layouts.app')
@push('styles')
    {{-- Styles for the searchable combobox feature --}}
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />
@endpush
@section('content')
<div class="container">
    <div class="card shadow-sm mb-4">
        <div class="card-header bg-dark text-white">
            <h5 class="mb-0">Edit Indication</h5>
        </div>
        <div class="card-body">
            <form action="{{ route('indications.update', $indication->id) }}" method="POST">
                @csrf
                @method('PUT')
                <div class="row">
                    <!-- Property Details Column -->
                    <div class="col-md-6 border-end">
                        
                        <h6 class="mb-3 fw-bold">Property Details</h6>
                        <div class="mb-3">
                            <label class="form-label">Valuer</label>
                            {{-- Display the name from the relationship. 'readonly' prevents user from changing it here. --}}
                            <input type="text" class="form-control" value="{{ $indication->user->name ?? 'N/A' }}" readonly>

                            {{-- This hidden input sends the correct user_id back to the controller for validation and saving. --}}
                            <input type="hidden" name="user_id" value="{{ $indication->user_id }}">
                        </div>
                        
                        <div class="row mb-2">
                            <div class="col-md-4">
                                <label for="state_id" class="form-label">State</label>
                                <select class="form-select" name="state_id" id="state_id">
                                    <option value="">Select State</option>
                                    @foreach($states as $id => $name)
                                        <option value="{{ $id }}" {{ (old('state_id', $indication->state_id) == $id) ? 'selected' : '' }}>
                                            {{ $name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="district_id" class="form-label">District</label>
                                <select class="form-select" name="district_id" id="district_id">
                                    <option value="">Select District</option>
                                    @foreach($districts as $id => $name)
                                        <option value="{{ $id }}" {{ (old('district_id', $indication->district_id) == $id) ? 'selected' : '' }}>
                                            {{ $name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="subdistrict_id" class="form-label">Mukim/Town</label>
                                <select class="form-select" name="subdistrict_id" id="subdistrict_id">
                                    <option value="">Select Mukim/Town</option>
                                    @foreach($mukims as $id => $name)
                                        <option value="{{ $id }}" {{ (old('subdistrict_id', $indication->subdistrict_id) == $id) ? 'selected' : '' }}>
                                            {{ $name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        
                        <div class="mb-2">
                            <label for="seksyen_blok" class="form-label">Seksyen</label>
                            <input type="text" name="seksyen_blok" id="seksyen_blok" class="form-control" value="{{ old('seksyen_blok', $indication->seksyen_blok ?? '') }}">
                        </div>
                        
                        <div class="mb-2">
                            <label for="kawasan_skim_perumahan" class="form-label">Scheme</label>
                            <input type="text" name="kawasan_skim_perumahan" id="kawasan_skim_perumahan" class="form-control" value="{{ old('kawasan_skim_perumahan', $indication->kawasan_skim_perumahan ?? '') }}">
                        </div>
                        
                        <div class="mb-2">
                            <label for="alamat" class="form-label">Address</label>
                            <textarea name="alamat" id="alamat" class="form-control" rows="3">{{ old('alamat', $indication->alamat ?? '') }}</textarea>
                        </div>
                        
                        <div class="row mb-2">
                            <div class="col-md-6">
                                <label for="jenis_harta_tanah" class="form-label">Property Type</label>
                                <select class="form-select" name="jenis_harta_tanah" id="jenis_harta_tanah">
                                    <option value="{{ old('jenis_harta_tanah', $indication->jenis_harta_tanah ?? '') }}" selected>{{ old('jenis_harta_tanah', $indication->jenis_harta_tanah ?? 'Select Property Type') }}</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="jenis_bangunan" class="form-label">Building Type</label>
                                <select class="form-select" name="jenis_bangunan" id="jenis_bangunan">
                                    <option value="{{ old('unit_luas', $indication->unit_luas ?? '') }}" selected>{{ old('unit_luas', $indication->unit_luas ?? 'Select Building Type') }}</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="row mb-2">
                            <div class="col-md-4">
                                <label for="bil_tgkt_atas_tanah" class="form-label">Storeys</label>
                                <select class="form-select" name="bil_tgkt_atas_tanah" id="bil_tgkt_atas_tanah">
                                    <option value="{{ old('bil_tgkt_atas_tanah', $indication->bil_tgkt_atas_tanah ?? '') }}" selected>{{ old('bil_tgkt_atas_tanah', $indication->bil_tgkt_atas_tanah ?? 'Select') }}</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="klasifikasi_tanah" class="form-label">Klasifikasi Tanah</label>
                                <select class="form-select" name="klasifikasi_tanah" id="klasifikasi_tanah">
                                    <option value="{{ old('klasifikasi_tanah', $valuationData['klasifikasi_tanah'] ?? '') }}" selected>{{ old('klasifikasi_tanah', $valuationData['klasifikasi_tanah'] ?? 'Select') }}</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="bilangan_bilik" class="form-label">No. of Rooms</label>
                                <input type="text" name="bilangan_bilik" id="bilangan_bilik" class="form-control" value="{{ old('bilangan_bilik', $indication->bilangan_bilik ?? '') }}">
                            </div>
                        </div>
                        
                        <div class="row mb-2">
                            <div class="col-md-6">
                                <label for="luas_lot_petak" class="form-label">Land Area</label>
                                <div class="input-group">
                                    <input type="text" name="luas_lot_petak" id="luas_lot_petak" class="form-control" value="{{ old('luas_lot_petak', $indication->luas_lot_petak ?? '') }}">
                                    <span class="input-group-text">sf</span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label for="luas_bangunan_utama" class="form-label">Build Up Area</label>
                                <div class="input-group">
                                    <input type="text" name="luas_bangunan_utama" id="luas_bangunan_utama" class="form-control" value="{{ old('luas_bangunan_utama', $valuationData['luas_bangunan_utama'] ?? '') }}">
                                    <span class="input-group-text">sf</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-2">
                            <label for="balasan_rm" class="form-label">Price</label>
                            <div class="input-group">
                                <span class="input-group-text">RM</span>
                                <input type="text" name="balasan_rm" id="balasan_rm" class="form-control" value="{{ old('balasan_rm', $indication->balasan_rm ?? '') }}">
                            </div>
                        </div>
                        
                        <div class="row mb-2">
                            <div class="col-md-6">
                                <label for="jenis_lot_plot" class="form-label">Lot Type</label>
                                <input type="text" name="jenis_lot_plot" id="jenis_lot_plot" class="form-control" value="{{ old('jenis_lot_plot', $valuationData['jenis_lot_plot'] ?? '') }}">
                            </div>
                            <div class="col-md-6">
                                <label for="no_lot_plot" class="form-label">Lot No.</label>
                                <input type="text" name="no_lot_plot" id="no_lot_plot" class="form-control" value="{{ old('no_lot_plot', $valuationData['no_lot_plot'] ?? '') }}">
                            </div>
                        </div>
                        
                        <div class="row mb-2">
                            <div class="col-md-6">
                                <label for="jenis_hakmilik" class="form-label">Title Type</label>
                                <input type="text" name="jenis_hakmilik" id="jenis_hakmilik" class="form-control" value="{{ old('jenis_hakmilik', $indication->jenis_hakmilik ?? '') }}">
                            </div>
                            <div class="col-md-6">
                                <label for="no_hakmilik" class="form-label">Title No.</label>
                                <input type="text" name="no_hakmilik" id="no_hakmilik" class="form-control" value="{{ old('no_hakmilik', $indication->no_hakmilik ?? '') }}">
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-6 ps-4">
                        <h6 class="mb-3 fw-bold">Client/Banker Details</h6>

                        <div class="mb-3"><label for="remarks" class="form-label">Remarks</label><textarea name="remarks" class="form-control" rows="4">{{ old('remarks', $indication->remarks) }}</textarea></div>
                        <div class="mb-3"><label for="bank_name" class="form-label">Bank</label><input type="text" name="bank_name" class="form-control" value="{{ old('bank_name', $indication->bank_name) }}"></div>
                        <div class="mb-3"><label for="branch" class="form-label">Branch</label><input type="text" name="branch" class="form-control" value="{{ old('branch', $indication->branch) }}"></div>
                        <div class="mb-3"><label for="officer_name" class="form-label">Officer Name</label><input type="text" name="officer_name" class="form-control" value="{{ old('officer_name', $indication->officer_name) }}"></div>
                        <div class="mb-3"><label for="contact_no" class="form-label">Contact No</label><input type="text" name="contact_no" class="form-control" value="{{ old('contact_no', $indication->contact_no) }}" maxlength="20"></div>
                        <div class="mb-3"><label for="quotation_amount" class="form-label">Quotation</label><div class="input-group"><span class="input-group-text">RM</span><input type="text" name="quotation_amount" class="form-control" value="{{ old('quotation_amount', $indication->quotation_amount) }}"></div></div>
                        <div class="mb-3"><label for="email" class="form-label">Email Address</label><input type="email" name="email" class="form-control" value="{{ old('email', $indication->email) }}"></div>
                        <div class="mb-3"><label for="full_address" class="form-label">Full Address</label><textarea name="full_address" class="form-control" rows="3">{{ old('full_address', $indication->full_address) }}</textarea></div>

                    </div>
                
                <div class="mt-4 text-end">
                    <button type="submit" class="btn btn-success">Update</button>
                    <a href="{{ route('indications.index') }}" class="btn btn-secondary">Cancel</a>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
    .form-label {
        font-size: 0.85rem;
        font-weight: 500;
        color: #555;
        margin-bottom: 0.25rem;
    }
    
    .form-control, .form-select {
        font-size: 0.9rem;
        border-radius: 4px;
        border: 1px solid #ced4da;
    }
    
    .card-header {
        background-color: #4a3f35 !important;
    }
    
    .btn-success {
        background-color: #5c4d3c;
        border-color: #5c4d3c;
    }
    
    .btn-success:hover {
        background-color: #4a3f35;
        border-color: #4a3f35;
    }
</style>
@endsection
@push('scripts')
{{-- Include jQuery and Select2 JS for the combobox --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
    function initializeCombobox(selector, newFieldsContainerId) {
        const container = $(newFieldsContainerId);
        const selectElement = $(selector);

        selectElement.select2({
            tags: true, // Allows creating new options
            theme: 'bootstrap-5'
        }).on('change', function() {
            const selectedValue = $(this).val();
            // isNaN checks if the value is Not-a-Number.
            // If it's not a number, it's a new string the user typed.
            if (isNaN(selectedValue)) {
                container.removeClass('d-none'); // Show the hidden fields
            } else {
                container.addClass('d-none'); // Hide the fields if an existing ID is selected
            }
        });

        // Initial check in case of old input
        if (isNaN(selectElement.val())) {
            container.removeClass('d-none');
        }
    }
    initializeCombobox('#client_id', '#new_client_fields');
    initializeCombobox('#bank_id', '#new_bank_fields');
});
</script>
@endpush