@extends('backoffice.template.app')
@section('script')
@if (session('success-verif'))
<script>
    Swal.fire({
        icon: 'success',
        title: 'Sukses!',
        text: "{{ session('success-verif') }}",
    })

</script>
@endif
<script>
    $(document).ready(function () {
        $('#table-profil-desa').DataTable();
        $('.dropify').dropify({
            tpl: {
                message: '<div class="dropify-message"><span class="file-icon" /></div>',
            }
        });
    });

</script>
<script>
    function handleEdit(p, url) {
        $('#id-edit').val(p.id);
        $('#gambar-edit').val(p.gambar);
        $("#form-edit").attr('action', url);
    }

    function handleCreate(url) {
        $("#form-create").attr('action', url);
    }

    function handleDelete(p, url) {
        $('#id-delete').val(p.id);
        $("#form-delete").attr('action', url);
    }

    function zoomFoto(pathFoto) {
        $('#foto-zoom').attr('src', pathFoto);
    }

</script>
@endsection
@section('content')
<h4 class="fw-bold py-3 mb-4">
    <span class="text-muted fw-light">Admin /</span> Profil Desa
</h4>
<div class="card py-4 px-4">
    <button data-bs-toggle="modal" data-bs-target="#modal-create"
        onclick="handleCreate('{{ route('profil-desa.store') }}')" class="btn btn-primary my-4 w-25">Tambah</button>
    <table class="table table-striped" id="table-profil-desa">
        <thead>
            <tr>
                <th>Gambar</th>
                <th>Aksi</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($profil as $p)
            <tr>
                <td>
                    <img src="{{ asset('storage/' . $p->gambar) }}" alt=""
                        style="width: 120px; height: 68px; object-fit: cover;"
                        onclick="zoomFoto('{{ asset('storage/' . $p->gambar) }}')" data-bs-toggle="modal"
                        data-bs-target="#modal-foto">
                </td>
                <td>
                    <div class="actionform">
                        {{-- <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
                  Edit
                </button> --}}
                        <button class="btn btn-warning me-1" data-bs-toggle="modal" data-bs-target="#modal-edit"
                            onclick="handleEdit({{ $p }}, '{{ route('profil-desa.update') }}')">
                            Edit
                        </button>
                        <button class="btn btn-danger me-1" data-bs-toggle="modal" data-bs-target="#modal-delete"
                            onclick="handleDelete({{ $p }}, '{{ route('profil-desa.delete') }}')">
                            Hapus
                        </button>
                    </div>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

<!-- Modal Create -->
<div class="modal fade" id="modal-create" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="POST" id="form-create" enctype="multipart/form-data">
                @csrf
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="staticBackdropLabel">Tambah</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-4">
                        <label for="gambar" class="form-label">Gambar</label>
                        <input type="file" class="dropify" name="gambar" id="gambar-create" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Tidak</button>
                    <button type="submit" class="btn btn-success">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Edit -->
<div class="modal fade" id="modal-edit" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="POST" id="form-edit" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="staticBackdropLabel">Edit</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="id-edit" name="id" required>
                    <div class="mb-4">
                        <label for="gambar" class="form-label">Gambar</label>
                        <input type="file" class="dropify" name="gambar" id="gambar-edit" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Tidak</button>
                    <button type="submit" class="btn btn-success">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Delete -->
<div class="modal fade" id="modal-delete" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="POST" id="form-delete" enctype="multipart/form-data">
                @csrf
                @method('DELETE')
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="staticBackdropLabel">Hapus</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="id-delete" name="id" required>
                    <h3>Konfirmasi hapus data</h3>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Tidak</button>
                    <button type="submit" class="btn btn-success">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Foto -->
<div class="modal fade" id="modal-foto" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="staticBackdropLabel">Foto Laporan</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <img alt="foto laporan" id="foto-zoom" class="w-100">
            </div>
        </div>
    </div>
</div>
@endsection