@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 whitesmoke;
        }
        .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('investment.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            @if ($errors->any())
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                            <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">

                            <!-- Address Information -->
                            <div class="section-title">🏠 Odeeffannoo Teessoo Abbaa Dhimmaa</div>
                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="subcity_id">Kutaa Magalaa<span class="text-danger">*</span></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<span class="text-danger">*</span></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 Projectiiear</div>
                            <div class="row">
{{--                                <div class="col-md-4 mb-3">--}}
{{--                                    <label>TIN</label>--}}
{{--                                    <input type="text" name="tin" class="form-control">--}}
{{--                                </div>--}}
                                <div class="col-md-6 mb-3">
                                    <label>Lakk. War.Eenyummaa<span class="text-danger">*</span></label>
                                    <input type="text" name="id_number" required class="form-control">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label>Lakk.Booki Lafaa<span class="text-danger">*</span></label>
                                    <input type="text" name="book_number" required class="form-control">
                                </div>
                                <div class="section-title">🏗️ Odeeffannoo Pirojektii</div>
                                <div class="col-md-4 mb-3">
                                    <label>Gosa Piroojektii</label>
                                    <input type="text" name="project_type" class="form-control">
                                </div>

                                <div class="col-md-4 mb-3">
                                    <label>Maqaa Piroojektii</label>
                                    <input type="text" name="project_name" class="form-control">
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label>Sektera Dinagdee</label>
                                    <input type="text" name="economic_sector" class="form-control">
                                </div>

                            </div>
                            <div class="section-title">🏠 Odeeffannoo Teessoo Pirojectii</div>
                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="subcity_id">Kutaa Magaalaa</label>
                                    <input type="text" name="project_sub_city" class="form-control">
                                </div>

                                <div class="form-group col-md-6">
                                    <label for="project_woreda">Aanaa</label>
                                    <input type="text" name="project_woreda" class="form-control">
                                </div>

                                <div class="col-md-4 mb-3">
                                    <label>Haala Piroojektii</label>
                                    <input type="text" name="project_status" class="form-control">
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label>Kapitaala Galmaahe Qr.<span class="text-danger">*</span></label>
                                    <input type="text" name="registered_capital" class="form-control">
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label>Haala Abbaa Qabenyaa </label>
                                   <select name="ownership_type" class="form-control">
                                       <option value="Mootummaa">Mootummaa</option>
                                       <option value="Dhunfaa">Dhunfaa</option>
                                   </select>
{{--                                    <input type="text" name="ownership_type" class="form-control">--}}
                                </div>


                                <div class="form-group col-md-6">
                                    <label for="files">Faayiloota Duuka Deemtu<span class="text-danger">*</span></label>
                                    <div class="file-input">
                                            <input type="file" required name="files" class="form-control">

                                        <small>Allowed formats: PDF</small>
                                    </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>
                                    <hr>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="files">Karoora hojii /Proposal File<span class="text-danger">*</span>   </label>
                                    <div class="file-input">
                                        <input type="file" name="proposal_file" required class="form-control">

                                        <small>Allowed formats: PDF</small>
                                    </div>
                                    <span style="font-family: monospace;font-style: italic">🚀<u style="color: red">Hubachiisa:</u> Karoora hojii qophaa'e pdf tokkoon taa'u qaba.</span>
                                    <hr>
                                </div>
                            </div>

                            <p class="mt-3">
                                <input type="checkbox" required>
                                I confirm that the information provided is correct and request approval for my plan.
                            </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>📂Unka Iyyannoo gaaffii Invastimantii guutuu fi suura tokko irrattti maxxanfamuu qaba</li>
                    <li>📂Xalayaa deeggarsaa waajjira Qonnaa irraa yookiin mana hojii dhimmi ilaalu irraa kan barreeffameef jiraachuu qaba</li>
                      <li>📂Karoora hojii qophaa'e (project Proposal) tokko yoo dhuunfaadhaan kan hojjechiifamu ta'ee qaama seerummaa qabu fi qaama mootummaa dhimmi ilaaluun deeggarsaan kan hojjetamu yoo ta'e immoo chaappan mana hojiitiin kan mirkanaa'e ta'uu qaba</li>
                    <li>📂Ganda keessa jiraatu/jiraattu irraa waggaa 10 fi isaa ol jiraachuusaa kan ibsu xalayaa deeggarsaa dhiyeeffachuu qaba /murtee kaabinee aanaa sanaa</li>
                    <li>📂Ragaa qabiyyee lafaa qonnaan bulaa ta'uu isaa ibsu yookiin magaalaa jalatti yoo daangeffame qonnaan bulaa ta'uusaa Xalayaa Deeggarsaa Qaama dhiimii ilaalu irra ibsu dhiyeeffachuu</li>
                    <li>📂Nagahee galii gibiraa itti fayyadama lafaa fi Oomisha qonnaa itti kaffalaa ture yoo xiqaate kan wagga shanii dhiyeeffachuu</li>
                    <li>📂Waraqaa Eenyummaa haaromfame jiraataa Aana sanaa ta’u isaa kan ibsu</li>
                    <li>📂Qonnaan bulaa/horsiisee bulaa/gamisa horsiisee bulaa dhuunfaan hojii invastimantii gaggeessuu barbaade yoo ta'e ka'umsi kaappitaalaa karoora hojii isaa yoo xiqqaate qarshii Mil. 5 fi isaa ol kan dhiheeffate ta'uu qaba</li>
                    <li>📂Qonnaan bultoota/ Gamisa horsiisee bultoota/Horsiisee bultoota Waldaa bifa adda addaatiin karaa seera qabeessa ta'een gurmaa'anii mirkanaa'ee yoo ta'e immoo ka'uumsi kaappitaala pirojektichaa qarshii Mil. 5 fi isaa ol yoo ta'e akkasumas miseensotni hundinuu qonnaan bultoota ta'uusaa ragaan kan mirkanaa'e yoo ta'e</li>
                    <li>📂Qonnaan bulaa tokko maatii isaa wajjin waldaan gurmaa'e ragoolee barbaachisan hunda yoo guute haaluma qonnaan bultoota biroo keessummaa'aniin kan simataman yoo ta'u miseensa maatii ta'uun isaa seeran mirkanaa'uu qaba</li>
                    <li>📂Qonnaan bultoota waldaan gurmaa'aan ykn qonnaan bulaan maatii isaa waliin yoo ta'an dambii ittiin bulmaataa fi hundeeffamaa jiraachuu qaba</li>
                    <li>📂Qonnaan bultoota /horsiisee bultoota/ Gamisa horsiisee bultoota/waldaa bifa adda addaatiin gurma'anis ta'ee dhuunfaan kan invastimantiitti cehuuf iyyata dhiyeeffatan kaappitaala pirojektii karoorfatan keessaa % 20 fi isaa ol qusachuu isaanii sochii maallaqa Baankii waliin dhiyaachuu qaba</li>
                </ol>

                <p class="text-danger">Ragaa duuka deemituu Kunniin</p>
                <hr>
                <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