@extends('components.customer_layout')
@section('customer-content')
<<<<<<< HEAD
<<<<<<< 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-size: 15px;
        }

        .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 }}
                    </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
                            @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>
                                <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>

                                <input type="hidden" name="city" class="form-control" value="Adaamaa" id="city_id"
                                       readonly>
                                <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="Carta Number">
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label class="form-label">Issue Date</label>
                                        <input type="date" name="issue_date" class="form-control" required
                                               placeholder="Issue Date">
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label class="form-label">Phone</label>
                                        <input type="text" name="phone" class="form-control" required
                                               placeholder="+251...">
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label class="form-label">X1</label>
                                        <input type="text" name="x_coordinate" class="form-control" required
                                               placeholder="">
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label class="form-label">Y1</label>
                                        <input type="text" name="y1_coordinate" class="form-control" required
                                               placeholder="">
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label class="form-label">Construction Cost</label>
                                        <input type="text" name="y1_coordinate" class="form-control" required
                                               placeholder="">
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label class="form-label">Floor Number</label>
                                        <input type="text" name="floor_number" class="form-control" required
                                               placeholder="">
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label class="form-label">Above Ground</label>
                                        <input type="text" name="above_ground" class="form-control" required
                                               placeholder="">
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label class="form-label">Under Ground</label>
                                        <input type="text" name="under_ground" class="form-control" required
                                               placeholder="">
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label class="form-label">Wall Construction Type</label>
                                        <input type="text" name="wall_construction_type" class="form-control" required
                                               placeholder="">
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label class="form-label">Allowed Con.Meter</label>
                                        <input type="text" name="allowd_construction" 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>
                        </form>
                    </div>

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

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

>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
    .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>
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
            </div>
            <div class="col col-md-3" style="background-color: white">
                <h3>Ulaagalee Barbaachisan</h3>
                <hr>
                <ol>
                    <li>kaartaa,</li>
                    <li>mirga misoomsuu</li>
                    <li>bakka bu'ummaa fi gibira baraa kaffaluu</li>
                </ol>
                <span style="font-family: monospace;font-style: italic">🚀<u style="color: red">Hubachiisa:</u> Ragaa duuka deemituu Iskaan ta’e pdf tokkoon taa'u qaba.</span>
                <hr>
                <p>Ragaa duuka deemituu Kunniin</p>
                <ol>
                    <li>📂 Kaartaa</li>
                    <li>📂 Gibira/Lizii bara kafalame Nagahee</li>
                    <li>📂 Waraqaa eenyummaa</li>
                    <li>📂Bakka bu’a yoo ta’e Ragaa bakka bu’ummaa fi waraqaa eenyummaa</li>
                    </li>
                </ol>
            </div>
        </div>
<<<<<<< HEAD
<<<<<<< HEAD
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
=======
=======
>>>>>>> e0181ccb32c4dd58aa1f12af03e65df582172b25
  
    </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>
            $(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