@extends('components.customer_layout')

@section('customer-content')
    <link href="{{ asset('assets/css/custom/a3form.css') }}" rel="stylesheet" type="text/css">

    <style>
        .card {
            border-radius: 12px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        .card-header {
            background: linear-gradient(135deg, #4CAF50, #2E7D32);
            color: white;
            padding: 15px;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
        }
        .form-group label {
            font-weight: bold;
        }
        .btn-primary {
            background: #2E7D32;
            border: none;
            transition: 0.3s;
            padding: 10px 20px;
            font-size: 16px;
        }
        .btn-primary:hover {
            background: #1B5E20;
        }
        .alert-success {
            background: #E8F5E9;
            color: #2E7D32;
            border-left: 5px solid #4CAF50;
            padding: 10px;
        }
        .container {
            max-width: 1000px;
            margin: auto;
            padding-top: 20px;
        }
        .section-title {
            font-size: 18px;
            font-weight: bold;
            margin-top: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #4CAF50;
        }
        .file-input {
            border: 2px dashed #ddd;
            padding: 10px;
            text-align: center;
        }
    </style>

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-9">
                <div class="card">
                    <div class="card-header">{{ $service->name }}</div>
                    <div class="card-body">
                        @if(session('success'))
                            <div class="alert alert-success">{{ session('success') }}</div>
                        @endif

                        <form action="{{ route('construction.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="service_id" value="{{ $service->id }}">
                            <input type="hidden" name="office_id" value="{{ $office->id }}">
                            <input type="hidden" name="customer_id" value="{{ Auth::guard('customer')->user()->id }}">
                            <input type="hidden" name="status" value="request">
                            <input type="hidden" id="city" name="city">
                            <input type="hidden" id="subcity" name="subcity">
                            <input type="hidden" id="woreda" name="woreda_id">

                            @if ($errors->any())
                                <div style="color: red;">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            <div class="row">
                                <div class="section-title">🏠 Odeeffannoo Waligaalaa</div>

                                <div class="form-group col-md-4">
                                    <label for="plan_agreement_request_id">Plan Agreement Request</label>
                                    <select class="form-control" id="plan_agreement_request_id" name="plan_agreement_number" required>
                                        <option value="">Select a Plan</option>
                                        @foreach($plans as $plan)
                                            <option value="{{ $plan->application_number }}">{{ $plan->application_number }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group col-md-4">
                                    <label for="level">Level</label>
                                    <select name="level" id="level-select" class="form-control">
                                        <option value="City">City</option>
                                        <option value="Subcity">Subcity</option>
                                        <option value="Woreda">Woreda</option>
                                    </select>
                                </div>

                                <!-- Subcity -->
                                <div class="form-group col-md-4" id="subcity-container">
                                    <label>Subcity</label>
                                    <select name="subcity_id" id="subcity_id" class="form-control">
                                        <option value="">Kutaa Magaalaa Filadhu</option>
                                        @foreach ($subcities as $subcity)
                                            <option value="{{ $subcity->id }}">{{ $subcity->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <!-- Woreda -->
                                <div class="form-group col-md-4" id="woreda-container">
                                    <label>Woreda</label>
                                    <select name="woreda_id" id="woreda_id" class="form-control">
                                        <option value="">Aanaa Filadhu</option>
                                    </select>
                                </div>

                                <div class="form-group col-md-4">
                                    <label>Above Ground Floors</label>
                                    <input type="number" id="above_ground_floor" name="above_ground_floor" class="form-control" required>
                                </div>

                                <div class="form-group col-md-4">
                                    <label>Underground Floors</label>
                                    <input type="number" id="under_ground_floors" name="under_ground_floors" class="form-control" required>
                                </div>

                                <div class="form-group col-md-4">
                                    <label>Total Floors</label>
                                    <input type="number" id="floor" name="total_floors" class="form-control" readonly required>
                                </div>

                                <div class="form-group col-md-4">
                                    <label>Above Ground Height</label>
                                    <input type="number" name="above_ground" class="form-control" required>
                                </div>

                                <div class="form-group col-md-4">
                                    <label>Underground Height</label>
                                    <input type="number" name="under_ground_height" class="form-control" required>
                                </div>

                                <div class="form-group col-md-4">
                                    <label>Consultant Name</label>
                                    <input type="text" name="consultant_name" class="form-control" required>
                                </div>

                                <div class="form-group col-md-4">
                                    <label>Consultant Grade</label>
                                    <input type="text" name="consultant_grade" class="form-control" required>
                                </div>

                                <div class="form-group col-md-6">
                                    <label>Consultant Phone</label>
                                    <input type="text" name="consultant_phone" class="form-control" required>
                                </div>

                                <div class="form-group col-md-6">
                                    <label>Consultant Address</label>
                                    <input type="text" name="consultant_address" class="form-control" required>
                                </div>

                                <div class="form-group col-md-6">
                                    <label>Faayiloota Duuka Deemtu<span class="text-danger">*</span></label>
                                    <div class="file-input">
                                        <input type="file" name="files" class="form-control" required>
                                        <small>Allowed formats: PDF</small>
                                    </div>
                                    <span style="font-family: monospace;font-style: italic">🚀<u style="color: red">Hubachiisa:</u> Ragaa duuka deemituu Iskaan ta’e pdf tokkoon taa'u qaba.</span>
                                </div>
                            </div>

                            <p class="mt-3">
                                Ani maqaan Koo kan gaditti kan ibsame... heyyamni ijaarsaa akka naaf kennamuu gaafadha.
                            </p>

                            <button type="submit" class="btn btn-primary mt-3 form-control">Submit</button>
                        </form>
                    </div>
                </div>
            </div>

            <div class="col-md-3" style="background-color: white">
                <h2>Ulaagalee Barbaachisan</h2>
                <hr>
                <ol>
                    <li>Kaartaa</li>
                    <li>Mirga Misoomsuu</li>
                    <li>Bakka Bu’ummaa fi Gibira Bara Kaffaluu</li>
                </ol>
                <hr>
                <p>Ragaa Duuka Deemituu:</p>
                <ol>
                    <li>📂 Kaartaa</li>
                    <li>📂 Gibira/Lizii bara kafalame</li>
                    <li>📂 Waraqaa eenyummaa</li>
                    <li>📂 Bakka bu’ummaa (yoo jiraate)</li>
                </ol>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // Level visibility toggle
        document.addEventListener("DOMContentLoaded", function () {
            let levelSelect = document.getElementById("level-select");
            let subcityContainer = document.getElementById("subcity-container");
            let woredaContainer = document.getElementById("woreda-container");

            function updateVisibility() {
                let selectedLevel = levelSelect.value;
                subcityContainer.style.display = selectedLevel !== "City" ? "block" : "none";
                woredaContainer.style.display = selectedLevel === "Woreda" ? "block" : "none";
            }

            levelSelect.addEventListener("change", updateVisibility);
            updateVisibility();
        });

        // Load woredas dynamically
        $('#subcity_id').change(function () {
            let subcity_id = $(this).val();
            $.get('/get-woredas/' + subcity_id, function (data) {
                $('#woreda_id').empty().append('<option value="">Select Woreda</option>');
                $.each(data, function (i, woreda) {
                    $('#woreda_id').append(`<option value="${woreda.id}">${woreda.name}</option>`);
                });
            });
        });

        // Fetch city/subcity/woreda from plan
        $('#plan_agreement_request_id').on('change', function () {
            let planId = $(this).val();
            if (planId) {
                $.get('/get-plan-agreementId/' + planId, function (response) {
                    $('#city').val(response.city || '');
                    $('#subcity').val(response.subcity || '');
                    $('#woreda').val(response.woreda || '');
                });
            }
        });

        // Auto-calculate total floors
        function calculateTotalFloors() {
            let above = parseInt($('#above_ground_floor').val()) || 0;
            let under = parseInt($('#under_ground_floors').val()) || 0;
            $('#floor').val(above + under);
        }

        $('#above_ground_floor, #under_ground_floors').on('input', calculateTotalFloors);
    </script>
@endsection