@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 {
<<<<<<< HEAD
<<<<<<< HEAD
           font-size: 15px;
=======
            font-weight: bold;
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
=======
            font-weight: bold;
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
        }

        .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
<<<<<<< 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">🏠Building Information</div>
                            <div class="row">
                            <div class="row">
                                <div class="form-group col-md-4">
                                    <label class="form-label">Carta Number</label>
                                    <input type="text" name="carta_number" class="form-control" required
                                           placeholder="be care">
                                </div>
                                <div class="form-group col-md-4">
                                    <label class="form-label">Buil.Permission Number</label>
                                    <input type="text" name="building_permission_number" class="form-control" required
                                           placeholder="dirqama">
                                </div>
                                <div class="form-group col-md-4">
                                    <label class="form-label">Building.Classification</label>
=======
    {{-- <div class="container mt-4"> --}}
    <div class="container-fluid">
        <div class="row">
            <div class="col col-md-9">

=======
    {{-- <div class="container mt-4"> --}}
    <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>
                    @if ($errors->any())
                        <div style="color: red;">
                            <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 action="{{ route('use-permits.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf

                            <div class="row">
                                <h3 class=" "> Building Location </h3>
                                <br>
                                <br>
                                <input type="hidden" name="customer_id" class="form-control"
                                    value="{{ Auth::guard('customer')->user()->id }}" id="customer_id" readonly>
                                {{--                        <input type="hidden" name="country_id" class="form-control" value="Ethiopia" id="country_id" readonly> --}}
                                {{--                        <input type="hidden" name="region_id" class="form-control" value="Oromiyaa" id="region_id" readonly> --}}
                                <input type="hidden" name="office_id" class="form-control"
                                    value="{{ $service->office_id }}" id="office_id" readonly>
                                <input type="hidden" name="service_id" class="form-control" value="{{ $service->id }}"
                                    id="service_id" readonly>
                                {{--                        <input type="hidden" name="status_id" class="form-control" value="Oromiyaa" id="status_id" readonly> --}}

                                <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" id="subcity" class="form-control">
                                        @foreach ($subcities 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" 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>
                            <br><br><br>
                            <div class="row">
                                <h3 class=" "> Building Information </h3>
                                <br>
                                <br>
                                <br>
                                <br>
                                <div class="form-group col-md-3">
                                    <label class="form-label">Carta Number</label>
                                    <input type="text" name="carta_number" class="form-control" required
                                        placeholder="be care">
                                </div>
                                <div class="form-group col-md-3">
                                    <label class="form-label">Building Permission Number</label>
                                    <input type="text" name="building_permission_number" class="form-control" required
                                        placeholder="dirqama">
                                </div>
                                <div class="form-group col-md-3">
                                    <label class="form-label">Building Classification</label>
<<<<<<< HEAD
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
=======
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
                                    <select name="building_type" id="building_type" class="form-control">
                                        <option value="Gamoo sadarkaa A">Gamoo sadarkaa A</option>
                                        <option value="Gamoo sadarkaa B">Gamoo sadarkaa B</option>
                                        <option value="Gamoo sadarkaa C">Gamoo sadarkaa C</option>
                                    </select>
                                </div>
<<<<<<< HEAD
<<<<<<< HEAD
                                <div class="form-group col-md-4">
                                    <label class="form-label">Buil.Service</label>
=======
                                <div class="form-group col-md-3">
                                    <label class="form-label">Building Service</label>
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
=======
                                <div class="form-group col-md-3">
                                    <label class="form-label">Building Service</label>
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
                                    <select name="building_service" id="building_service" class="form-control">
                                        <option value="Daldalaaf">Daldalaaf</option>
                                        <option value="Mana Jireenyaatiif">Mana Jireenyaatiif</option>
                                    </select>
                                </div>
                                <br><br><br><br>
<<<<<<< HEAD
<<<<<<< HEAD
                                <div class="form-group col-md-4">
                                    <label class="form-label">Buil.Completed Date</label>
                                    <input type="date" name="building_completed_date" class="form-control">
                                </div>
                                <div class="form-group col-md-4">
                                    <label class="form-label">Building Location</label>
                                    <input type="text" name="building_location" class="form-control">
                                </div>
                                <div class="form-group col-md-4">
                                    <label class="form-label">Cons.Permit Number</label>
                                    <input type="text" name="construction_permit_number" class="form-control">
                                </div>
                                <div class="form-group col-md-4">
                                    <label class="form-label">Construction Cost</label>
                                    <input type="text" name="construction_cost" class="form-control">
                                </div>
                                <div class="form-group col-md-4">
=======
=======
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
                                <div class="form-group col-md-3">
                                    <label class="form-label">Building Completed Date</label>
                                    <input type="date" name="building_completed_date" class="form-control">
                                </div>
                                <div class="form-group col-md-3">
                                    <label class="form-label">Building Location</label>
                                    <input type="text" name="building_location" class="form-control">
                                </div>
                                <div class="form-group col-md-3">
                                    <label class="form-label">Construction Permit Number</label>
                                    <input type="text" name="construction_permit_number" class="form-control">
                                </div>
                                <div class="form-group col-md-3">
                                    <label class="form-label">Construction Cost</label>
                                    <input type="text" name="construction_cost" class="form-control">
                                </div>
                                <div class="form-group col-md-3">
<<<<<<< HEAD
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
=======
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
                                    <label class="form-label">Floor Number</label>
                                    <input type="text" name="floor_number" class="form-control">
                                </div>

<<<<<<< HEAD
<<<<<<< HEAD
                                <div class="form-group col-md-6">
                                    <label class="form-label">Under ground</label>
                                    <input type="text" name="under_ground" class="form-control">
                                </div>
                                <div class="form-group col-md-6">
                                    <label class="form-label">Above ground</label>
                                    <input type="text" name="above_ground" class="form-control">
                                </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
                                <div class="form-group col-md-3">
                                    <label class="form-label">Under ground</label>
                                    <input type="text" name="under_ground" class="form-control">
                                </div>
                                <div class="form-group col-md-3">
                                    <label class="form-label">Above ground</label>
                                    <input type="text" name="above_ground" class="form-control">
                                </div>
                                <div class="form-group col-md-3">
                                    <label class="form-label">Files</label>
                                    <input type="file" name="files" class="form-control">
<<<<<<< HEAD
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
=======
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
                                </div>
                            </div>

                            <!-- File Upload & Submit -->
                            <div class="card p-3">
<<<<<<< HEAD
<<<<<<< HEAD
                                <p>Dhimmoota armaan ollitti caqasaman hunda dubbise hubadhee kanan qalbeeffadhe yamuu
                                    ta’uu
                                    ragaan kene dhugaadhaa fii kan sirrii ta’uu isaa mirkkaneesaa raga sirrii hintaane
                                    yoon
                                    Kenne rakkoo uumamuuf itti gaafatamaa ta’uu koo beekee unkkaa iyyannoo kanaa irratti
                                    yoo
                                    ibsames ibsamuu baatus seerri heeyyama kamiin iyuu kan raawwatamu ta’uu isaa
                                    hubadhee akka
=======
=======
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
                                <p>Dhimmoota armaan ollitti caqasaman hunda dubbise hubadhee kanan qalbeeffadhe yamuu ta’uu
                                    ragaan kene dhugaadhaa fii kan sirrii ta’uu isaa mirkkaneesaa raga sirrii hintaane yoon
                                    Kenne rakkoo uumamuuf itti gaafatamaa ta’uu koo beekee unkkaa iyyannoo kanaa irratti yoo
                                    ibsames ibsamuu baatus seerri heeyyama kamiin iyuu kan raawwatamu ta’uu isaa hubadhee
                                    akka
<<<<<<< HEAD
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
=======
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
                                    heeyyamnni itti fayyadama gamoo naaf kennamu ni iyyadhaa.
                                </p>

                                <button type="submit" class="btn btn-primary">Create Use Permit</button>
                            </div>
<<<<<<< HEAD
<<<<<<< HEAD
                            </div>
=======

>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
=======

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

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

                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