@extends('layouts.admin.master')

@section('content')
    @php
        $can_qrcode_print = auth_can(h_prefix('qrcode_print'));
        $can_insert = auth_can(h_prefix('insert'));
        $can_update = auth_can(h_prefix('update'));
        $can_rumah = auth_can(h_prefix('rumah'));
        $can_delete = auth_can(h_prefix('delete'));
        $can_master = auth_can('admin.penduduk.master');
        $can_family = auth_can('admin.penduduk.keluarga');
        $can_save_another = auth_can('admin.profile.save_another');
        $can_excel = auth_can(h_prefix('excel'));
        $show_actions = $can_master || $can_delete || $can_update || $can_rumah || $can_save_another || $can_qrcode_print;
        $is_admin = auth()
            ->user()
            ->hasRole(config('app.super_admin_role'));
    @endphp
    <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>
                <div>
                    @if ($can_family)
                        <a href="{{ route('admin.penduduk.keluarga') }}" class="btn btn-outline-primary btn-sm">
                            <i class="fas fa-users"></i> Data Keluarga
                        </a>
                    @endif
                    @if ($can_excel)
                        <button class="btn btn-success btn-sm" onclick="exportExcel()">
                            <i class="fas fa-file-excel"></i> Ekspor
                        </button>
                    @endif
                    @if ($can_insert)
                        <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
                        </button>
                    @endif
                </div>
            </div>
            <hr class="mt-1 mb-0" />
            <div class="accordion accordion-flush" id="accordionOption">
                <div class="accordion-item">
                    <h6 class="accordion-header" id="headingSix">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#filterData" aria-expanded="false" aria-controls="filterData">
                            Filter Data
                        </button>
                    </h6>
                    <div id="filterData" class="accordion-collapse collapse" aria-labelledby="headingSix"
                        data-bs-parent="#accordionOption">
                        <div class="accordion-body">
                            <form action="javascript:void(0)" class="ml-md-3 mb-md-3" id="FilterForm">
                                <div class="form-group float-start me-2" style="width: 250px">
                                    <label for="filter_nomor_ktp">Nomor KTP</label>
                                    <br>
                                    <select class="form-control" id="filter_nomor_ktp" name="filter_nomor_ktp"
                                        style="width: 250px">
                                        <option value="">Semua</option>
                                        @foreach ($nomor_ktps as $nomor_ktp)
                                            <option value="{{ $nomor_ktp->nomor_ktp }}">
                                                {{ $nomor_ktp->nomor_ktp }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                @if ($is_admin)
                                    <div class="form-group float-start me-2" style="width: 250px">
                                        <label for="filter_role">Sebagai</label>
                                        <br>
                                        <select class="form-control" id="filter_role" name="filter_role"
                                            style="width: 250px">
                                            <option value="">Semua</option>
                                            @foreach ($user_role as $role)
                                                <option value="{{ $role->name }}">
                                                    {{ ucfirst(implode(' ', explode('_', $role->name))) }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                @endif
                                <div class="form-group float-start me-2" style="width: 250px">
                                    <label for="filter_active">Status Akun</label>
                                    <br>
                                    <select class="form-control" id="filter_active" name="filter_active"
                                        style="width: 250px">
                                        <option value="">Semua</option>
                                        <option value="1">Aktif</option>
                                        <option value="0">Tidak Aktif</option>
                                    </select>
                                </div>
                            </form>
                            <div style="clear: both"></div>
                            <button type="submit" form="FilterForm" class="btn btn-rounded btn-sm btn-secondary mt-2"
                                data-toggle="tooltip" title="Refresh Filter Table">
                                <i class="fas fa-sync-alt me-1"></i> Terapkan filter
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <table class="table table-striped table-hover w-100" id="tbl_main">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Foto</th>
                        <th>Nama</th>
                        {!! $is_admin ? '<th>Kontak</th>' : '' !!}
                        <th>Alamat Domisili</th>
                        {!! $show_actions ? '<th>Aksi</th>' : '' !!}
                    </tr>
                </thead>
                <tbody> </tbody>
            </table>
        </div>
    </div>

    <div class="modal fade" id="modal-qrcode">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title">Verifikasi Data Sebelum Generate QR Code</h6>
                    <button aria-label="Tutup" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Nomor KTP</label>
                            <div class="form-control-plaintext bg-light p-2 rounded" id="show-ktp"></div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Nomor KK</label>
                            <div class="form-control-plaintext bg-light p-2 rounded" id="show-kk"></div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Nama Penduduk</label>
                        <div class="form-control-plaintext bg-light p-2 rounded" id="show-nama"></div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Status QR Code</label>
                        <div class="form-control-plaintext bg-light p-2 rounded" id="show-status"></div>
                    </div>

                    <!-- Modern QR Code Preview -->
                    <div class="text-center mt-4" id="qrcode-preview-container">
                        <p class="mb-3 fw-semibold text-uppercase small tracking-wider" style="color: #6c757d; letter-spacing: 1px;">
                            PREVIEW QR CODE
                        </p>

                        <div id="qrcode-image" class="qr-code-container">
                            <!-- Default placeholder will be replaced by actual QR code -->
                            <div class="qr-placeholder">
                                <div class="qr-placeholder-icon">
                                    <i class="fas fa-qrcode"></i>
                                </div>
                                <p class="qr-placeholder-text">QR Code akan muncul di sini</p>
                                <small class="qr-placeholder-subtext">Data akan digenerate</small>
                            </div>
                        </div>

                        <!-- Status badge that will appear when QR is active -->
                        <div id="qrcode-status" class="qr-status-badge d-none">AKTIF</div>

                        <!-- Error message container -->
                        <div id="qrcode-error" class="qr-error-message d-none">
                            <i class="fas fa-exclamation-circle me-2"></i>
                            <span class="error-text"></span>
                        </div>

                        <!-- Action buttons -->
                        <div id="qrcode-actions" class="qr-actions d-none">
                            <a href="#" id="download-qrcode" class="btn btn-download">
                                <i class="fas fa-download me-2"></i> Download
                            </a>
                            <button id="deactivate-qrcode" class="btn btn-deactivate">
                                <i class="fas fa-ban me-2"></i> Nonaktifkan
                            </button>
                        </div>
                    </div>

                    <div class="alert alert-info mt-3">
                        <i class="fas fa-info-circle"></i> QR Code yang digenerate akan berlaku selama 2 tahun
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" id="btn-generate">
                        <i class="fas fa-qrcode mr-2"></i> Generate QR Code
                    </button>
                    <button class="btn btn-light" data-bs-dismiss="modal">
                        <i class="fas fa-times mr-2"></i> Tutup
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-default">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title" id="modal-default-title"></h6><button aria-label="Tutup" class="btn-close"
                        data-bs-dismiss="modal"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <form action="javascript:void(0)" id="UserForm" name="UserForm" method="POST"
                        enctype="multipart/form-data">
                        <input type="hidden" name="id" id="id">
                        <div class="form-group">
                            <small class="form-label" for="nomor_ktp">Nomor KTP <span class="text-danger">*</span></small>
                            <input type="text" class="form-control" id="nomor_ktp" name="nomor_ktp" placeholder="Nomor KTP (16 digit angka)"
                                   required pattern="[0-9]{16}" title="Nomor KTP harus 16 digit angka" maxlength="16"
                                   oninput="this.value = this.value.replace(/[^0-9]/g, '');" />
                            <small class="text-muted">Masukkan 16 digit angka tanpa tanda baca atau spasi</small>
                        </div>

                        <div class="form-group">
                            <small class="form-label" for="nomor_kk">Nomor KK <span class="text-danger">*</span></small>
                            <input type="text" class="form-control" id="nomor_kk" name="nomor_kk" placeholder="Nomor KK (16 digit angka)"
                                   required pattern="[0-9]{16}" title="Nomor KK harus 16 digit angka" maxlength="16"
                                   oninput="this.value = this.value.replace(/[^0-9]/g, '');" />
                            <small class="text-muted">Masukkan 16 digit angka tanpa tanda baca atau spasi</small>
                        </div>
                        <div class="form-group">
                            <small class="form-label" for="nama">Nama Penduduk <span
                                    class="text-danger">*</span></small>
                            <input type="text" class="form-control" id="nama" name="nama"
                                placeholder="Nama Penduduk" required="" />

                        </div>
                        <div class="form-group">
                            <small class="form-label" for="email">Email</small>
                            <input type="email" id="email" name="email" class="form-control"
                                placeholder="Alamat email"/>
                            <!-- <div class="help-block"></div> -->
                        </div>
                        <div class="form-group">
                            <small class="form-label" for="tanggal_lahir">Tanggal Lahir <span
                                    class="text-danger">*</span></small>
                            <input type="date" id="tanggal_lahir" name="tanggal_lahir"
                                class="form-control date-input-str" placeholder="Tanggal Lahir" required="" />
                            <div class="help-block"></div>
                        </div>
                        <div class="form-group ">
                            <small class="form-label" for="password">Password <span class="text-danger">*</span></small>
                            <input type="text" class="form-control" id="password" name="password"
                                placeholder="Password" required="">
                        </div>
                        <div class="form-group">
                            <small class="form-label" for="role">Akun Sebagai</small>
                            <select class="form-control select2" multiple style="width: 100%;" required=""
                                id="roles" name="roles[]">
                                @foreach ($user_role as $role)
                                    <option value="{{ $role->name }}">
                                        {{ ucfirst(implode(' ', explode('_', $role->name))) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <small class="form-label" for="active">Status Akun</small>
                            <select class="form-control" style="width: 100%;" required="" id="active"
                                name="active">
                                <option value="1">Aktif</option>
                                <option value="0">Tidak Aktif</option>
                            </select>
                        </div>
                    </form>
                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" id="btn-save" form="UserForm">
                        <li class="fas fa-save mr-1"></li> Simpan Perubahan
                    </button>
                    <button class="btn btn-light" data-bs-dismiss="modal">
                        <i class="fas fa-times"></i>
                        Tutup
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-image">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title" id="modal-image-title">View Foto</h6><button aria-label="Close"
                        class="btn-close" data-bs-dismiss="modal"><span aria-hidden="true"></span></button>
                </div>
                <div class="modal-body">
                    <img src="" class="img-fluid" id="modal-image-element" alt="" style="width: 100%">
                </div>
                <div class="modal-footer">
                    <button class="btn btn-light" data-bs-dismiss="modal">
                        <i class="fas fa-times"></i>
                        Close
                    </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/select2/4.1.0-rc.0/css/select2.min.css" integrity="sha512-aD9ophpFQ61nFZP6hXYu4Q/b/USW7rpLCQLX6Bi0WJHXNO7Js/fUENpBQf/+P4NtpzNX0jSgR5zVvPOJp+W2Kg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/plugins/select2/css/select2-bootstrap-5-theme.min.css') }}" />
    <style>
    table.dataTable {
        table-layout: fixed;
        width: 100% !important;
    }

    /* CSS khusus untuk kolom alamat */
    .alamat-container {
        white-space: normal !important;
        word-wrap: break-word;
    }
    .alamat-container .kelurahan {
        font-weight: bold;
        margin-bottom: 2px;
        display: block;
    }
    .alamat-container .alamat {
        font-size: 0.9em;
        color: #666;
        display: block;
    }

    /* Memastikan foto memiliki ukuran konsisten */
    .table-foto {
        width: 50px;
        height: 50px;
        object-fit: cover;
        border-radius: 4px;
        cursor: pointer;
    }

    /* Modern QR Code Container */
    .qr-code-container {
        background: white;
        border-radius: 16px;
        padding: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        display: inline-block;
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
        border: 1px solid rgba(0, 0, 0, 0.05);
    }

    /* QR Code Image Styling */
    .qr-code-image {
        width: 250px;
        height: 250px;
        object-fit: contain;
        background: white;
        padding: 10px;
        border-radius: 12px;
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s ease;
    }

    /* Hover Effect */
    .qr-code-container:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    }

    .qr-code-container:hover .qr-code-image {
        transform: scale(1.02);
    }

    /* Decorative Elements */
    .qr-code-container::before {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(
            to bottom right,
            rgba(255, 255, 255, 0.3),
            rgba(255, 255, 255, 0)
        );
        transform: rotate(30deg);
        pointer-events: none;
    }

    /* Status Badge Modern */
    .qr-status-badge {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 12px;
        font-weight: 600;
        padding: 5px 10px;
        border-radius: 20px;
        background: linear-gradient(135deg, #6e8efb, #a777e3);
        color: white;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 2;
    }

    /* Animation */
    @keyframes fadeIn {
        from { opacity: 0; transform: scale(0.95); }
        to { opacity: 1; transform: scale(1); }
    }

    .qr-code-container {
        animation: fadeIn 0.5s ease-out;
    }
    </style>
@endsection

@section('javascript')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables.net/2.1.1/jquery.dataTables.min.js" integrity="sha512-CKwcR6t3iAghHw93W7LcmVlSRCoGXiYyjITGKrFyDFqWHt6LIJ3j5f1dSjvL+OJbvG0KvPgP/zBEOikHUIu+3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables.net-bs5/1.13.8/dataTables.bootstrap5.min.js" integrity="sha512-zw34c1fnMeY29qzodeC+GGKfyQQ7hN+a9yjGnIAZbkPPn/Xeh8Z46uea/fjq5Mwsp4bxvGKfJrTNnh/GdIZJ1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-loading-overlay/2.1.7/loadingoverlay.min.js" integrity="sha512-hktawXAt9BdIaDoaO9DlLp6LYhbHMi5A36LcXQeHgVKUH6kJMOQsAtIw2kmQ9RERDpnSTlafajo6USh9JUXckw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.10.3/sweetalert2.all.min.js" integrity="sha512-1RuT3Xs+fbL5f+4MCot2I8PpBFRu4flycFf5s2x4PoBMTKbPgHBEEwQ1LovEIhrMaR3S8bJfnlBTbWJbKdj8Fg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/js/select2.full.min.js" integrity="sha512-PZUUFofP00wI366Au6XSNyN4Zg8M8Kma4JKIG7ywt8FEY1+Ur0H+FAlH6o0fKoCrdmM4+ZzMyW30msp8Z2zDaA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="{{ asset('assets/templates/admin/plugins/select2/js/select2-custom.js') }}"></script>
    @php
        $resource = resource_loader(
            blade_path: $view,
            params: [
                'can_qrcode_print' => $can_qrcode_print ? 'true' : 'false',
                'can_master' => $can_master ? 'true' : 'false',
                'can_update' => $can_update ? 'true' : 'false',
                'can_rumah' => $can_rumah ? 'true' : 'false',
                'can_delete' => $can_delete ? 'true' : 'false',
                'can_save_another' => $can_save_another ? 'true' : 'false',
                'is_admin' => $is_admin ? 'true' : 'false',
                'page_title' => $page_attr['title'],
            ],
        );
    @endphp
    <script src="{{ $resource }}"></script>
@endsection