@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: 800px;
            margin: auto;
            padding-top: 20px;
        }

        .section-title {
            font-size: 18px;
            font-weight: bold;
            margin-top: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #e1e5dd;
        }

        .file-input {
            border: 2px dashed #ddd;
            padding: 10px;
            text-align: center;
        }
    </style>
    <div class="container-fluid">
        <div class="row">
            <div class="col col-md-9">
                <div class="card">
                    <div class="card-header">
                        {{ $service->name }} Request Form
                    </div>
                    <div class="card-body">
                        @if (session('success'))
                            <div class="alert alert-success">{{ session('success') }}</div>
                        @endif
                        <form action="{{ route('complaint.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_id" value="{{ $office->city->id }}" id="city-container">

                            <!-- Customer Location Information -->
                            <div class="card shadow-sm p-3 mb-6 w-100">
                                <div class="section-title">🏠 Odeeffannoo Tessoo Abbaa Dhimmaa</div>
                                <hr>

                                @if (session('success'))
                                    <div class="alert alert-success">{{ session('success') }}</div>
                                @endif

                                <form action="{{ route('complaint.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_id" value="{{ $office->city->id }}"
                                        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">Subcity</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">Woreda</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">
                                        <div class="section-title">🏠 Sadarkaa Iyyannoo</div>
                                        <hr>

                                        {{-- 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">City</option>
                                                <option value="subcity">Subcity</option>
                                                <option value="woreda">Woreda</option>
                                            </select>
                                        </div>

                                        <!-- Subcity -->
                                        <div class="mb-3 col-md-4" id="subcity-container">
                                            <label class="form-label">Subcity</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">Woreda</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>

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

                                    <!-- Complaint Details -->
                                    <div class="form-group col-md-6">
                                        <label for="file">Upload File</label>
                                        <div class="file-input">
                                            <input type="file" name="files" class="form-control">
                                            <small>Allowed formats: PDF, JPG, PNG</small>
                                        </div>
                                    </div>

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

                    </div>
                </div>
            </div>
            <div class="col 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 baraa kaffaluu</li>
                </ol>

                <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>

                <hr>
                <p>Ragaa duuka deemituu Kunniin</p>
                <ol>
                    <li>📂 Kaartaa</li>
                    <li>📂 Gibira/Lizii bara kafalame Nagahee</li>
                    <li>📂 Waraqaa eenyummaa</li>
                    <li>📂Bakka bu’a yoo ta’e Ragaa bakka bu’ummaa fi waraqaa eenyummaa</li>
                    </li>
                </ol>
            </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
            });

            // 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>


        <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>
        <script>
            // 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
            });

            // 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