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

    <div class="container-fluid">
        <div class="row">
            <div class="col col-md-9">
                <div class="card">
                    <div class="card-header">
                        {{ $service->name }} Request Form
                    </div>
                    <div class="card-body">
                        @if(session('success'))
                            <div class="alert alert-success">{{ session('success') }}</div>
                        @endif

                        <form action="{{ route('construction.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="service_id" value="{{ $service->id }}">
                            <input type="hidden" name="office_id" value="{{ $office->id }}">
                            <input type="hidden" name="customer_id" value="{{ Auth::guard('customer')->user()->id }}">
                            <input type="hidden" name="city" value="Adaamaa">
                            <input type="hidden" name="status" value="request">
                            <div class="row">
                                <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>

                                @if ($errors->any())
                                    <div style="color: red;">
                                        <ul>
                                            @foreach ($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif
                                <div class="row">
                                    <div class="section-title">🏠Building Information</div>
                                    <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="Carta Number">
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label class="form-label">House Number</label>
                                        <input type="text" name="house_number" class="form-control" required
                                               placeholder="House Number">
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label class="form-label">Phone Number</label>
                                        <input type="text" name="phone" class="form-control" required
                                               placeholder="+251">
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label class="form-label">Buil.Permit Number</label>
                                        <input type="text" name="building_permission_number" class="form-control"
                                               required placeholder="">
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label class="form-label">Request Type</label>
                                        <select name="building_type" id="building_type" class="form-control">
                                            <option value="shade">Shade</option>
                                            <option value="Gamoo sadarkaa B">Gamoo sadarkaa B</option>
                                            <option value="Gamoo sadarkaa C">Gamoo sadarkaa C</option>
                                        </select>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label class="form-label">No.Property Verification</label>
                                        <input type="text" name="building_permission_number" class="form-control"
                                               required placeholder="">
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label class="form-label">Start Date</label>
                                        <input type="date" name="start_date" class="form-control" required
                                               placeholder="">
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label class="form-label">End Date</label>
                                        <input type="date" name="end_date" class="form-control" required
                                               placeholder="">
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label class="form-label">Area</label>
                                        <input type="text" name="rea" class="form-control" required
                                               placeholder="">
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label class="form-label">Requested Service</label>
                                        <input type="text" name="requested_service" class="form-control" required
                                               placeholder="">
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label class="form-label">X coordinate</label>
                                        <input type="text" name="x_coordinate" class="form-control" required
                                               placeholder="">
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label class="form-label">Y coordinate</label>
                                        <input type="text" name="Y_coordinate" class="form-control" required
                                               placeholder="">
                                    </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>
                                </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</button>
                                </div>
                            </div>
=======
                                <div class="form-group col-md-3">
                                    <label class="form-label">City</label>
                                    <input type="text" name="city_id" class="form-control" value="Adaamaa" id="city_id"
                                        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="Carta Number">
                                </div>
                                <div class="form-group col-md-3">
                                    <label class="form-label">House Number</label>
                                    <input type="text" name="house_number" class="form-control" required
                                        placeholder="House Number">
                                </div>
                                <div class="form-group col-md-3">
                                    <label class="form-label">Phone Number</label>
                                    <input type="text" name="phone" class="form-control" required placeholder="+251">
                                </div>
                                <div class="form-group col-md-3">
                                    <label class="form-label">Building Permit 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">Types Of Construction Request</label>
                                    <select name="building_type" id="building_type" class="form-control">
                                        <option value="shade">Shade</option>
                                        <option value="Gamoo sadarkaa B">Gamoo sadarkaa B</option>
                                        <option value="Gamoo sadarkaa C">Gamoo sadarkaa C</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-3">
                                    <label class="form-label">lakka.Mirkanneessa Qabeenya</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">Start Date</label>
                                    <input type="date" name="start_date" class="form-control" required
                                        placeholder="dirqama">
                                </div>
                                <div class="form-group col-md-3">
                                    <label class="form-label">End Date</label>
                                    <input type="date" name="end_date" class="form-control" required
                                        placeholder="dirqama">
                                </div>
                                <div class="form-group col-md-3">
                                    <label class="form-label">Area</label>
                                    <input type="text" name="rea" class="form-control" required
                                        placeholder="dirqama">
                                </div>
                                <div class="form-group col-md-3">
                                    <label class="form-label">Requested Service</label>
                                    <input type="text" name="requested_service" class="form-control" required
                                        placeholder="dirqama">
                                </div>

=======
                        <h4>{{ $service->name }}</h4>
                    </div>
                    <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=" "> Applicant 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="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>
                                @if ($errors->any())
                                    <div style="color: red;">
                                        <ul>
                                            @foreach ($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif
                                <div class="form-group col-md-3">
                                    <label class="form-label">City</label>
                                    <input type="text" name="city_id" class="form-control" value="Adaamaa" id="city_id"
                                        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="Carta Number">
                                </div>
                                <div class="form-group col-md-3">
                                    <label class="form-label">House Number</label>
                                    <input type="text" name="house_number" class="form-control" required
                                        placeholder="House Number">
                                </div>
                                <div class="form-group col-md-3">
                                    <label class="form-label">Phone Number</label>
                                    <input type="text" name="phone" class="form-control" required placeholder="+251">
                                </div>
                                <div class="form-group col-md-3">
                                    <label class="form-label">Building Permit 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">Types Of Construction Request</label>
                                    <select name="building_type" id="building_type" class="form-control">
                                        <option value="shade">Shade</option>
                                        <option value="Gamoo sadarkaa B">Gamoo sadarkaa B</option>
                                        <option value="Gamoo sadarkaa C">Gamoo sadarkaa C</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-3">
                                    <label class="form-label">lakka.Mirkanneessa Qabeenya</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">Start Date</label>
                                    <input type="date" name="start_date" class="form-control" required
                                        placeholder="dirqama">
                                </div>
                                <div class="form-group col-md-3">
                                    <label class="form-label">End Date</label>
                                    <input type="date" name="end_date" class="form-control" required
                                        placeholder="dirqama">
                                </div>
                                <div class="form-group col-md-3">
                                    <label class="form-label">Area</label>
                                    <input type="text" name="rea" class="form-control" required
                                        placeholder="dirqama">
                                </div>
                                <div class="form-group col-md-3">
                                    <label class="form-label">Requested Service</label>
                                    <input type="text" name="requested_service" class="form-control" required
                                        placeholder="dirqama">
                                </div>

>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
                                <div class="form-group col-md-3">
                                    <label class="form-label">X coordinate</label>
                                    <input type="text" name="x_coordinate" class="form-control" required
                                        placeholder="dirqama">
                                </div>
                                <div class="form-group col-md-3">
                                    <label class="form-label">Y coordinate</label>
                                    <input type="text" name="Y_coordinate" class="form-control" required
                                        placeholder="dirqama">
                                </div>
                                <div class="form-group col-md-3">
                                    <label class="form-label">Files</label>
                                    <input type="file" name="files" class="form-control">
                                </div>
                            </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</button>
                            </div>

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