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

    @if ($errors->any())
        <div style="color: red;">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <h3 class="text-center">Welcome {{ Auth::guard('customer')->user()->full_name }}, ask it Freely</h3>
    <style>
        .card-header {
            background-color: #f9f3c9;
            padding: 10px;
            border: 1px solid #f3e0a4;
            border-radius: 5px;
        }
    </style>
    <div class="container mt-4">
        <div class="card">
            <div class="card-header">
                <h4>{{ $service->name }} Request Form</h4>
            </div>
            <div class="card-body">
                @if (session('success'))
                    <div class="alert alert-success">{{ session('success') }}</div>
                @endif

                <form action="{{ route('overlapcomplain.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <!-- Hidden Inputs for Service ID, Office ID, Customer ID, and City -->
                    <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="city" value="Adaamaa">

                    <div class="row">
                        <h5>Teessoo Gamoo (Address Information)</h5>
                        <br><br>

                        <div class="form-group col-md-4">
                            <label for="subcity_id">Kutaa Magaalaa (Subcity)</label>
                            <select name="subcity_id" id="subcity_id" class="form-control" required>
                                @foreach ($subcities as $subcity)
                                    <option value="{{ $subcity->id }}"
                                        {{ old('subcity_id') == $subcity->id ? 'selected' : '' }}>
                                        {{ $subcity->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group col-md-4">
                            <label for="woreda_id">Aanaa (Woreda)</label>
                            <select name="woreda_id" id="woreda_id" class="form-control" required>
                                <option value="">Select Woreda</option>
                            </select>
                        </div>

                        <br><br><br><br>
                        <br><br>
                       
                  
                        <div class="form-group col-md-4">
                            <label for="file_type">Ragaa abba qabiyyumma/Qaboo yaa’ii/ Murtee Kaabinee/Kaartaa</label>
                            <input type="file" name="file_type" class="form-control">
                        </div>

                        <br><br>
                        <p>
                            Kanaaf gaaffiin koo kun ilaalamee waligalteen pilaanii akka naaf kennamu gaafachaa ragaan ani
                            kenne kun sirrii fi dhugaa ta’uu isaa ni mirkaneessa.
                        </p>
                    </div>

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

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // When subcity is selected
            $('#subcity_id').change(function() {
                var subcity_id = $(this).val();
                if (subcity_id) {
                    $.ajax({
                        url: '/get-woredas/' + subcity_id, // Update this with your route
                        type: 'GET',
                        success: function(data) {
                            $('#woreda_id').empty(); // Clear the existing options
                            $('#woreda_id').append('<option value="">Select Woreda</option>');
                            $.each(data, function(key, value) {
                                $('#woreda_id').append('<option value="' + value.id +
                                    '">' + value.name + '</option>');
                            });
                        }
                    });
                } else {
                    $('#woreda_id').empty();
                    $('#woreda_id').append('<option value="">Select Woreda</option>');
                }
            });
        });
    </script>
@endsection