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


    <style>
        .card-header {
            background-color: #f9f3c9;
            padding: 10px;
            border: 1px solid #f3e0a4;
            border-radius: 5px;
        }
    </style>
    <div class="mt-4 col-md-12">
        <div class="row">
            <div class="col col-md-8">
                <div class="card w-100">
                    <div class="container mt-1">
                        <div class="report-header"
                             style="text-align: center; border-bottom: 2px solid #000; padding-bottom: 10px; background: transparent; position: relative;">
                            <div class="card-header">
                                <!-- Image on the left corner -->
                                <img src="{{ asset('assets/images/logo.png') }}" class="img-circle"
                                     alt="Office Logo"
                                     style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 80px; height: 80px;">

                                <!-- Image on the right corner -->
                                <img src="{{ asset('assets/images/vera.png') }}" class="img-circle"
                                     alt="Office Logo"
                                     style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 80px; height: 80px;">

                                <h2 style="margin: 10px 0;"> {{ $office->name }}</h2>
                                <b>{{ $service->name }}</b><br>
                                <b>{{ Auth::guard('customer')->user()->full_name }}</b>
                            </div>
                        </div>
                        <div class="card-body">
                            @if (session('success'))
                                <div class="alert alert-success">{{ session('success') }}</div>
                            @endif
                            <form action="{{ route('civil.registration.store') }}" method="POST"
                                  enctype="multipart/form-data">
                                @csrf
                                @if ($errors->any())
                                    <div class="alert alert-danger">
                                        <ul>
                                            @foreach ($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif
                                <input type="hidden" name="customer_id"
                                       value="{{ Auth::guard('customer')->user()->id }}">
                                <input type="hidden" name="service_id" value="{{ $service->id }}">
                                <input type="hidden" name="office_id" value="{{ $office->id }}">
                                <input type="hidden" name="city" value="Adaamaa"
                                       id="city-container">
                                <!-- Customer Location Information -->
                                <div class="card shadow-sm p-3 mb-6 w-100">
                                    <h5 class="card-title text-center">Teessoo Iyyataa Fi Sadarkaa Iyyannoo</h5>
                                    <hr>
                                    <div class="row col-md-12">
                                        <div class="mb-3 col-md-4">
                                            <label class="form-label">Kutaa Magaalaa</label>
                                            <select name="subcity_id" id="customer_subcity_id" class="form-control">
                                                @foreach ($subcities as $subcity)
                                                    <option value="{{ $subcity->id }}">{{ $subcity->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mb-3 col-md-4">
                                            <label class="form-label">Aanaa</label>
                                            <select name="woreda_id" id="customer_woreda_id" class="form-control">
                                                <option value="">Aanaa Filadhu</option>
                                                <!-- Woreda options will be populated here -->
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <br>
                                <div class="row col-md-12">
                                    <h5 class="card-title text-center">Sadarkaa Iyyannoo</h5>

                                    {{-- Application Level --}}
                                    <div class="mb-3 col-md-4">
                                        <label class="form-label">Sadarkaa</label>
                                        <select name="level" class="form-control" id="level-select">
                                            <option value="city">Magaalaa</option>
                                            <option value="subcity">Kutaa Magaalaa</option>
                                            <option value="woreda">Aanaa</option>
                                        </select>
                                    </div>
                                    <!-- Subcity -->
                                    <div class="mb-3 col-md-4" id="subcity-container">
                                        <label class="form-label">Kutaa Magaalaa</label>
                                        <select name="subcity_id" id="application_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="mb-3 col-md-4" id="woreda-container">
                                        <label class="form-label">Aanaa</label>
                                        <select name="woreda_id" id="application_woreda_id" class="form-control">
                                            <option value="">Aanaa Filadhu</option>
                                            <!-- Woreda options will be populated here -->
                                        </select>
                                    </div>
                                </div>


                        </div>
                        <!-- Complaint Details -->
                        <div class="card shadow-sm p-3 w-100">
                            <div class="row">
                                <div class="col col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Faayiloota Barbaachisoo,ID,Certificate</label>
                                        <div class="input-group">
                                            <!-- Hidden File Input -->
                                            <input type="file" required name="files" class="form-control">
                                        </div>
                                        <div class="mt-3">
                                            <label class="form-label">Suura Abba Warraa</label>
                                            <!-- Hidden File Input -->
                                            <input required type="file" name="photo" class="form-control">

                                        </div>
                                        <div class="mt-3">
                                            <label class="form-label">Suura Haadha Warraa</label>
                                            <!-- Hidden File Input -->
                                            <input required type="file" name="wife_photo" class="form-control">

                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <ol>
                                        <p style="font-family: monospace;color: red">Faayiloonni Dirqamaa Upload ta'uu qaban</p>
                                        <li>Identity card of man(if he is foreign citizens submite unmarried certificate) *</li>
                                        <li>Waraqaa eenyummaa dubartoota( lammii biyya alaa yoo taate ragaa hin fuudhin galchi) *</li>
                                        <li>Suuraa Isaan laamanuu 1 tokko tokko(3X4) *</li>
                                        </ol>
                                </div>
                            </div>

                            <!-- Display the selected file name -->
                        </div>


                        <button type="submit" class="btn btn-success w-100">Submit</button>
                        </form>

                    </div>
                </div>
            </div>
            <div class="col col-md-4 border-2" style="background-color: #e0e3ef; color: black">
                <h2>Ulaagaalee Barbaachisan </h2>
                <hr>
                <ol>
                   <li> Wal fuutoonni lamaan guyyaa gaa’ela isaanii raawwachuuf murteeffatan yoo xiqqaate ji’a tokko dursanii qondaala galmee kabajaa beksisuu qabu.</li>
                    <li> Beeksisi guyyoota 15 ni Maxanfamaa. </li>
                        <li>Qamnii mormuu yoo jiratee guyya 5 keessa gabaasa gochuu qaba.</li>
                    <li> kan aadaa yoo ta'e waraqaa walii galtee fudhaa fi heerumaa ,kan sheri'aa yoo ta'e mana murtii sheeri'aatti waraqaa fidachuu akkasumaa kan amantaa orotooksii yoo ta'e mana amantaa ortooksiitii waraqaa fidachuu qabu.</li>
                    <li> Dhiirris ta’e dubartiin umuriin isaani waggaa 18 osoo hin guutiin gaa’elaa raawwachuu hin danda’an.</li>
                    <li> Wal futtootnii Waraqaa Eenyummaa ykn kan waajjiraa/Passportii haroomee qabachuu qabu.</li>
                    <li> kan fudhuus ta'ee kan heerumtuu lamii biyyaa alaa yoo ta'an Visa yk yello card qabachuu akkasumaa baqaataa yoo ta'ee heeyyaama kaampiidhaa kennameef qabachuu qaba. 6. Ragoonii Kara misirrichaa 2, karaa misirritiin 2 walumaagalatti ragoonni 4 dhiyyaachuu qabu Bakka bu'aa yoo ta'e Ragaa Bakka Bu'ummaa, namnii bakka bu'ee waraqaa Eenyuummaa kan hoaromee ykn Pass porti qabachuu qaba Gaa'ellii Guyyaa 30 gidduuttii raawwatee qarshii Laammii Itoophiyaa qarshii 60, kana Laammii Alaa qarshii 150, kan Guyyaa 30 darbee Galmee.Laammii Itoophiyaa qarshii 120 Kan Laammii Alaa qarshii 300 yoo baddee yoo manca'ee laammii Itoophiyaaf 200,Laammii Alaaf 400  </li></ol>
            </div>
        </div>
    </div>
    </div>
    </div>
    </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            let levelSelect = document.getElementById("level-select");
            let cityContainer = document.getElementById("city-container");
            let subcityContainer = document.getElementById("subcity-container");
            let woredaContainer = document.getElementById("woreda-container");

            function updateVisibility() {
                let selectedLevel = levelSelect.value;

                if (selectedLevel === "city") {
                    cityContainer.style.display = "block";
                    subcityContainer.style.display = "none";
                    woredaContainer.style.display = "none";
                } else if (selectedLevel === "subcity") {
                    cityContainer.style.display = "block";
                    subcityContainer.style.display = "block";
                    woredaContainer.style.display = "none";
                } else if (selectedLevel === "woreda") {
                    cityContainer.style.display = "block";
                    subcityContainer.style.display = "block";
                    woredaContainer.style.display = "block";
                }
            }

            // Attach event listener
            levelSelect.addEventListener("change", updateVisibility);

            // Initialize visibility on page load
            updateVisibility();
        });
    </script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script type="text/javascript">
        // For Customer Location Subcity change
        $('#customer_subcity_id').change(function () {
            var subcityID = $(this).val(); // Get selected subcity ID

            if (subcityID) {
                // AJAX request to fetch Woredas for the selected Subcity
                $.ajax({
                    url: '/locations/kebeles/' + subcityID, // Correct URL to fetch Woredas
                    type: 'GET',
                    dataType: 'json',
                    success: function (data) {
                        $('#customer_woreda_id').empty();
                        $('#customer_woreda_id').append('<option value="">Aanaa Filadhu</option>'); // Placeholder option
                        $.each(data, function (key, value) {
                            $('#customer_woreda_id').append('<option value="' + value.id + '">' + value.name + '</option>');
                        });
                    },
                    error: function (xhr, status, error) {
                        console.log("Error fetching Woredas: " + error);
                        $('#customer_woreda_id').empty().append('<option value="">No Woredas found</option>');
                    }
                });
            } else {
                $('#customer_woreda_id').empty().append('<option value="">Aanaa Filadhu</option>');
            }
        });

        // For Application Level Subcity change
        $('#application_subcity_id').change(function () {
            var subcityID = $(this).val(); // Get selected subcity ID for application level

            if (subcityID) {
                // AJAX request to fetch Woredas for the selected Subcity
                $.ajax({
                    url: '/locations/kebeles/' + subcityID, // Correct URL for fetching Woredas
                    type: 'GET',
                    dataType: 'json',
                    success: function (data) {
                        $('#application_woreda_id').empty();
                        $('#application_woreda_id').append('<option value="">Aanaa Filadhu</option>'); // Placeholder option
                        $.each(data, function (key, value) {
                            $('#application_woreda_id').append('<option value="' + value.id + '">' + value.name + '</option>');
                        });
                    },
                    error: function (xhr, status, error) {
                        console.log("Error fetching Woredas: " + error);
                        $('#application_woreda_id').empty().append('<option value="">No Woredas found</option>');
                    }
                });
            } else {
                $('#application_woreda_id').empty().append('<option value="">Aanaa Filadhu</option>');
            }
        });
        // Project Address
        $('#project_sub_city').change(function () {
            var subcityID = $(this).val(); // Get selected subcity ID for application level

            if (subcityID) {
                // AJAX request to fetch Woredas for the selected Subcity
                $.ajax({
                    url: '/locations/kebeles/' + subcityID, // Correct URL for fetching Woredas
                    type: 'GET',
                    dataType: 'json',
                    success: function (data) {
                        $('#project_woreda').empty();
                        $('#project_woreda').append('<option value="">Aanaa Filadhu</option>'); // Placeholder option
                        $.each(data, function (key, value) {
                            $('#project_woreda').append('<option value="' + value.id + '">' + value.name + '</option>');
                        });
                    },
                    error: function (xhr, status, error) {
                        console.log("Error fetching Woredas: " + error);
                        $('#project_woreda').empty().append('<option value="">No Woredas found</option>');
                    }
                });
            } else {
                $('#project_woreda').empty().append('<option value="">Aanaa Filadhu</option>');
            }
        });
    </script>

    <script type="text/javascript">
        // JavaScript to trigger the file input when the folder icon is clicked
        document.getElementById('file-icon').addEventListener('click', function () {
            document.getElementById('file-input').click();  // Trigger the hidden file input
        });

        // Show the selected file name after it's chosen
        document.getElementById('file-input').addEventListener('change', function () {
            const fileName = this.files.length > 0 ? this.files[0].name : '';  // Get file name
            document.getElementById('file-name').textContent = fileName ? fileName : 'Faayila tokko hin filatamne';  // Display the file name
        });
    </script>

@endsection