@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>
    <div class="container-fluid">
        <div class="row">
            <div class="col col-md-9">

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

                            <!-- Address Information -->
                            <div class="section-title">🏠 Address Information</div>

                            <div class="row">

                                    <input type="hidden" name="city" id="city" value="Adaamaa" class="form-control"
                                           required
                                           readonly>
=======
                <div class="card">
                    <div class="card-header">
                        <h4>{{ $service->name }}</h4>
                    </div>
                    <div class="card-body">
=======
                <div class="card">
                    <div class="card-header">
                        <h4>{{ $service->name }}</h4>
                    </div>
                    <div class="card-body">
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
                        @if (session('success'))
                            <div class="alert alert-success">{{ session('success') }}</div>
                        @endif

                        <form id="requestForm" action="{{ route('renewal.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>
<<<<<<< HEAD
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
=======
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25

                                <div class="form-group col-md-4">
                                    <label for="subcity">Subcity</label>
                                    <select name="subcity" id="subcity" class="form-control">
<<<<<<< HEAD
<<<<<<< HEAD
                                        @foreach($subcity as $item)
=======
                                        @foreach ($subcity as $item)
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
=======
                                        @foreach ($subcity as $item)
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
                                            <option value="{{ $item->id }}">{{ $item->name }}</option>
                                        @endforeach
                                    </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="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="map_number">Construction Permit Number</label>
                                    <input type="text" name="construction_permits_number"
<<<<<<< HEAD
<<<<<<< HEAD
                                           id="construction_permits_number"
                                           class="form-control">
=======
                                        id="construction_permits_number" class="form-control">
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
=======
                                        id="construction_permits_number" class="form-control">
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="map_number">Carta NUmber</label>
                                    <input type="text" name="carta_number" id="construction_permits_number"
<<<<<<< HEAD
<<<<<<< HEAD
                                           class="form-control">
=======
                                        class="form-control">
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
=======
                                        class="form-control">
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="map_number">Phone Number</label>
                                    <input type="text" name="phone" id="construction_permits_number"
<<<<<<< HEAD
<<<<<<< HEAD
                                           class="form-control">
=======
                                        class="form-control">
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
=======
                                        class="form-control">
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="map_number">Building Location</label>
                                    <input type="text" name="building_location" id="construction_permits_number"
<<<<<<< HEAD
<<<<<<< HEAD
                                           class="form-control">
=======
                                        class="form-control">
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
=======
                                        class="form-control">
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
                                </div>

                                <div class="form-group col-md-4">
                                    <label for="map_number">X </label>
                                    <input type="text" name="x_coordinate" id="construction_permits_number"
<<<<<<< HEAD
<<<<<<< HEAD
                                           class="form-control">
=======
                                        class="form-control">
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
=======
                                        class="form-control">
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="map_number">Y </label>
                                    <input type="text" name="y_coordinate" id="construction_permits_number"
<<<<<<< HEAD
<<<<<<< HEAD
                                           class="form-control">
=======
                                        class="form-control">
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
=======
                                        class="form-control">
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="map_number">Floor Number </label>
                                    <input type="text" name="floor_number" id="construction_permits_number"
<<<<<<< HEAD
<<<<<<< HEAD
                                           class="form-control">
=======
                                        class="form-control">
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
=======
                                        class="form-control">
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="map_number">Above Ground </label>
                                    <input type="text" name="above_ground" id="construction_permits_number"
<<<<<<< HEAD
<<<<<<< HEAD
                                           class="form-control">
=======
                                        class="form-control">
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
=======
                                        class="form-control">
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="map_number">Under Ground </label>
                                    <input type="text" name="under_ground" id="construction_permits_number"
<<<<<<< HEAD
<<<<<<< HEAD
                                           class="form-control">
=======
                                        class="form-control">
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
=======
                                        class="form-control">
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
                                </div>

                                <div class="form-group col-md-4">
                                    <label for="map_number">Construction Cost </label>
                                    <input type="text" name="construction_cost" id="construction_permits_number"
<<<<<<< HEAD
<<<<<<< HEAD
                                           class="form-control">
                                </div>

                                <input type="hidden" name="service_id" value="{{$service->id}}">
                                <input type="hidden" name="office_id" value="{{$service->office_id}}">

                                <input type="hidden" name="created_by" id="created_by"
                                       value="{{ Auth::guard('customer')->user()->full_name }}" 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>
=======
=======
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
                                        class="form-control">
                                </div>

                                <input type="hidden" name="service_id" value="{{ $service->id }}">
                                <input type="hidden" name="office_id" value="{{ $service->office_id }}">

                                <input type="hidden" name="created_by" id="created_by"
                                    value="{{ Auth::guard('customer')->user()->full_name }}" class="form-control"
                                    readonly>
<<<<<<< HEAD
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
=======
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
                            </div>
                            <button type="button" class="btn btn-primary" onclick="showConfirmation()">Submit</button>
                        </form>
                    </div>
                    <!-- Confirmation Popup -->
                    <!-- Confirmation Popup -->
<<<<<<< HEAD
<<<<<<< HEAD
                    <div id="confirmationPopup" class="modal fade" tabindex="-1" role="dialog" data-backdrop="static">
=======
                    <div id="confirmationPopup" class="modal fade" tabindex="-1" role="dialog"
                        data-backdrop="static">
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
=======
                    <div id="confirmationPopup" class="modal fade" tabindex="-1" role="dialog"
                        data-backdrop="static">
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
                        <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"
<<<<<<< HEAD
<<<<<<< HEAD
                                            aria-label="Close"></button>
=======
                                        aria-label="Close"></button>
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
=======
                                        aria-label="Close"></button>
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
                                </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>
<<<<<<< HEAD
<<<<<<< HEAD
                                    <button type="button" class="btn btn-primary" onclick="submitForm()">Confirm
                                    </button>
=======
                                    <button type="button" class="btn btn-primary"
                                        onclick="submitForm()">Confirm</button>
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
=======
                                    <button type="button" class="btn btn-primary"
                                        onclick="submitForm()">Confirm</button>
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
                                </div>
                            </div>
                        </div>
                    </div>

<<<<<<< HEAD
                </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
            <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>');
                                    });
                                }
=======
=======
                </div>
            </div>

>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
            <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>');
<<<<<<< HEAD
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
=======
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
                            });
                        } else {
                            $('#woreda').empty().append('<option value="">Select Woreda</option>');
                        }
                    });
                });

                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();

                    let createdAt = $('#previews_permit_isued_date').val();

                    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