@extends('components.customer_layout')
@section('customer-content')

<div class="container-fluid">
    <div class="row">
        <div class="col col-md-9">
            <div class="card border-0 shadow-lg" style="border-radius: 15px; overflow: hidden;">
                <div class="card-header py-3" style="background: linear-gradient(135deg, #2fe4cc 0%, #1B5E20 100%);">
                    <h3 class="mb-0 text-white text-center">
                        <i class="fas fa-id-card-alt me-2"></i> Request - {{ $service->name }}
                    </h3>
                </div>
                <div class="card-body p-4">
                    @if (session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="fas fa-check-circle me-2"></i> {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif
                    @if ($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    <form action="{{ route('mq.id.correction.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-header mb-4">
                            <h4 class="text-center mb-4" style="color: #2c3e50; font-weight: 600; border-bottom: 2px solid #3498db; padding-bottom: 8px;">
                                <i class="fas fa-map-marker-alt me-2"></i> Sadarkaa Iyyannoo
                            </h4>
                        </div>

                        <div class="card shadow-sm mb-4 border-0" style="border-radius: 12px;">
                            <div class="card-body">
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <div >
                                            <select name="level" class="form-select" 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>
                                            <label for="level-select">Application Level</label>
                                        </div>
                                    </div>

                                    <div class="col-md-4" id="subcity-field" style="display: {{ $service->is_city ? 'none' : 'block' }};">
                                        <div >
                                            <select name="subcity_id" id="subcity_id" class="form-select" {{ $service->is_city ? 'disabled' : '' }}>
                                                @foreach ($subcities as $subcity)
                                                    <option value="{{ $subcity->id }}" {{ old('subcity_id') == $subcity->id ? 'selected' : '' }}>
                                                        {{ $subcity->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <label for="subcity_id">Kutaa Magaalaa (Subcity)</label>
                                        </div>
                                    </div>

                                    <div class="col-md-4" id="woreda-field" style="display: {{ $service->is_woreda ? 'block' : 'none' }};">
                                        <div >
                                            <select name="woreda_id" id="woreda_id" class="form-select" {{ $service->is_woreda ? '' : 'disabled' }}>
                                                <option value="">Select Woreda</option>
                                            </select>
                                            <label for="woreda_id">Aanaa (Woreda)</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="section-header mb-4">
                            <h4 class="text-center mb-4" style="color: #2c3e50; font-weight: 600; border-bottom: 2px solid #3498db; padding-bottom: 8px;">
                                <i class="fas fa-home me-2"></i> Odeeffannoo Teessoo Abbaa Dhimmaa
                            </h4>
                        </div>

                        <div class="card shadow-sm mb-4 border-0" style="border-radius: 12px;">
                            <div class="card-body">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <div >
                                            <select name="user_subcity_id" id="user_subcity_id" class="form-select" required>
                                                @foreach ($subcities as $subcity)
                                                    <option value="{{ $subcity->id }}" {{ old('user_subcity_id') == $subcity->id ? 'selected' : '' }}>
                                                        {{ $subcity->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            
                                        </div>
                                        <label  for="user_subcity_id">Kutaa Magaalaa (Subcity)</label>
                                    </div>
                                    <div class="col-md-6">
                                        <div >
                                            <select name="user_woreda_id" id="user_woreda_id" class="form-select" required>
                                                <option value="">Select Woreda</option>
                                            </select>
                                            <label for="user_woreda_id">Aanaa (Woreda)</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="section-header mb-4">
                            <h4 class="text-center mb-4" style="color: #2c3e50; font-weight: 600; border-bottom: 2px solid #3498db; padding-bottom: 8px;">
                                <i class="fas fa-edit me-2"></i> Correction Information
                            </h4>
                        </div>

                        <div class="card shadow-sm mb-4 border-0" style="border-radius: 12px;">
                            <div class="card-body">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <div >
                                            <select name="correction_type" id="correction_type" class="form-select">
                                                <option value="spelling_error">Spelling Error</option>
                                                <option value="name_change">Name Change</option>
                                                <option value="birth_date_change">Birth Date Change</option>
                                                <option value="house_number_change">House Number Change</option>
                                                <option value="birthplace_change">Birthplace Change</option>
                                                <option value="job_position_change">Job Position Change</option>
                                            </select>
                                            <label for="correction_type">Correction Type</label>
                                        </div>
                                    </div>
                                </div>

                                <div id="spelling-error-form" class="correction-form mt-4" style="display: none;">
                                    <div class="row g-3">
                                        <div class="col-12">
                                            <div >
                                                <textarea name="corrected_spelling_description" class="form-control" style="height: 100px">{{ old('corrected_spelling_description') }}</textarea>
                                                <label for="corrected_spelling_description">Corrected Spelling Description</label>
                                            </div>
                                        </div>

                                        <div class="section-header mt-4 mb-3">
                                            <h5 class="text-center" style="color: #2c3e50; font-weight: 600;">
                                                <i class="fas fa-paperclip me-2"></i> Ulaagalee
                                            </h5>
                                        </div>

                                        <div class="col-12">
                                            <div class="file-upload-card p-4 text-center" style="border: 2px dashed #ddd; border-radius: 10px;">
                                                <i class="fas fa-cloud-upload-alt fa-3x mb-3" style="color: #3498db;"></i>
                                                <h6 class="text-danger mb-3">Revenue receipt (Mandatory) and Additional document (Optional)</h6>
                                                <input type="file" name="spelling_error_file" class="d-none" id="spellingErrorFile" accept="application/pdf,image/*">
                                                <label for="spellingErrorFile" class="btn btn-outline-primary">
                                                    <i class="fas fa-folder-open me-2"></i> Choose File
                                                </label>
                                                <div class="file-name mt-2 small text-muted">No file chosen</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div id="name-change-form" class="correction-form mt-4" style="display: none;">
                                    <div class="row g-3">
                                        <div class="col-md-4">
                                            <div class="form-check-card p-3" style="border-radius: 8px; background-color: #f8f9fa;">
                                                <div class="form-check form-switch">
                                                    <input class="form-check-input" type="checkbox" name="name_change_first_name" value="1" id="firstNameCheck">
                                                    <label class="form-check-label" for="firstNameCheck">First Name</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-check-card p-3" style="border-radius: 8px; background-color: #f8f9fa;">
                                                <div class="form-check form-switch">
                                                    <input class="form-check-input" type="checkbox" name="name_change_fathers_name" value="1" id="fatherNameCheck">
                                                    <label class="form-check-label" for="fatherNameCheck">Father's Name</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-check-card p-3" style="border-radius: 8px; background-color: #f8f9fa;">
                                                <div class="form-check form-switch">
                                                    <input class="form-check-input" type="checkbox" name="name_change_grandfathers_name" value="1" id="grandfatherNameCheck">
                                                    <label class="form-check-label" for="grandfatherNameCheck">Grandfather's Name</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-check-card p-3" style="border-radius: 8px; background-color: #f8f9fa;">
                                                <div class="form-check form-switch">
                                                    <input class="form-check-input" type="checkbox" name="name_change_mothers_name" value="1" id="motherNameCheck">
                                                    <label class="form-check-label" for="motherNameCheck">Mother's Name</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-check-card p-3" style="border-radius: 8px; background-color: #f8f9fa;">
                                                <div class="form-check form-switch">
                                                    <input class="form-check-input" type="checkbox" name="name_change_mothers_fathers_name" value="1" id="motherFatherNameCheck">
                                                    <label class="form-check-label" for="motherFatherNameCheck">Mother's Father's Name</label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="section-header mt-4 mb-3">
                                            <h5 class="text-center" style="color: #2c3e50; font-weight: 600;">
                                                <i class="fas fa-paperclip me-2"></i> Ulaagalee
                                            </h5>
                                        </div>

                                        <div class="col-12">
                                            <div class="file-upload-card p-4 text-center" style="border: 2px dashed #ddd; border-radius: 10px;">
                                                <i class="fas fa-cloud-upload-alt fa-3x mb-3" style="color: #3498db;"></i>
                                                <h6 class="text-danger mb-3">Court-issued letter and revenue receipt</h6>
                                                <input type="file" name="name_change_file" class="d-none" id="nameChangeFile" accept="application/pdf,image/*">
                                                <label for="nameChangeFile" class="btn btn-outline-primary">
                                                    <i class="fas fa-folder-open me-2"></i> Choose File
                                                </label>
                                                <div class="file-name mt-2 small text-muted">No file chosen</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div id="birth-date-change-form" class="correction-form mt-4" style="display: none;">
                                    <div class="section-header mb-3">
                                        <h5 class="text-center" style="color: #2c3e50; font-weight: 600;">
                                            <i class="fas fa-paperclip me-2"></i> Ulaagalee
                                        </h5>
                                    </div>
                                    <div class="col-12">
                                        <div class="file-upload-card p-4 text-center" style="border: 2px dashed #ddd; border-radius: 10px;">
                                            <i class="fas fa-cloud-upload-alt fa-3x mb-3" style="color: #3498db;"></i>
                                            <h6 class="text-danger mb-3">Birth certificate or Ministry-issued card and revenue receipt</h6>
                                            <input type="file" name="birth_date_change_file" class="d-none" id="birthDateChangeFile" accept="application/pdf,image/*">
                                            <label for="birthDateChangeFile" class="btn btn-outline-primary">
                                                <i class="fas fa-folder-open me-2"></i> Choose File
                                            </label>
                                            <div class="file-name mt-2 small text-muted">No file chosen</div>
                                        </div>
                                    </div>
                                </div>

                                <div id="house-number-change-form" class="correction-form mt-4" style="display: none;">
                                    <div class="section-header mb-3">
                                        <h5 class="text-center" style="color: #2c3e50; font-weight: 600;">
                                            <i class="fas fa-paperclip me-2"></i> Ulaagalee
                                        </h5>
                                    </div>
                                    <div class="col-12">
                                        <div class="file-upload-card p-4 text-center" style="border: 2px dashed #ddd; border-radius: 10px;">
                                            <i class="fas fa-cloud-upload-alt fa-3x mb-3" style="color: #3498db;"></i>
                                            <h6 class="text-danger mb-3">House agreement/map, Letter from Woreda Manager,Revenue receipt</h6>
                                            <input type="file" name="house_number_change_file" class="d-none" id="houseNumberChangeFile" accept="application/pdf,image/*">
                                            <label for="houseNumberChangeFile" class="btn btn-outline-primary">
                                                <i class="fas fa-folder-open me-2"></i> Choose File
                                            </label>
                                            <div class="file-name mt-2 small text-muted">No file chosen</div>
                                        </div>
                                    </div>
                                </div>

                                <div id="birthplace-change-form" class="correction-form mt-4" style="display: none;">
                                    <div class="section-header mb-3">
                                        <h5 class="text-center" style="color: #2c3e50; font-weight: 600;">
                                            <i class="fas fa-paperclip me-2"></i> Ulaagalee
                                        </h5>
                                    </div>
                                    <div class="col-12">
                                        <div class="file-upload-card p-4 text-center" style="border: 2px dashed #ddd; border-radius: 10px;">
                                            <i class="fas fa-cloud-upload-alt fa-3x mb-3" style="color: #3498db;"></i>
                                            <h6 class="text-danger mb-3">Relevant legal document and revenue receipt</h6>
                                            <input type="file" name="birthplace_change_file" class="d-none" id="birthplaceChangeFile" accept="application/pdf,image/*">
                                            <label for="birthplaceChangeFile" class="btn btn-outline-primary">
                                                <i class="fas fa-folder-open me-2"></i> Choose File
                                            </label>
                                            <div class="file-name mt-2 small text-muted">No file chosen</div>
                                        </div>
                                    </div>
                                </div>

                                <div id="job-position-change-form" class="correction-form mt-4" style="display: none;">
                                    <div class="section-header mb-3">
                                        <h5 class="text-center" style="color: #2c3e50; font-weight: 600;">
                                            <i class="fas fa-paperclip me-2"></i> Ulaagalee
                                        </h5>
                                    </div>
                                    <div class="col-12">
                                        <div class="file-upload-card p-4 text-center" style="border: 2px dashed #ddd; border-radius: 10px;">
                                            <i class="fas fa-cloud-upload-alt fa-3x mb-3" style="color: #3498db;"></i>
                                            <h6 class="text-danger mb-3">Letter from the concerned company</h6>
                                            <input type="file" name="job_position_change_file" class="d-none" id="jobPositionChangeFile" accept="application/pdf,image/*">
                                            <label for="jobPositionChangeFile" class="btn btn-outline-primary">
                                                <i class="fas fa-folder-open me-2"></i> Choose File
                                            </label>
                                            <div class="file-name mt-2 small text-muted">No file chosen</div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="text-center mt-4">
                            <button type="submit" class="btn btn-primary btn-lg px-5 py-3" style="background: linear-gradient(135deg, #2fe4cc 0%, #1B5E20 100%); border: none;">
                                <i class="fas fa-paper-plane me-2"></i> Submit Request
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col col-md-3 bg-white p-3">
            <h2>Ulaagalee Barbaachisan</h2>
            <hr>
            <div class="requirements-card p-4 mb-4" style="background-color: #f8f9fa; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
                <h3 class="text-center mb-4" style="color: #2c3e50; font-weight: 600; border-bottom: 2px solid #3498db; padding-bottom: 8px;">
                    <i class="fas fa-id-card me-2"></i>ID Correction Services
                </h3>

                <div class="requirements-list">
                    <div class="requirement-item mb-3 p-3" style="background-color: white; border-radius: 8px; border-left: 4px solid #3498db;">
                        <h5 class="fw-bold mb-2" style="color: #3498db;">
                            <i class="fas fa-check-circle me-2"></i>Your Case Should Be:
                        </h5>
                        <ul class="list-unstyled ps-4">
                            <li class="mb-2"><i class="fas fa-arrow-right text-muted me-2"></i>Spelling Error</li>
                            <li class="mb-2"><i class="fas fa-arrow-right text-muted me-2"></i>Name Change</li>
                            <li class="mb-2"><i class="fas fa-arrow-right text-muted me-2"></i>Birth Date Change</li>
                            <li class="mb-2"><i class="fas fa-arrow-right text-muted me-2"></i>House Number Change</li>
                            <li><i class="fas fa-arrow-right text-muted me-2"></i>Birthplace Change</li>
                        </ul>
                    </div>

                    <div class="requirement-item mb-3 p-3" style="background-color: white; border-radius: 8px; border-left: 4px solid #e74c3c;">
                        <h5 class="fw-bold mb-2" style="color: #e74c3c;">
                            <i class="fas fa-spell-check me-2"></i>Spelling Error Requirements
                        </h5>
                        <ul class="list-unstyled ps-4">
                            <li class="mb-2"><i class="fas fa-file-alt text-muted me-2"></i>Corrected spelling description</li>
                            <li><i class="fas fa-receipt text-muted me-2"></i>Revenue receipt and supporting document</li>
                        </ul>
                    </div>

                    <div class="requirement-item mb-3 p-3" style="background-color: white; border-radius: 8px; border-left: 4px solid #9b59b6;">
                        <h5 class="fw-bold mb-2" style="color: #9b59b6;">
                            <i class="fas fa-user-edit me-2"></i>Name Change Requirements
                        </h5>
                        <ul class="list-unstyled ps-4">
                            <li class="mb-2"><i class="fas fa-file-contract text-muted me-2"></i>Court-issued letter</li>
                            <li class="mb-2"><i class="fas fa-receipt text-muted me-2"></i>Revenue receipt</li>
                            <li class="mt-3">
                                <h6 class="fw-semibold"><i class="fas fa-info-circle me-2"></i>Possible Name Changes:</h6>
                                <ul class="list-unstyled ps-4">
                                    <li class="mb-1"><i class="fas fa-caret-right text-muted me-2"></i>First name</li>
                                    <li class="mb-1"><i class="fas fa-caret-right text-muted me-2"></i>Father's name</li>
                                    <li class="mb-1"><i class="fas fa-caret-right text-muted me-2"></i>Grandfather's name</li>
                                    <li class="mb-1"><i class="fas fa-caret-right text-muted me-2"></i>Mother's name</li>
                                    <li><i class="fas fa-caret-right text-muted me-2"></i>Mother's father's name</li>
                                </ul>
                            </li>
                        </ul>
                    </div>

                    <div class="requirement-item mb-3 p-3" style="background-color: white; border-radius: 8px; border-left: 4px solid #f39c12;">
                        <h5 class="fw-bold mb-2" style="color: #f39c12;">
                            <i class="fas fa-home me-2"></i>House Number Change Requirements
                        </h5>
                        <ul class="list-unstyled ps-4">
                            <li class="mb-2"><i class="fas fa-file-signature text-muted me-2"></i>House agreement/map</li>
                            <li class="mb-2"><i class="fas fa-envelope text-muted me-2"></i>Letter from Woreda Manager</li>
                            <li><i class="fas fa-receipt text-muted me-2"></i>Revenue receipt</li>
                        </ul>
                    </div>

                    <div class="requirement-item mb-3 p-3" style="background-color: white; border-radius: 8px; border-left: 4px solid #1abc9c;">
                        <h5 class="fw-bold mb-2" style="color: #1abc9c;">
                            <i class="fas fa-birthday-cake me-2"></i>Birth Date Change Requirements
                        </h5>
                        <ul class="list-unstyled ps-4">
                            <li class="mb-2"><i class="fas fa-certificate text-muted me-2"></i>Birth certificate or Ministry-issued card</li>
                            <li><i class="fas fa-receipt text-muted me-2"></i>Revenue receipt</li>
                        </ul>
                    </div>

                    <div class="requirement-item p-3" style="background-color: white; border-radius: 8px; border-left: 4px solid #3498db;">
                        <h5 class="fw-bold mb-2" style="color: #3498db;">
                            <i class="fas fa-briefcase me-2"></i>Job Position Change Requirements
                        </h5>
                        <ul class="list-unstyled ps-4">
                            <li><i class="fas fa-envelope-open-text text-muted me-2"></i>Letter from the concerned company</li>
                        </ul>
                    </div>
                </div>
            </div>
            <hr>

        </div>
    </div>
</div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            function toggleAddressFields() {
                var level = $('#level-select').val();
                if (level === 'city') {
                    $('#subcity-field').hide();
                    $('#woreda-field').hide();
                } else if (level === 'subcity') {
                    $('#subcity-field').show();
                    $('#woreda-field').hide();
                } else if (level === 'woreda') {
                    $('#subcity-field').show();
                    $('#woreda-field').show();
                }
            }

            toggleAddressFields();

            $('#level-select').change(function() {
                toggleAddressFields();
            });

            $('#subcity_id').change(function() {
                var subcity_id = $(this).val();
                if (subcity_id) {
                    $.ajax({
                        url: '/get-woredas/' + subcity_id,
                        type: 'GET',
                        success: function(data) {
                            $('#woreda_id').empty();
                            $('#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>
    <script>
        $(document).ready(function() {
            $('#correction_type').change(function() {
                var correctionType = $(this).val();
                $('.correction-form').hide();
                $('#' + correctionType.replace(/_/g, '-') + '-form').show();
            });

            $('#correction_type').change();
        });
    </script>
    <script>
        $(document).ready(function() {
            $('#user_subcity_id').change(function() {
                var subcity_id = $(this).val();
                if (subcity_id) {
                    $.ajax({
                        url: '/get-woredas/' + subcity_id,
                        type: 'GET',
                        success: function(data) {
                            $('#user_woreda_id').empty();
                            $('#user_woreda_id').append('<option value="">Select Woreda</option>');
                            $.each(data, function(key, value) {
                                $('#user_woreda_id').append('<option value="' + value.id + '">' + value.name + '</option>');
                            });
                        }
                    });
                } else {
                    $('#user_woreda_id').empty();
                    $('#user_woreda_id').append('<option value="">Select Woreda</option>');
                }
            });
        });
    </script>
@endsection