@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 #4CAF50;
        }

        .file-input {
            border: 2px dashed #ddd;
            padding: 10px;
            text-align: center;
        }
    </style>
<<<<<<< HEAD
    <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('construction.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" value="Adaamaa">
                            <input type="hidden" name="status" value="request">
                            <div class="row">

                                <div class="form-group col-md-4">
                                    <label for="city">City</label>
                                    <input type="text" name="city" id="city" value="Adaamaa" class="form-control"
                                           required readonly>
                                </div>
                                <input type="hidden" name="customer_id" id="customer_id"
                                       value="{{ Auth::guard('customer')->user()->id }}" class="form-control">
                                <input type="hidden" name="service_id" id="service_id" value="{{ $service->id }}"
                                       class="form-control">

                                <div class="form-group col-md-4">
                                    <label for="subcity">Subcity</label>
                                    <select name="subcity" id="subcity" class="form-control">
                                        @foreach($subcity as $item)
                                            <option value="{{ $item->id }}">{{ $item->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="woreda">Aanaa (Woreda)</label>
                                    <select name="woreda" id="woreda" class="form-control" required>
                                        <option value="">Select Woreda</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="level">Level</label>
                                    <select name="level" id="level" class="form-control">
                                        <option value="City">City</option>
                                        <option value="Subcity">Subcity</option>
                                        <option value="Woreda">Woreda</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="map_number">Construction Permit Number</label>
                                    <input type="text" name="construction_permits_number"
                                           id="construction_permits_number" class="form-control">
                                </div>
                                {{-- <input type="hidden" name="created_by" id="created_by" value="{{ Auth::guard('customer')->user()->full_name }}" class="form-control" readonly>--}}
                                <input type="hidden" name="office_id" id="office_id" value="{{ $service->office_id }}"
                                       class="form-control" readonly>
                            </div>
                            <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>
                            <button type="button" class="btn btn-primary" onclick="showConfirmation()">Submit</button>
                        </form>
                    </div>
                    <div id="confirmationPopup" class="modal fade" tabindex="-1" role="dialog" data-backdrop="static">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">Confirm Submission</h5>
                                    <!-- Proper Bootstrap close button -->
                                    <button type="button" class="btn-close btn-close-red" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <p id="confirmationMessage"></p>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                    <button type="button" class="btn btn-primary" onclick="submitForm()">Confirm
                                    </button>
                                </div>
                            </div>
=======

<div class="container-fluid">
    <div class="row">
        <div class="col col-md-9">


<<<<<<< HEAD
=======
<div class="container-fluid">
    <div class="row">
        <div class="col col-md-9">


>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
        <div class="card">
            <div class="card-header">
                <h4>{{ $service->name }}</h4>
            </div>
            <div class="card-body">
                @if (session('success'))
                    <div class="alert alert-success">{{ session('success') }}</div>
                @endif

                <form id="requestForm" action="{{ route('extension-permission-requests.store') }}" method="POST"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="form-group col-md-4">
                            <label for="file">File</label>
                            <input type="file" name="file" id="file" class="form-control" required>
                        </div>
                        <div class="form-group col-md-4">
                            <label for="city">City</label>
                            <input type="text" name="city" id="city" value="Adaamaa" class="form-control"
                                required readonly>
                        </div>
                        <input type="hidden" name="customer_id" id="customer_id"
                            value="{{ Auth::guard('customer')->user()->id }}" class="form-control">
                        <input type="hidden" name="service_id" id="service_id" value="{{ $service->id }}"
                            class="form-control">

                        <div class="form-group col-md-4">
                            <label for="subcity">Subcity</label>
                            <select name="subcity" id="subcity" class="form-control">
                                @foreach ($subcity as $item)
                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-md-4">
                            <label for="woreda">Aanaa (Woreda)</label>
                            <select name="woreda" id="woreda" class="form-control" required>
                                <option value="">Select Woreda</option>
                            </select>
                        </div>

                        <div class="form-group col-md-4">
                            <label for="level">Level</label>
                            <select name="level" id="level" class="form-control">
                                <option value="City">City</option>
                                <option value="Subcity">Subcity</option>
                                <option value="Woreda">Woreda</option>
                            </select>
                        </div>




                        <div class="form-group col-md-4">
                            <label for="map_number">Construction Permit Number</label>
                            <input type="text" name="construction_permits_number" id="construction_permits_number"
                                class="form-control">
                        </div>
                        {{--                        <input type="hidden" name="created_by" id="created_by" value="{{ Auth::guard('customer')->user()->full_name }}" class="form-control" readonly> --}}
                        <input type="hidden" name="office_id" id="office_id" value="{{ $service->office_id }}"
                            class="form-control" readonly>
                    </div>
                    <button type="button" class="btn btn-primary" onclick="showConfirmation()">Submit</button>
                </form>
            </div>
            <!-- Confirmation Popup -->
            <!-- Confirmation Popup -->
            <div id="confirmationPopup" class="modal fade" tabindex="-1" role="dialog" data-backdrop="static">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Confirm Submission</h5>
                            <!-- Proper Bootstrap close button -->
                            <button type="button" class="btn-close btn-close-red" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p id="confirmationMessage"></p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-primary" onclick="submitForm()">Confirm</button>
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
                        </div>
                    </div>
                </div>
            </div>
            <div class="col col-md-3" style="background-color: white">
                <h3>Ulaagalee Barbaachisan</h3>
                <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>
<<<<<<< HEAD
<<<<<<< HEAD
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>

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

=======

>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25

    </div>
    <div class="col col-md-3" style="background-color: white">
        <h2>Ulaagalee Barbaachisan  </h2>
        <hr>
        <p> {{ $service->name }}</p>
        <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>
</div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>

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

            function showConfirmation() {
                let buildingType = $('#building_service option:selected').text();
                let subcity = $('#subcity option:selected').text();
                let woreda = $('#woreda option:selected').text();
                let createdBy = $('#created_by').val();
                let serviceName = "{{ $service->name }}";
                let map = $('#map_number').val();

<<<<<<< HEAD
<<<<<<< HEAD
                let createdAt = $('#previews_permit_isued_date').val();
=======
            let createdAt = $('#previews_permit_isued_date').val();
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
=======
            let createdAt = $('#previews_permit_isued_date').val();
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25

                let confirmationMessage = `
            Ani <strong>${createdBy}</strong> Magaaalaa Adaamaa, Kutaa Magaala <strong>${subcity}</strong>, Aanaa <strong>${woreda}</strong> kessattii kan argamu
            qabiyyee lakk.Kaartaa <strong>${map}</strong> gaafa <strong>${createdAt}</strong> tajaajila <strong>${buildingType}</strong> tiif  naaf kenname irratti
            tajaajila <strong>${serviceName}</strong> akka naaf mirkanaa’u waan barbaaduuf akka naaf rawwatamu
            kabajaan gaafadha.
        `;

                $('#confirmationMessage').html(confirmationMessage);
                $('#confirmationPopup').modal('show');
            }

            function submitForm() {
                $('#requestForm').submit();
            }
        </script>
@endsection