@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
@include('layouts.navbars.auth.topnav', ['title' => ''])
<div class="card shadow-lg mx-4">
    <div class="card-body p-3">
        <div class="row gx-4">
            <div class="col-lg">
                <div class="nav-wrapper">
                    <button class="btn btn-secondary mb-0" onclick="history.back()"><i class="fas fa-circle-left me-1"></i><span class="font-weight-bold">Kembali</span></button>
                    @if ($authorize->edit == '1')
                    <button class="btn btn-primary mb-0"
                        onclick="event.preventDefault(); document.getElementById('{{ $dmenu }}-form').submit();"><i
                            class="fas fa-floppy-disk me-1"> </i><span class="font-weight-bold">Simpan Draft</span></button>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid py-4">
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-body pb-0">
                    @include('components.alert')
                    @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0 ps-3">
                            @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif
                </div>
                <form role="form" method="POST" action="{{ URL::to($url_menu . '/' . $idencrypt) }}" id="{{ $dmenu }}-form"
                    enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <div class="card-body">
                        <p class="text-uppercase text-sm">Edit {{ $title_menu }}</p>
                        <hr class="horizontal dark mt-0">
                        @if (!empty($list->id_trans))
                        <div class="row mb-3">
                            <div class="col-12">
                                <label class="form-control-label">ID Transaksi</label>
                                <input class="form-control" type="text" value="{{ $list->id_trans }}" disabled>
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">
                        @endif
                        <div class="row">
                            <div class="col-md-6">
                                <label class="form-control-label">Area <span class="text-danger">*</span></label>
                                <select class="form-select" name="area_id" required>
                                    <option value="">Pilih area</option>
                                    @foreach ($areaOptions ?? [] as $areaName => $areaId)
                                    <option value="{{ $areaId }}" {{ old('area_id', $list->area_id ?? '') == $areaId ? 'selected' : '' }}>{{ $areaName }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-control-label">Nama Pemohon <span class="text-danger">*</span></label>
                                <select class="form-select custom-select" name="requester_name" required>
                                    <option value="">Pilih nama pemohon</option>
                                    @foreach ($requesterOptions ?? [] as $requester)
                                    <option value="{{ $requester }}" {{ old('requester_name', $list->requester_name ?? '') == $requester ? 'selected' : '' }}>{{ $requester }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        @push('css')
                        <style>
                            .select2-container {
                                width: 100% !important;
                                padding: 0 !important;
                                border: none !important;
                            }

                            .select2-container .select2-selection--single {
                                height: 40px !important;
                                border: 1px solid #d2d6da !important;
                                border-radius: 0.5rem !important;
                                display: flex !important;
                                align-items: center !important;
                                background-color: #fff !important;
                            }

                            .select2-container .select2-selection--single .select2-selection__rendered {
                                padding-left: 12px !important;
                                padding-right: 30px !important;
                                color: #495057 !important;
                                font-size: 0.875rem !important;
                                line-height: 40px !important;
                            }

                            .select2-container .select2-selection--single .select2-selection__arrow {
                                height: 38px !important;
                                top: 1px !important;
                                right: 8px !important;
                            }

                            .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
                                background-color: #1f54a2 !important;
                                color: #fff !important;
                            }
                        </style>
                        @endpush
                        <div class="row mt-3">
                            <div class="col-12">
                                <label class="form-control-label">Deskripsi Pekerjaan <span class="text-danger">*</span></label>
                                <textarea class="form-control" name="job_description" rows="4"
                                    placeholder="Contoh: Lampu pecah di area toilet lantai 2, butuh penggantian segera.">{{ old('job_description', $list->job_description ?? '') }}</textarea>
                                <p class="text-xs text-secondary mt-2 mb-0">Draft dapat diedit sebelum dikonfirmasi.</p>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-12">
                                <label class="form-control-label">Lampiran (bisa lebih dari 1)</label>
                                <input class="form-control" name="attachment[]" type="file" accept="image/*,.pdf" multiple>
                                @if (!empty($attachment_files))
                                <p class="text-xs text-secondary mt-3 mb-2">File saat ini:</p>
                                <div class="d-flex flex-wrap gap-2">
                                    @foreach ($attachment_files as $attachmentFile)
                                    @php
                                    $extension = pathinfo($attachmentFile, PATHINFO_EXTENSION);
                                    $isImage = in_array(strtolower($extension), ['jpg', 'jpeg', 'png', 'gif', 'webp']);
                                    $filePath = route('attachment.show', ['path' => $attachmentFile]);
                                    @endphp

                                    <div class="text-center" style="width: 180px;">
                                        @if ($isImage)
                                        <a href="{{ $filePath }}" target="_blank">
                                            <img src="{{ $filePath }}" class="img-fluid rounded shadow-sm"
                                                style="width: 180px; height: 180px; object-fit: cover;"
                                                alt="{{ basename($attachmentFile) }}">
                                        </a>
                                        @else
                                        <a href="{{ $filePath }}" target="_blank"
                                            class="d-flex flex-column align-items-center justify-content-center border rounded shadow-sm text-decoration-none"
                                            style="width:180px;height:180px;background:#fff5f5;">
                                            <i class="fas fa-file-pdf fa-2x text-danger mb-2"></i>
                                            <span class="text-danger text-xs text-center px-2" style="word-break:break-all;">{{ basename($attachmentFile) }}</span>
                                        </a>
                                        @endif
                                        <p class="text-primary text-xs mt-3">
                                            <i class="fas fa-info-circle me-1"></i>Klik untuk membuka
                                        </p>
                                    </div>
                                    @endforeach
                                </div>
                                @endif
                            </div>
                        </div>
                        <input type="hidden" name="request_status" value="draft">
                        <hr class="horizontal dark">
                    </div>
                    <div class="card-footer align-items-center pt-0 pb-2">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@if ($jsmenu == '1')
@if (view()->exists("js.{$dmenu}"))
@push('addjs')
@include('js.' . $dmenu)
@endpush
@else
@push('addjs')
<script>
    Swal.fire({
        title: 'JS Not Found!!',
        text: 'Please Create File JS',
        icon: 'error',
        confirmButtonColor: '#028284'
    });
</script>
@endpush
@endif
@endif
@endsection