@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">
                <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()->full_name }}" id="customer_id" readonly>
                        <input type="hidden" name="country_id" class="form-control" value="Ethiopia" id="country_id"
                               readonly>
                        <input type="hidden" name="region_id" class="form-control" value="Oromiyaa" id="region_id"
                               readonly>
                        <input type="hidden" name="office_id" class="form-control" value="Oromiyaa" id="office_id"
                               readonly>
                        <input type="hidden" name="status_id" class="form-control" value="Oromiyaa" id="status_id"
                               readonly>

                        <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 class="form-label">Subcity</label>
                            <select name="subcity_id" id="subcity_id" class="form-control">
                                <option value="">Select Subcity</option>
                                @foreach ($subcities as $item)
                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-md-4">
                            <label class="form-label">Woreda</label>
                            <select name="woreda_id" id="woreda_id" class="form-control">
                                <option value="">Select Woreda</option>
                                <option value=" "></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">Date</label>
                            <input type="date" name="date" class="form-control" required
                                   placeholder="Carta Number">
                        </div>
                        <div class="form-group col-md-3">
                            <label class="form-label">Service Type</label>
                           <select name="service_type" class="form-control">
                               <option value="Daldalaaf">Daldaalaaf</option>
                               <option value="Mana Jireenyaaf">Mana Jireenyaaf</option>
                           </select>
                        </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>

                </form>
            </div>
        </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>
@endsection