@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/logo.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('investment.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="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="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 class="mb-3 col-md-4">
                                        <label class="form-label">TIN</label>
                                        <input type="text" name="tin" class="form-control">
                                    </div>
                                </div>

                                <!-- Complaint Details -->
                                <div class="card shadow-sm p-3 w-100">
                                    <h5 class="card-title">Ibsa Piroojektii</h5>
                                    <div class="row">
                                        <div class="mb-3 col-md-12">
                                            <textarea name="description" class="form-control" required></textarea>
                                        </div>
                                    </div>
                                </div>

                        </div>
                        <!-- Complaint Details -->
                        <div class="card shadow-sm p-3 w-100">
                            <div class="row">
                                <div class="mb-3 col-md-6">
                                    <label class="form-label">Faayila Pirooposali</label>
                                    <div class="input-group">
                                        <!-- Hidden File Input -->
                                        <input type="file" name="proposal_file" class="form-control">
                                    </div>
                                </div>
                                <div class="mb-3 col-md-6">
                                    <label class="form-label">Faayiloota adda addaa fe'i</label>
                                    <div class="input-group">
                                        <input type="file" name="file" class="form-control">
                                    </div>
                                </div>
                            </div>
                            <!-- Display the selected file name -->
                            <div class="mt-3">
                                <label class="form-label">Faayila filatame:</label>
                                <p id="file-name"></p> <!-- This will show the file name -->
                            </div>
                        </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 simannaa gaaffii babal'ifannaa pirojeektoota guutuu qabu </h2>
                <ol>
                    <li> Poropozaala pirojeektii dhaabbata yookiin qaama seera qabeessummaa qabaachu isaa agarsiiu
                        waliin walqabsiisee dhiheessu qaba.
                    </li>
                    <li> Kaappitaala pirojeektichaaf qophaa'e keessaa % 30 Baankiitti kuufamee jiraachuu isaa fi sochii
                        maallaqa baankii yoo xiqqaate kan ji'a jahaa fi isaa ol kan agarsiisu.
                    </li>
                    <li> Heeyyama daldalaa koppii isaa dhihaate jiraachuu qaba.</li>
                    <li> Heeyyama Invastimantii yoo qabaatan Kooppii isaa dhihaachuu qaba.</li>
                    <li> Ragaa kaffaltii mindaa hojjatootaa itti kaffalame "payroll" ji'a sadii wayitaawaa walitti aanee
                        jiru dhihaachuu qaba.
                    </li>
                    <li> Dhaabbata gurmaa'e invastimantiitti gale yoo ta'e dokumeentii hundeeffamaa fi ittiin bulmaataa
                        koppii isaa dhiheessu qaba.
                    </li>
                    <li> Abbaa qabeenyaa biyya alaa yoo ta'e Heeyyama invastimantii haaromfame.</li>
                    <li> Ragaa qabiyyee lafa invastimantii duraaf kennamee koppii isaa.</li>
                    <li> Waliigaltee Invastimantii fi liizii lafaa akkasumas armaan dura laficha liiziidhaan waliigaltee
                        kan kennameef yoo ta'e waliigaltee liizii kan dhiheessu.
                    </li>
                    <p style="font-family: monospace;color: red"><strong>Hubachisa:</strong> Ulaagaalee armaan olitti
                        tarreefaman kana yoo hin guuttannee gaaffin keessan fudhatama hin argatu!.</p>
                </ol>
            </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>');
            }
        });
    </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
        });
        document.getElementById('file-icon1').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