@extends('layouts.admin.master')
@section('content')
    @php
        $can_insert = auth_can(h_prefix('insert'));
        $can_update = auth_can(h_prefix('update'));
        $can_delete = auth_can(h_prefix('delete'));
    @endphp
    <div class="row g-3 mt-1">
        <div class="col-xl-3 col-md-6">
            <div class="card border-0 shadow-sm h-100 layanan-summary-card layanan-summary-card-primary">
                <div class="card-body">
                    <div class="small text-muted">Total layanan</div>
                    <div class="fs-3 fw-semibold">{{ number_format($serviceCatalogSummary['total']) }}</div>
                    <div class="small text-muted">Master layanan yang tercatat saat ini.</div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card border-0 shadow-sm h-100 layanan-summary-card layanan-summary-card-success">
                <div class="card-body">
                    <div class="small text-muted">Sudah terkait OPD</div>
                    <div class="fs-3 fw-semibold">{{ number_format($serviceCatalogSummary['mapped_to_opd']) }}</div>
                    <div class="small text-muted">Siap dipakai lintas domain Smart City.</div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card border-0 shadow-sm h-100 layanan-summary-card layanan-summary-card-warning">
                <div class="card-body">
                    <div class="small text-muted">Sudah punya SLA</div>
                    <div class="fs-3 fw-semibold">{{ number_format($serviceCatalogSummary['with_sla']) }}</div>
                    <div class="small text-muted">Layanan dengan target respon dan selesai.</div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card border-0 shadow-sm h-100 layanan-summary-card layanan-summary-card-info">
                <div class="card-body d-flex flex-column">
                    <div class="small text-muted">Pengajuan publik</div>
                    <div class="fs-3 fw-semibold">{{ number_format($serviceCatalogSummary['public_submission']) }}</div>
                    <div class="small text-muted mb-3">Layanan yang siap menerima pengajuan publik.</div>
                    <a href="{{ route('admin.smart_city.service_catalog') }}" class="btn btn-outline-primary btn-sm mt-auto">
                        Buka dashboard service catalog
                    </a>
                </div>
            </div>
        </div>
    </div>

    @if ($organizations->isEmpty())
        <div class="alert alert-warning mt-3 mb-0">
            Master organisasi / OPD belum diisi. Untuk memetakan layanan ke penanggung jawab, isi dulu data di
            <a href="{{ route('admin.smart_city.organization') }}" class="alert-link">Organisasi / OPD</a>.
        </div>
    @endif

    <div class="card mt-3">
        <div class="card-body">
            <div class="card-title d-md-flex flex-row justify-content-between">
                <div>
                    <h6 class="mt-2 text-uppercase">Data {{ $page_attr['title'] }}</h6>
                </div>
                @if ($can_insert)
                    <div>
                        <button type="button" class="btn btn-rounded btn-primary btn-sm" data-bs-effect="effect-scale"
                            data-bs-toggle="modal" href="#modal-default" onclick="addFunc()" data-target="#modal-default">
                            <i class="fas fa-plus"></i> Tambah Layanan
                        </button>
                    </div>
                @endif
            </div>
            <table class="table table-striped table-hover w-100" id="tbl_main">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Nama</th>
                        <th>OPD / SLA</th>
                        <th>Kategori</th>
                        <th>Workflow</th>
                        <th>Lokasi</th>
                        <th>Status Katalog</th>
                        <th>Rating</th>
                        <th>Status</th>
                        {!! $can_delete || $can_update ? '<th>Aksi</th>' : '' !!}
                    </tr>
                </thead>
                <tbody> </tbody>
            </table>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="modal-default">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h5 class="modal-title fw-bold" id="modal-default-title">Layanan</h5>
                    <button aria-label="Tutup" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form action="javascript:void(0)" id="MainForm" name="MainForm" method="POST" enctype="multipart/form-data">
                        <input type="hidden" name="id" id="id">
                        <div class="row g-3">
                            <!-- Kolom 1: Informasi Dasar -->
                            <div class="col-lg-4">
                                <div class="card h-100">
                                    <div class="card-body">
                                        <h6 class="card-title border-bottom pb-2 mb-3">Informasi Dasar</h6>
                                        <div class="mb-3">
                                            <label class="form-label" for="nama">Nama <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="nama" name="nama" required>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label" for="slug">Slug <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="slug" name="slug" required>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label" for="kategori">Kategori <span class="text-danger">*</span></label>
                                            <select class="form-select" id="kategori" name="kategori" required>
                                                <option value="">Pilih Kategori</option>
                                                @foreach(App\Models\Layanan::KATEGORI as $kategori)
                                                    <option value="{{ $kategori }}">{{ $kategori }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label" for="jenis_layanan">Jenis Layanan <span class="text-danger">*</span></label>
                                            <select class="form-select" id="jenis_layanan" name="jenis_layanan" required>
                                                @foreach(App\Models\Layanan::JENIS_LAYANAN as $key => $jenis)
                                                    <option value="{{ $key }}">{{ $jenis }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label" for="opd_id">OPD Penanggung Jawab</label>
                                            <select class="form-select" id="opd_id" name="opd_id">
                                                <option value="">Pilih OPD</option>
                                                @foreach ($organizations as $organization)
                                                    <option value="{{ $organization->id }}">
                                                        {{ $organization->short_name ?: $organization->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="row g-2 mb-3">
                                            <div class="col-md-6">
                                                <label class="form-label" for="sla_respon_menit">SLA Respon</label>
                                                <div class="input-group">
                                                    <input type="number" min="0" class="form-control" id="sla_respon_menit" name="sla_respon_menit">
                                                    <span class="input-group-text">mnt</span>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label" for="sla_selesai_menit">SLA Selesai</label>
                                                <div class="input-group">
                                                    <input type="number" min="0" class="form-control" id="sla_selesai_menit" name="sla_selesai_menit">
                                                    <span class="input-group-text">mnt</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label" for="workflow_type">Workflow</label>
                                            <select class="form-select" id="workflow_type" name="workflow_type">
                                                @foreach(App\Models\Layanan::WORKFLOW_TYPES as $key => $label)
                                                    <option value="{{ $key }}">{{ $label }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label" for="submission_channel">Channel Pengajuan</label>
                                            <select class="form-select" id="submission_channel" name="submission_channel">
                                                @foreach(App\Models\Layanan::SUBMISSION_CHANNELS as $key => $label)
                                                    <option value="{{ $key }}">{{ $label }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label" for="deskripsi_singkat">Deskripsi Singkat <span class="text-danger">*</span></label>
                                            <textarea class="form-control" id="deskripsi_singkat" name="deskripsi_singkat" rows="3" required></textarea>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label" for="deskripsi_lengkap">Deskripsi Lengkap</label>
                                            <textarea class="form-control" id="deskripsi_lengkap" name="deskripsi_lengkap" rows="5"></textarea>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label" for="status">Status</label>
                                            <select class="form-select" id="status" name="status" required>
                                                @foreach(App\Models\Layanan::STATUS as $key => $status)
                                                    <option value="{{ $key }}">{{ $status }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-check form-switch mb-3">
                                            <input class="form-check-input" type="checkbox" id="featured" name="featured" value="1">
                                            <label class="form-check-label" for="featured">Tandai sebagai Rekomendasi</label>
                                        </div>
                                        <div class="form-check form-switch mb-3">
                                            <input class="form-check-input" type="checkbox" id="is_public_submission" name="is_public_submission" value="1">
                                            <label class="form-check-label" for="is_public_submission">Buka pengajuan publik</label>
                                        </div>
                                        <div class="form-check form-switch mb-3">
                                            <input class="form-check-input" type="checkbox" id="requires_verification" name="requires_verification" value="1">
                                            <label class="form-check-label" for="requires_verification">Perlu verifikasi internal</label>
                                        </div>
                                        <div class="form-check form-switch mb-3">
                                            <input class="form-check-input" type="checkbox" id="active_flag" name="active_flag" value="1" checked>
                                            <label class="form-check-label" for="active_flag">Aktif di service catalog</label>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label" for="rating">Rating (0-5)</label>
                                            <input type="number" step="0.1" min="0" max="5" class="form-control" id="rating" name="rating">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Kolom 2: Media & Kontak -->
                            <div class="col-lg-4">
                                <div class="card h-100">
                                    <div class="card-body">
                                        <h6 class="card-title border-bottom pb-2 mb-3">Media & Kontak</h6>
                                        <div class="mb-3">
                                            <label class="form-label" for="foto_utama">Foto Utama <span class="text-danger">*</span></label>
                                            <input type="file" class="form-control" id="foto_utama" name="foto_utama" accept="image/*">
                                            <small class="text-muted">Format: JPG, PNG, JPEG (Maksimal 2MB)</small>
                                            <div class="mt-2 text-center" id="preview-foto_utama" style="display: none;">
                                                <img id="preview-foto_utama-img" src="#" alt="Preview Foto" class="img-thumbnail" style="max-height: 150px;">
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label" for="video_url">URL Video (YouTube/Vimeo)</label>
                                            <input type="url" class="form-control" id="video_url" name="video_url" placeholder="https://">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label" for="galeri_gdrive_folder_id">Galeri (GDrive Folder ID)</label>
                                            <input type="text" class="form-control" id="galeri_gdrive_folder_id" name="galeri_gdrive_folder_id">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label" for="kontak">Kontak</label>
                                            <input type="text" class="form-control" id="kontak" name="kontak">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label" for="email">Email</label>
                                            <input type="email" class="form-control" id="email" name="email">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label" for="website">Website</label>
                                            <input type="url" class="form-control" id="website" name="website" placeholder="https://">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label" for="bahasa_panduan">Bahasa Panduan</label>
                                            <input type="text" class="form-control" id="bahasa_panduan" name="bahasa_panduan">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Kolom 3: Lokasi & Fasilitas -->
                            <div class="col-lg-4">
                                <div class="card h-100">
                                    <div class="card-body">
                                        <h6 class="card-title border-bottom pb-2 mb-3">Lokasi & Operasional</h6>
                                        <div class="mb-3">
                                            <label class="form-label" for="lokasi">Lokasi <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="lokasi" name="lokasi" required>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label" for="alamat_lengkap">Alamat Lengkap <span class="text-danger">*</span></label>
                                            <textarea class="form-control" id="alamat_lengkap" name="alamat_lengkap" rows="3" required></textarea>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label" for="kode_pos">Kode Pos</label>
                                            <input type="text" class="form-control" id="kode_pos" name="kode_pos">
                                        </div>
                                        <div class="row g-2 mb-3">
                                            <div class="col-md-6">
                                                <label class="form-label" for="jam_buka">Jam Buka</label>
                                                <input type="time" class="form-control" id="jam_buka" name="jam_buka">
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label" for="jam_tutup">Jam Tutup</label>
                                                <input type="time" class="form-control" id="jam_tutup" name="jam_tutup">
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label" for="hari_buka">Hari Buka</label>
                                            <input type="text" class="form-control" id="hari_buka" name="hari_buka" placeholder="Contoh: Senin-Jumat, Sabtu-Minggu">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label" for="hari_tutup">Hari Libur Khusus</label>
                                            <input type="text" class="form-control" id="hari_tutup" name="hari_tutup">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label" for="tips">Tips untuk Pengunjung</label>
                                            <textarea class="form-control" id="tips" name="tips" rows="3"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Fasilitas Section -->
                        <div class="card mt-3">
                            <div class="card-body">
                                <h5 class="card-title border-bottom pb-2 mb-3">Fasilitas</h5>
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <div class="border p-3 rounded">
                                            <h6 class="fw-bold mb-3">Fasilitas Utama</h6>
                                            <div class="d-flex flex-wrap gap-2">
                                                @foreach(['Parkir Luas', 'Toilet', 'Mushola', 'Ruang Informasi', 'Area Istirahat'] as $item)
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" name="fasilitas_utama[]" value="{{ $item }}" id="fu_{{ Str::slug($item) }}">
                                                        <label class="form-check-label" for="fu_{{ Str::slug($item) }}">{{ $item }}</label>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="border p-3 rounded">
                                            <h6 class="fw-bold mb-3">Fasilitas Pendukung</h6>
                                            <div class="d-flex flex-wrap gap-2">
                                                @foreach(['Wifi', 'ATM', 'Area Merokok', 'Ruang Laktasi', 'Toko Souvenir'] as $item)
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" name="fasilitas_pendukung[]" value="{{ $item }}" id="fp_{{ Str::slug($item) }}">
                                                        <label class="form-check-label" for="fp_{{ Str::slug($item) }}">{{ $item }}</label>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="border p-3 rounded">
                                            <h6 class="fw-bold mb-3">Fasilitas Aksesibilitas</h6>
                                            <div class="d-flex flex-wrap gap-2">
                                                @foreach(['Akses Kursi Roda', 'Jalur Tunanetra', 'Toilet Disabilitas', 'Parkir Disabilitas'] as $item)
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" name="fasilitas_aksesibilitas[]" value="{{ $item }}" id="fa_{{ Str::slug($item) }}">
                                                        <label class="form-check-label" for="fa_{{ Str::slug($item) }}">{{ $item }}</label>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i> Tutup
                    </button>
                    <button type="submit" class="btn btn-primary" id="btn-save" form="MainForm">
                        <i class="fas fa-save me-1"></i> Simpan Perubahan
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('stylesheet')
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/plugins/datatable/css/dataTables.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/css/select2.min.css" />
    <style>
        /* Loading State */
        body.loading {
            cursor: progress;
            position: relative;
        }
        body.loading::after {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255,255,255,0.7);
            z-index: 9998;
        }
        body.loading::before {
            content: "Memproses...";
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            z-index: 9999;
        }
        /* Preview Image */
        .preview-image {
            margin-top: 10px;
        }
        .preview-image img {
            max-width: 100%;
            height: auto;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
        }
        /* Error Validation */
        .is-invalid {
            border-color: #dc3545 !important;
        }
        .invalid-feedback {
            display: none;
            width: 100%;
            margin-top: 0.25rem;
            font-size: 0.875em;
            color: #dc3545;
        }
        .is-invalid ~ .invalid-feedback {
            display: block;
        }
        .card {
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            border: 1px solid rgba(0, 0, 0, 0.1);
        }
        .card-title {
            font-size: 1.1rem;
            color: #333;
        }
        .form-check-input:checked {
            background-color: #0d6efd;
            border-color: #0d6efd;
        }
        .img-thumbnail {
            padding: 0.25rem;
            background-color: #fff;
            border: 1px solid #dee2e6;
            border-radius: 0.25rem;
            max-width: 100%;
            height: auto;
        }
        /* Style untuk checkbox agar konsisten */
        .form-check {
            margin-bottom: 0.5rem;
        }
        .form-check-input {
            margin-top: 0.2em;
        }
        .form-check-label {
            margin-left: 0.5em;
        }
        /* Style untuk card */
        .card {
            border: 1px solid rgba(0, 0, 0, 0.125);
            border-radius: 0.5rem;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        }
        .card-title {
            font-size: 1.1rem;
            font-weight: 500;
            color: #333;
        }

        .layanan-summary-card {
            border-top: 4px solid transparent !important;
        }

        .layanan-summary-card-primary {
            border-top-color: #0d6efd !important;
        }

        .layanan-summary-card-success {
            border-top-color: #198754 !important;
        }

        .layanan-summary-card-warning {
            border-top-color: #ffc107 !important;
        }

        .layanan-summary-card-info {
            border-top-color: #0dcaf0 !important;
        }
    </style>
@endsection

@section('javascript')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables.net/2.1.1/jquery.dataTables.min.js"></script>
    <script src="{{ asset('assets/templates/admin/plugins/datatable/js/dataTables.bootstrap5.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-loading-overlay/2.1.7/loadingoverlay.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.10.3/sweetalert2.all.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/js/select2.full.min.js"></script>
    @php
        $resource = resource_loader(
            blade_path: $view,
            params: [
                'can_update' => $can_update ? 'true' : 'false',
                'can_delete' => $can_delete ? 'true' : 'false',
                'page_title' => $page_attr['title'],
            ],
        );
    @endphp
    <script src="{{ $resource }}"></script>
@endsection