@extends('components.customer_layout')
@section('customer-content')
    <link href="{{ asset('assets/css/custom/a3form.css') }}" rel="stylesheet" type="text/css">

    <style>
        .card-header {
            background-color: #f9f3c9;
            padding: 10px;
            border: 1px solid #f3e0a4;
            border-radius: 5px;
        }
    </style>

    <div class="mt-4 col-md-10">
        <div class="card w-100">
            <div class="container mt-1">
                <div class="report-header"
                    style="text-align: center; border-bottom: 2px solid #000; padding-bottom: 10px; background: transparent; position: relative;">
                    <div class="card-header">
                        <img src="{{ asset('assets/images/logo.png') }}" class="img-circle" alt="Office Logo"
                            style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 80px; height: 80px;">
                        <img src="{{ asset('assets/images/logo.png') }}" class="img-circle" alt="Office Logo"
                            style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 80px; height: 80px;">
                        <h2 style="margin: 10px 0;"> {{ $office->name }}</h2>
                        <span>Gosa Komii <b> </b></span>
                        <span>Maqaa Iyyataa <b>{{ Auth::guard('customer')->user()->full_name }}</b></span>
                    </div>
                </div>

                <div class="card-body">
                    @if (session('success'))
                        <div class="alert alert-success">{{ session('success') }}</div>
                    @endif

                    <form action="{{ route('complaint.update', $complaint->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT') <!-- This will tell Laravel to use the PUT method for updating -->

                        <input type="hidden" name="customer_id" value="{{ Auth::guard('customer')->user()->id }}">
                        <input type="hidden" name="service_id" value="{{ $service->id }}">
                        <input type="hidden" name="office_id" value="{{ $office->id }}">
                        <input type="hidden" name="city_id" value="{{ $office->city->id }}" id="city-container">

                        <!-- Customer Location Information -->
                        <div class="card shadow-sm p-3 mb-6 w-100">
                            <h5 class="card-title text-center">Teessoo Iyyataa Fi Sadarkaa Iyyannoo</h5>
                            <hr>
                            <div class="row col-md-12">
                                <div class="mb-3 col-md-4">
                                    <label class="form-label">Subcity</label>
                                    <select name="subcity" id="customer_subcity_id" class="form-control">
                                        @foreach ($subcities as $subcity)
                                            <option value="{{ $subcity->id }}" {{ $subcity->id == $complaint->subcity_id ? 'selected' : '' }}>
                                                {{ $subcity->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="mb-3 col-md-4">
                                    <label class="form-label">Woreda</label>
                                    <select name="woreda" id="customer_woreda_id" class="form-control">
                                        <option value="">Aanaa Filadhu</option>
                                        <!-- Woreda options will be populated here -->
                                    </select>
                                </div>
                            </div>
                        </div>
                        <br>
                        <div class="row col-md-12">
                            <h5 class="card-title text-center">Sadarkaa Iyyannoo</h5>

                            {{-- Application Level --}}
                            <div class="mb-3 col-md-4">
                                <label class="form-label">Sadarkaa</label>
                                <select name="level" class="form-control" id="level-select">
                                    <option value="city" {{ $complaint->level == 'city' ? 'selected' : '' }}>City</option>
                                    <option value="subcity" {{ $complaint->level == 'subcity' ? 'selected' : '' }}>Subcity</option>
                                    <option value="woreda" {{ $complaint->level == 'woreda' ? 'selected' : '' }}>Woreda</option>
                                </select>
                            </div>

                            <!-- Subcity -->
                            <div class="mb-3 col-md-4" id="subcity-container">
                                <label class="form-label">Subcity</label>
                                <select name="subcity_id" id="application_subcity_id" class="form-control">
                                    <option value="">Kutaa Magaalaa Filadhu</option>
                                    @foreach ($subcities as $subcity)
                                        <option value="{{ $subcity->id }}" {{ $subcity->id == $complaint->subcity_id ? 'selected' : '' }}>
                                            {{ $subcity->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Woreda -->
                            <div class="mb-3 col-md-4" id="woreda-container">
                                <label class="form-label">Woreda</label>
                                <select name="woreda_id" id="application_woreda_id" class="form-control">
                                    <option value="">Aanaa Filadhu</option>
                                    <!-- Woreda options will be populated here -->
                                </select>
                            </div>
                        </div>

                        <!-- Complaint Details -->
                        <div class="card shadow-sm p-3 w-100">
                            <h5 class="card-title">Yaada Iyyannoo Keetii Barreessi</h5>
                            <div class="row">
                                <div class="mb-3 col-md-12">
                                    <textarea name="description" class="form-control" required>{{ $complaint->description }}</textarea>
                                </div>
                            </div>
                        </div>

                        <!-- Complaint Details -->
                        <div class="card shadow-sm p-3 w-100">
                            <div class="row">
                                <div class="mb-3">
                                    <label class="form-label">Faayila komii keetiif barbaachisu hunda fe'i</label>
                                    <div class="input-group">
                                        <span class="input-group-text" id="file-icon" style="cursor: pointer; padding-right: 10px; font-size: 1.5rem;">
                                            <i class="fas fa-folder" style="font-size: 1.8rem; margin-right: 8px; color: blue;"></i> Faayila filadhu
                                        </span>
                                        <input type="file" name="file" class="form-control d-none" id="file-input">
                                    </div>
                                </div>
                            </div>
                            <div class="mt-3">
                                <label class="form-label">Faayila filatame:</label>
                                <p id="file-name">{{ $complaint->file_name ?? 'Faayila tokko hin filatamne' }}</p> <!-- Show selected file -->
                            </div>
                        </div>

                        <button type="submit" class="btn btn-success w-100">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        // JavaScript for handling level selection and visibility
        document.addEventListener("DOMContentLoaded", function() {
            let levelSelect = document.getElementById("level-select");
            let cityContainer = document.getElementById("city-container");
            let subcityContainer = document.getElementById("subcity-container");
            let woredaContainer = document.getElementById("woreda-container");

            function updateVisibility() {
    let selectedLevel = document.getElementById("level-select").value;
    document.getElementById("subcity-container").style.display = (selectedLevel !== "city") ? "block" : "none";
    document.getElementById("woreda-container").style.display = (selectedLevel === "woreda") ? "block" : "none";
}

    </script>

    <script>
        // JavaScript to trigger the file input when the folder icon is clicked
        document.getElementById('file-icon').addEventListener('click', function() {
    document.getElementById('file-input').click();
});


        // Show the selected file name after it's chosen
        document.getElementById('file-input').addEventListener('change', function() {
            const fileName = this.files.length > 0 ? this.files[0].name : '';
            document.getElementById('file-name').textContent = fileName ? fileName : 'Faayila tokko hin filatamne';
        });
    </script>
@endsection