@extends('components.customer_layout')
@section('customer-content')
<<<<<<< HEAD
    <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">
                <div class="card">
                    <div class="card-header">
                        {{ $service->name }}
=======
<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;
    }

=======
<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;
    }

>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
    .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">

        <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 action="{{ route('court-order-permits.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @if ($errors->any())
                        <div style="color: red;">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <div class="row">
                        <input type="hidden" name="customer_id" class="form-control"
                               value="{{ Auth::guard('customer')->user()->id }}" id="customer_id" readonly>


                        <input type="hidden" name="customer_id" class="form-control" value="{{ Auth::guard('customer')->user()->id }}" id="customer_id" readonly>
                        <input type="hidden" name="service_id" class="form-control" value="{{$service->id}}" id="status_id" readonly>
                        <input type="hidden" name="office_id" class="form-control" value="{{$service->office_id}}" id="status_id" readonly>

                        <div class="form-group col-md-2">
                            <label class="form-label">City</label>
                            <input type="text" name="city" class="form-control" value="Adaamaa" id="city_id"
                                   readonly>
                        </div>
                        <div class="form-group col-md-3">
                            <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-3">
                            <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-3">
                            <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>
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
                    </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">
                            @if ($errors->any())
                                <div style="color: red;">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                            <div class="row">
                                <input type="hidden" name="customer_id" class="form-control"
                                       value="{{ Auth::guard('customer')->user()->id }}" id="customer_id" readonly>
                                <input type="hidden" name="customer_id" class="form-control"
                                       value="{{ Auth::guard('customer')->user()->id }}" id="customer_id" readonly>
                                <input type="hidden" name="service_id" class="form-control" value="{{$service->id}}"
                                       id="status_id" readonly>
                                <input type="hidden" name="office_id" class="form-control"
                                       value="{{$service->office_id}}" id="status_id" readonly>
                                <div class="form-group col-md-2">
                                    <label class="form-label">City</label>
                                    <input type="text" name="city" class="form-control" value="Adaamaa" id="city_id"
                                           readonly>
                                </div>
                                <div class="form-group col-md-3">
                                    <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-3">
                                    <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-3">
                                    <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>
                            <div class="form-group col-md-3">
                                <label class="form-label">Files</label>
                                <input type="file" name="files" class="form-control">
                            </div>
                            <span class="text text-danger">
                            <i class="fa fa-check-square"></i>	Xalayaa Ajaja mana Murtii ergamu,e.
                            <br>  <i class="fa fa-check-square"></i>	Bakka Bu’ummaa fi Waraqaa eenyumma qaama hordofuu
                        </span>
                    </div>

                    <!-- File Upload & Submit -->
                    <div class="card p-3">
                        <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
                            heeyyamnni itti fayyadama gamoo naaf kennamu ni iyyadhaa.
                        </p>

                        <button type="submit" class="btn btn-primary">Create Use Permit</button>
                    </div>
<<<<<<< HEAD
<<<<<<< HEAD
                    </form>
                </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>
=======

                </form>
         </div>
        </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>
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
        </div>
=======

                </form>
         </div>
        </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>
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25

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