@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;
        }
    </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
                            <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">🏠 Odeeffannoo Teessoo</div>
                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="subcity_id">Kutaa Magaalaa</label>
                                    <select name="subcity_id" id="subcity_id" class="form-control" required>
                                        @foreach($subcities as $subcity)
                                            <option
                                                value="{{ $subcity->id }}" {{ old('subcity_id') == $subcity->id ? 'selected' : '' }}>
                                                {{ $subcity->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group col-md-6">
                                    <label for="woreda_id">Aanaa</label>
                                    <select name="woreda_id" id="woreda_id" class="form-control" required>
                                        <option value="">Select Woreda</option>
                                    </select>
                                </div>
                            </div>

                            <!-- Building Information -->
                            <div class="section-title">🏗️ Odeeffannoo Ijaarsa</div>
                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="carta_number">Lakk. Kaarta</label>
                                    <input type="text" name="carta_number" class="form-control"
                                           value="{{ old('carta_number') }}" required>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="area">Bal’ina(m2):</label>
                                    <input type="text" name="area" class="form-control" required>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="building_type">Gaaffi ijoo: hayyama ijaarsaa </label>
                                    <select name="building_type" class="form-control" required>
                                        <option
                                            value="Ijaarsa Haraa" {{ old('building_type') == 'Ijaarsa Haraa' ? 'selected' : '' }}>
                                            Haaraa
                                        </option>
                                        <option
                                            value="Ijaarsa Haarosuu" {{ old('building_type') == 'Ijaarsa Haarosuu' ? 'selected' : '' }}>
                                            Haaromsa
                                        </option>
                                        <option
                                            value="Ijaarsa Babal'isuu" {{ old('building_type') == 'Ijaarsa Babal\'isuu' ? 'selected' : '' }}>
                                            Baballisuu
                                        </option>
                                        <option
                                            value="Ijaarsa Fooyyessuu" {{ old('building_type') == 'Ijaarsa Fooyyessuu' ? 'selected' : '' }}>
                                            Fooyyessuu
                                        </option>
                                    </select>
                                </div>

                                <div class="form-group col-md-6">
                                    <label for="building_height">4.	Dheerina gamoo darbiidhaan  </label>
                                    <input type="text" name="building_height" class="form-control"
                                           value="{{ old('building_height') }}" required>
                                </div>

                                <div class="form-group col-md-6">
                                    <label for="building_service">Tajajila ijaarsichaa</label>
                                    <select name="building_service" class="form-control" required>
                                        <option
                                            value="Daldalaaf" {{ old('building_service') == 'Daldalaaf' ? 'selected' : '' }}>
                                            Daldaalaaf
                                        </option>
                                        <option
                                            value="Mana Jireenyaatiif" {{ old('building_service') == 'Mana Jireenyaatiif' ? 'selected' : '' }}>
                                            Mana Jireenyaaf
                                        </option>
                                    </select>
                                </div>

                                <div class="form-group col-md-6">
                                    <label for="building_level">Sadarkaa Ijaarsa</label>
                                    <select name="building_level" class="form-control" required>
                                        <option value="A" {{ old('building_level') == 'A' ? 'selected' : '' }}>Sadarkaa A
                                        </option>
                                        <option value="B" {{ old('building_level') == 'B' ? 'selected' : '' }}>Sadarkaa B
                                        </option>
                                        <option value="C" {{ old('building_level') == 'C' ? 'selected' : '' }}>Sadarkaa C
                                        </option>
                                    </select>
                                </div>

                                <div class="form-group col-md-6">
                                    <label for="file">Ragaa duuka deemtuu</label>
                                    <div class="file-input">
                                        <input type="file" name="files" class="form-control">
                                        <small>Allowed formats: PDF, JPG, PNG</small>
                                    </div>
                                </div>
                                <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>

                            </div>

                            <p class="mt-3">
                               <input type="checkbox" required>Kanaaf gaaffiin koo kun ilaalamee waligalteen pilaanii akka naaf kennamu gaafachaa ragaan ani kenne kun sirrii fi dhugaa ta’uu mallattoo kootin ni mirkaneessa.
                            </p>

                            <button type="submit" class="btn btn-primary w-100 mt-3">Submit Request</button>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col col-md-3" style="background-color: white">
                <h2>Ulaagalee Barbaachisan</h2>
                <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>

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

@endsection