@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;
        }
<<<<<<< HEAD
=======
        
        .btn-close-red {
            color: red;
        }
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
    </style>

    <div class="container mt-4">
        <div class="row">
            <div class="col col-md-9">
                <div class="card">
                    <div class="card-header">
<<<<<<< HEAD
                        {{ $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">

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

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

                        <form id="requestForm" action="{{ route('complateddesign-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>

                                <div class="form-group col-md-4">
                                    <label for="subcity">Subcity</label>
                                    <select name="subcity" id="subcity" class="form-control" required>
                                        @foreach ($subcity as $item)
                                            <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" required>
                                        <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>
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
                                    </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="building_service">Building Service</label>
                                    <select name="building_service" id="building_service" class="form-control" required>
                                        <option value="">Select Building Service</option>
                                        <option
                                            value="Daldalaaf" {{ old('building_service') == 'Daldalaaf' ? 'selected' : '' }}>
                                            Daldalaaf
                                        </option>
                                        <option
                                            value="Mana Jireenyaatiif" {{ old('building_service') == 'Mana Jireenyaatiif' ? 'selected' : '' }}>
                                            Mana Jireenyaatiif
                                        </option>
=======
                                    <label for="building_service">Building Service</label>
                                    <select name="building_service" id="building_service" class="form-control" required>
                                        <option value="">Select Building Service</option>
                                        <option value="Daldalaaf" {{ old('building_service') == 'Daldalaaf' ? 'selected' : '' }}>Daldalaaf</option>
                                        <option value="Mana Jireenyaatiif" {{ old('building_service') == 'Mana Jireenyaatiif' ? 'selected' : '' }}>Mana Jireenyaatiif</option>
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
                                    </select>
                                </div>

                                <div class="form-group col-md-4">
                                    <label for="map_number">Map Number</label>
                                    <input type="text" name="map_number" id="map_number" class="form-control">
                                </div>
<<<<<<< HEAD
                                <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>
                                <div class="form-group col-md-6">
                                    <label for="previews_permit_isued_date">Previews prmit issued date</label>
                                    <input type="date" name="previews_permit_isued_date" id="previews_permit_isued_date"
                                           value="" 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="service_id" id="created_by" value="{{$service->id}}"
                                       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 form-control" onclick="showConfirmation()">Submit</button>
                        </form>
                    </div>
                </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>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col col-md-3" style="background-color: white">
                <h2>Ulaagalee Barbaachisan</h2>
                <hr>
=======
                                <div class="form-group col-md-4">
                                    <label for="construction_permits_number">Construction Permit Number</label>
                                    <input type="text" name="construction_permits_number" id="construction_permits_number" class="form-control">
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="previews_permit_isued_date">Previous permit issued date</label>
                                    <input type="date" name="previews_permit_isued_date" id="previews_permit_isued_date" class="form-control">
                                </div>

                                <input type="hidden" name="created_by" value="{{ Auth::guard('customer')->user()->full_name }}">
                                <input type="hidden" name="service_id" value="{{ $service->id }}">
                                <input type="hidden" name="office_id" value="{{ $service->office_id }}">
                            </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>
                                    <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-bs-dismiss="modal">Cancel</button>
                                    <button type="button" class="btn btn-primary" onclick="submitForm()">Confirm</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
=======
                        <h4>{{ $service->name }}</h4>
                    </div>
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <div class="card-body">
                        @if (session('success'))
                            <div class="alert alert-success">{{ session('success') }}</div>
                        @endif

                        <form id="requestForm" action="{{ route('complateddesign-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>

                                <div class="form-group col-md-4">
                                    <label for="subcity">Subcity</label>
                                    <select name="subcity" id="subcity" class="form-control" required>
                                        @foreach ($subcity as $item)
                                            <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" required>
                                        <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="building_service">Building Service</label>
                                    <select name="building_service" id="building_service" class="form-control" required>
                                        <option value="">Select Building Service</option>
                                        <option value="Daldalaaf" {{ old('building_service') == 'Daldalaaf' ? 'selected' : '' }}>Daldalaaf</option>
                                        <option value="Mana Jireenyaatiif" {{ old('building_service') == 'Mana Jireenyaatiif' ? 'selected' : '' }}>Mana Jireenyaatiif</option>
                                    </select>
                                </div>

                                <div class="form-group col-md-4">
                                    <label for="map_number">Map Number</label>
                                    <input type="text" name="map_number" id="map_number" class="form-control">
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="construction_permits_number">Construction Permit Number</label>
                                    <input type="text" name="construction_permits_number" id="construction_permits_number" class="form-control">
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="previews_permit_isued_date">Previous permit issued date</label>
                                    <input type="date" name="previews_permit_isued_date" id="previews_permit_isued_date" class="form-control">
                                </div>

                                <input type="hidden" name="created_by" value="{{ Auth::guard('customer')->user()->full_name }}">
                                <input type="hidden" name="service_id" value="{{ $service->id }}">
                                <input type="hidden" name="office_id" value="{{ $service->office_id }}">
                            </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>
                                    <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-bs-dismiss="modal">Cancel</button>
                                    <button type="button" class="btn btn-primary" onclick="submitForm()">Confirm</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
            </div>

            <div class="col col-md-3" style="background-color: white">
                <h2>Ulaagalee Barbaachisan</h2>
                <hr>
                <p>{{ $service->name }}</p>
<<<<<<< HEAD
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
=======
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
                <ol>
                    <li>kaartaa,</li>
                    <li>mirga misoomsuu</li>
                    <li>bakka bu'ummaa fi gibira baraa kaffaluu</li>
                </ol>
<<<<<<< HEAD
<<<<<<< HEAD
                <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>
=======
                <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>
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
=======
                <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>
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
                <hr>
                <p>Ragaa duuka deemituu Kunniin</p>
                <ol>
                    <li>📂 Kaartaa</li>
                    <li>📂 Gibira/Lizii bara kafalame Nagahee</li>
                    <li>📂 Waraqaa eenyummaa</li>
<<<<<<< HEAD
<<<<<<< HEAD
                    <li>📂Bakka bu’a yoo ta’e Ragaa bakka bu’ummaa fi waraqaa eenyummaa</li>
                    </li>
                </ol>
            </div>

        </div>

        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#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().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().append('<option value="">Select Woreda</option>');
                    }
                });
            });
        </script>


        <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>');
                    }
                });
            });

            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 = `
=======
=======
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
                    <li>📂 Bakka bu'a yoo ta'e Ragaa bakka bu'ummaa fi waraqaa eenyummaa</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>');
                }
            });
        });

        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 = `
<<<<<<< HEAD
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
=======
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
            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.
        `;

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

            function submitForm() {
                $('#requestForm').submit();
            }
        </script>
=======
            $('#confirmationMessage').html(confirmationMessage);
            $('#confirmationPopup').modal('show');
        }

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

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