@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: #2fe4cc;
            color: white;
            padding: 15px;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
        }

        .form-group label {
            font-weight: bold;
        }

        .btn-primary {
            background: #2fe4cc;
            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 #4CAF50;
        }

        .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">
                    Request - {{ $service->name }}
                </div>
                <div class="card-body">
                    @if (session('success'))
                        <div class="alert alert-success">{{ session('success') }}</div>
                    @endif
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                <form action="{{ route('mq.id.Idrequest.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="city_id" value="{{ $office->city->id }}" id="city-container">
                    <div class="section-title text-center">🏠 Sadarkaa Iyyannoo</div>
                    <br/>
                    <div class="row">
                        <div class="mb-3 col-md-4">
                            <select name="level" class="form-control" id="level-select" readonly>
                                @if ($service->is_city)
                                    <option value="city" selected>City</option>
                                @elseif($service->is_sub_city)
                                    <option value="subcity" selected>Subcity</option>
                                @elseif($service->is_woreda)
                                    <option value="woreda" selected>Woreda</option>
                                @endif
                            </select>
                        </div>
                    </div>
                  
                    <div class="section-title text-center">🏠 Odeeffannoo Teessoo Abbaa Dhimmaa</div>
                    <br/>
                    <div class="row">
                        <div class="form-group col-md-6">
                            <select name="subcity_id" id="user_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-6">
                           
                            <select name="woreda_id" id="user_woreda_id" class="form-control" required>
                                <option value="">Select Woreda</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label>Request Type</label>
                        <select name="request_type" class="form-control" required id="request_type">
                            <option value="new">New</option>
                            <option value="renew">Renew</option>
                        </select>
                    </div>
                    <div class="section-title text-center">📂 Ulaagalee </div>
                    <br/>
                    <div id="new_request_fields" class="request_fields">
                        <div class="form-group mb-3">
                            <label for="new_id_file"><span style="color: #ff1313; font-size: 15px; font-weight: bold;">One of the following (1 ,Previous manual ID, 2, Resignation letter from previous Woreda or City Administration Office,   Supporting letter from a governmental office , Grade 8 Ministry-issued document )House agreement/map/farmer book, Ketena form and  Revenue Receipt(All Mandatory),</span></label>
                            <input type="file" name="new_id_file" id="new_id_file" class="form-control"
                                accept="application/pdf,image/*">
                        </div>
                    </div>

                    <div id="renew_request_fields" class="request_fields" style="display: none;">
                        <div class="form-group mb-3">
                            <label for="renewal_id_file"><span style="color: #ff1313; font-size: 15px; font-weight: bold;">Previous digital ID,House agreement/map/farmer book, Ketena form and  Revenue Receipt(All Mandatory),</span></label>
                            <input type="file" name="renewal_id_file" id="renewal_id_file" class="form-control"
                                accept="application/pdf,image/*">
                        </div>
                        <div class="form-group mb-3">
                            <label for="renewal_supporting">Renewal supporting (Optional)</label>
                            <textarea name="renewal_supporting" id="renewal_supporting" class="form-control">{{ old('renewal_supporting') }}</textarea>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary mt-3">Submit</button>
                </div>
            </div>
        </div>
        <div class="col col-md-3" style="background-color: white">
            <h2>Ulaagalee Barbaachisan</h2>
            <hr>
            <ol>
                <h3>For New ID  Request </h3>
                <li>📂One of the following: </li>
                <ul>
                    <li>📂Previous manual ID</li>
                    <li>📂Resignation letter from previous Woreda or City Administration Office</li>
                    <li>📂Supporting letter from a governmental office</li>
                    <li>📂Grade 8 Ministry-issued document</li>
                </ul>
                
                <li>📂House agreement/map/farmer book</li>
                <li>📂Ketena form</li>
                <li>📂Waraqa Eegnuma haaromfamee qabachuu qaba</li>
                <li>📂Revenue receipt</li>
              
            </ol>
            <hr>
            <ol>
                <h3>For ID Renewal  </h3>
                <li>📂Previous digital ID </li>
                <li>📂House agreement/map/farmer book</li>
                <li>📂Ketena form</li>
                <li>📂Waraqa Eegnuma haaromfamee qabachuu qaba</li>
                <li>📂Revenue receipt</li>
                <li>📂Description ( updates for phone and emergency contact with phone, optional)</li>
              
            </ol>
        </div>

    </div>

</div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // Load woredas based on selected subcity
            function loadWoredas(subcityId, targetElement) {
                if (subcityId) {
                    $.ajax({
                        url: '/get-woredas/' + subcityId,
                        type: 'GET',
                        success: function(data) {
                            $(targetElement).empty().append('<option value="">Select Woreda</option>');
                            $.each(data, function(key, value) {
                                $(targetElement).append('<option value="' + value.id + '">' +
                                    value.name + '</option>');
                            });
                        }
                    });
                } else {
                    $(targetElement).empty().append('<option value="">Select Woreda</option>');
                }
            }

            // Event listeners
            $('#user_subcity_id').change(function() {
                loadWoredas($(this).val(), '#user_woreda_id');
            });

            // Load woredas on page load if a subcity is already selected
            if ($('#user_subcity_id').val()) {
                loadWoredas($('#user_subcity_id').val(), '#user_woreda_id');
            }

            // Show/hide request fields based on request type
            $('#request_type').change(function() {
                if ($(this).val() === 'new') {
                    $('#new_request_fields').show();
                    $('#renew_request_fields').hide();
                    $('#new_id_file').attr('required', true);
                    $('#renewal_id_file').removeAttr('required');
                } else {
                    $('#new_request_fields').hide();
                    $('#renew_request_fields').show();
                    $('#new_id_file').removeAttr('required');
                    $('#renewal_id_file').attr('required', true);
                }
            }).trigger('change'); // Trigger on load to set initial state
        });
    </script>
@endsection