@extends('layouts.app')

@section('content')
<div class="container">
    <div class="card shadow-sm mb-4">
        <div class="card-header bg-dark text-white">
            <h5 class="mb-0">Indicate Record</h5>
        </div>
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <div class="card-body">
            <form action="{{ route('indications.store') }}" method="POST">
                @csrf
                <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-2"> {{-- NEED TO SELECT WHICH VALUER THAT BEING CONTACTED BY CLIENT --}}
                            <label for="valuer_name" class="form-label">Valuer</label>
                            <input type="text" id="valuer_name" class="form-control" value="{{ $valuerDetails['name'] ?? '' }}" readonly>
                            <input type="hidden" name="user_id" value="{{ $valuerDetails['id'] ?? '' }}">
                        </div>
                        
                        <div class="row mb-2">
                            
                            {{-- STATE --}}
                            <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', $valuationPrefillIds['state_id'] ?? null) == $id) ? 'selected' : '' }}>
                                            {{ $name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            {{-- DISTRICT --}}
                            <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', $valuationPrefillIds['district_id'] ?? null) == $id) ? 'selected' : '' }}>
                                            {{ $name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>


                            {{-- MUKIM/TOWN --}}
                            <div class="col-md-4"> {{-- Or your relevant column structure --}}
                                <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', $valuationPrefillIds['subdistrict_id'] ?? null) == $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', $valuationData['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', $valuationData['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', $valuationData['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', $valuationData['jenis_harta_tanah'] ?? '') }}" selected>{{ old('jenis_harta_tanah', $valuationData['jenis_harta_tanah'] ?? 'Select 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('jenis_bangunan', $valuationData['jenis_bangunan'] ?? '') }}" selected>{{ old('jenis_bangunan', $valuationData['jenis_bangunan'] ?? 'Select Building Type') }}</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-12">
                                <label for="tarikh_pindahmilik" class="form-label">Date</label>
                                <input type="date" name="tarikh_pindahmilik" id="tarikh_pindahmilik" class="form-control"
                                value="{{ old('tarikh_pindahmilik', $valuationPrefillIds['tarikh_pindahmilik'] ?? ($valuationData['tarikh_pindahmilik'] ? \Carbon\Carbon::parse($valuationData['tarikh_pindahmilik'])->format('Y-m-d') : '') ) }}">
                            </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', $valuationData['bil_tgkt_atas_tanah'] ?? '') }}" selected>{{ old('bil_tgkt_atas_tanah', $valuationData['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', $valuationData['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', $valuationData['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="harga" class="form-label">Price</label>
                            <div class="input-group">
                                <span class="input-group-text">RM</span>
                                <input type="text" name="harga" id="harga" class="form-control" value="{{ old('harga', $valuationData['harga'] ?? '') }}">
                            </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', $valuationData['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', $valuationData['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" id="remarks" class="form-control" rows="4">{{ old('remarks', $valuationData['remarks'] ?? '') }}</textarea></div>
                        <div class="mb-3"><label for="bank_name" class="form-label">Bank</label><input type="text" name="bank_name" id="bank_name" class="form-control" value="{{ old('bank_name') }}"></div>
                        <div class="mb-3"><label for="branch" class="form-label">Branch</label><input type="text" name="branch" id="branch" class="form-control" value="{{ old('branch') }}"></div>
                        <div class="mb-3"><label for="officer_name" class="form-label">Officer Name</label><input type="text" name="officer_name" id="officer_name" class="form-control" value="{{ old('officer_name') }}"></div>
                        <div class="mb-3"><label for="contact_no" class="form-label">Contact No</label><input type="text" name="contact_no" id="contact_no" class="form-control" value="{{ old('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" id="quotation_amount" class="form-control" value="{{ old('quotation_amount') }}"></div></div>
                        <div class="mb-3"><label for="email" class="form-label">Email Address</label><input type="email" name="email" id="email" class="form-control" value="{{ old('email') }}"></div>
                        <div class="mb-3"><label for="full_address" class="form-label">Full Address</label><textarea name="full_address" id="full_address" class="form-control" rows="3">{{ old('full_address') }}</textarea></div>
                    </div>
                </div>
                
                <div class="mt-4 text-end">
                    <button type="submit" class="btn btn-success">Submit</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')
<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');
        }
    }

    // Initialize for both Client and Bank
    initializeCombobox('#client_id', '#new_client_fields');
    // initializeCombobox('#bank_id', '#new_bank_fields'); // Add this line if you create a section for new banks
    initializeCombobox('#bank_id', '#new_bank_fields'); // Add this line if you create a section for new banks
});
</script>
@endpush