@extends('layouts.index')
@section('title')
    Layanan - {{ $detail->nama }}
@endsection
@section('content')
    <!-- ============================================================== -->
    <!-- Bread crumb and right sidebar toggle -->
    <!-- ============================================================== -->
    <div class="page-titles">
        <div class="row">
            <div class="col-lg-8 col-md-6 col-12 align-self-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 d-flex align-items-center">
                        <li class="breadcrumb-item">
                            <a href="{{ url('dashboard') }}" class="link"><i class="ri-home-3-line fs-5"></i></a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{ url('layanan') }}" class="link">Layanan</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">
                            Detail
                        </li>
                    </ol>
                </nav>
                <h1 class="mb-0 fw-bold">Detail Layanan <u>{{$detail->nama}}</u></h1>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Bread crumb and right sidebar toggle -->
    <!-- ============================================================== -->
    <!-- ============================================================= -->
    <!-- Container fluid  -->
    <!-- ============================================================= -->
    <div class="container-fluid">
        <!-- ============================================================= -->
        <!-- Start Page Content -->
        <!-- ============================================================= -->
        <!-- Row -->
        <div class="row">
            <!-- Column -->
            <div class="col-lg-4 col-xlg-3 col-md-5">
                <div class="card">
                    <div class="card-body">
                        <center>
                            <img src="{{ Storage::url($detail->foto) }}" class="card-img-top" width="300" height="180"
                                style="object-fit: cover" />
                            <div class="mt-2">
                                <h4><small><img src="{{ Storage::url($detail->icon_logo) }}" width="15" height="15"/></small> {{ $detail->nama }} </h4>
                            </div>
                            <div class="row text-center justify-content-md-center">
                                <div class="col-4">
                                    <a href="#sub-layanan" class="link d-flex align-items-center"><i
                                            class="me-1 ri-community-line"></i>
                                        <font class="font-weight-medium">{{$sub_layanan->count()}}</font>
                                    </a>
                                </div>
                                <div class="col-4">
                                    <a href="#foto-layanan" class="link d-flex align-items-center"><i
                                            class="ri-image-line me-1"></i>
                                        <font class="font-weight-medium">{{$foto_layanan->count()}}</font>
                                    </a>
                                </div>
                            </div>
                        </center>
                    </div>
                    <div>
                        <hr />
                    </div>
                    <div class="card-body">
                        <small class="text-muted">Status</small>
                        <h6>
                            @if ($detail->status == 'Y')
                                <span class="badge bg-success">Aktif</span>
                            @else
                                <span class="badge bg-danger">Tidak Aktif</span>
                            @endif
                        </h6>
                        <small class="text-muted pt-4 db">Intermeso</small>
                        <h6>{{ $detail->intermeso ?? 'Belum ada' }}</h6>
                        <small class="text-muted pt-4 db">Deskripsi Sub Layanan</small>
                        <h6>{{ $detail->sub_layanan ?? 'Belum ada' }}</h6>
                    </div>
                </div>
            </div>
            <!-- Column -->
            <!-- Column -->
            <div class="col-lg-8 col-xlg-9 col-md-7">
                <div class="card overflow-hidden">
                    <!-- Tabs -->
                    <ul class="nav nav-pills" id="pills-tab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="pills-deskripsi-tab" data-bs-toggle="pill" href="#deskripsi"
                                role="tab" aria-controls="pills-deskripsi" aria-selected="true">Deskripsi</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="pills-sub-layanan-tab" data-bs-toggle="pill" href="#sub-layanan"
                                role="tab" aria-controls="pills-sub-layanan" aria-selected="false">Sub Layanan</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="pills-foto-tab" data-bs-toggle="pill" href="#foto-layanan"
                                role="tab" aria-controls="pills-foto" aria-selected="false">Foto</a>
                        </li>
                    </ul>
                    <!-- Tabs -->
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="deskripsi" role="tabpanel"
                            aria-labelledby="pills-deskripsi-tab">
                            <div class="card-body">
                                {!! $detail->deskripsi ?? 'Belum ada' !!}
                            </div>
                        </div>
                        <div class="tab-pane fade" id="sub-layanan" role="tabpanel" aria-labelledby="pills-sub-layanan-tab">
                            <div class="card-body">
                                <h4>Daftar Sub Layanan</h4>
                                <button style="float: right;"
                                    class="
                        btn btn-light-primary
                        text-primary
                        btn-lg
                        px-4
                        fs-4
                      "
                                    data-bs-toggle="modal" data-bs-target="#sub_layanan_tambah_modal">
                                    <i class="fa fa-plus-circle"></i> Tambah
                                </button>
                                <br>
                            </div>
                            <div id="sub_layanan_tambah_modal" class="modal fade" tabindex="-1"
                                aria-labelledby="tambah-sub-layanan-modal" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header d-flex align-items-center">
                                            <h4 class="modal-title" id="myModalLabel">
                                                Tambah Sub Layanan
                                            </h4>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <form id="tambah_sub">
                                                <label for="">Nama Sub Layanan</label>
                                                <input type="text" class="form-control"
                                                    placeholder="Masukan nama sub layanan" aria-label="nama"
                                                    id="nama_tambah_sub" name="nama" />
                                                <br>
                                                <label for="">Deskripsi</label>
                                                <textarea name="deskripsi" id="deskripsi_tambah_sub" class="form-control"
                                                    cols="10" rows="5"></textarea>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button"
                                                class="
                                  btn btn-light-danger
                                  text-danger
                                  font-weight-medium
                                  rounded-pill
                                  px-4
                              "
                                                data-bs-dismiss="modal">
                                                Close
                                            </button>
                                            <button type="submit" class="btn btn-success rounded-pill px-4">
                                                Save
                                            </button>
                                            </form>
                                        </div>
                                    </div>
                                    <!-- /.modal-content -->
                                </div>
                                <!-- /.modal-dialog -->
                            </div>
                            <div id="sub_layanan_ubah_modal" class="modal fade" tabindex="-1"
                                aria-labelledby="ubah-sub-layanan-modal" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header d-flex align-items-center">
                                            <h4 class="modal-title" id="myModalLabel">
                                                Ubah Sub Layanan
                                            </h4>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <form id="ubah_sub">
                                                <label for="">Nama Sub Layanan</label>
                                                <input type="hidden" id="id_ubah_sub" name="id">
                                                <input type="text" class="form-control"
                                                    placeholder="Masukan nama sub layanan" aria-label="nama"
                                                    id="nama_ubah_sub" name="nama" />
                                                <br>
                                                <label for="">Deskripsi</label>
                                                <textarea name="deskripsi" id="deskripsi_ubah_sub" class="form-control"
                                                    cols="10" rows="5"></textarea>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button"
                                                class="
                                  btn btn-light-danger
                                  text-danger
                                  font-weight-medium
                                  rounded-pill
                                  px-4
                              "
                                                data-bs-dismiss="modal">
                                                Close
                                            </button>
                                            <button type="submit" class="btn btn-success rounded-pill px-4">
                                                Save
                                            </button>
                                            </form>
                                        </div>
                                    </div>
                                    <!-- /.modal-content -->
                                </div>
                                <!-- /.modal-dialog -->
                            </div>
                            <div class="table-responsive">
                                <table class="table customize-table mb-0 v-middle text-nowrap">
                                    <thead class="table-light">
                                        <tr>
                                            <th class="border-bottom border-top">Nama</th>
                                            <th class="border-bottom border-top">Deskripsi</th>
                                            <th class="border-bottom border-top">Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody id="list_sub">
                                        @foreach ($sub_layanan as $item)
                                            <tr id="list_sub_{{ $item->id }}">
                                                <td>{{ $item->nama }}</td>
                                                <td>{{ $item->deskripsi }}</td>
                                                <td>
                                                    <div class="dropdown dropstart">
                                                        <a href="#" class="link" id="dropdownMenuButton"
                                                            data-bs-toggle="dropdown" aria-expanded="false">
                                                            <i data-feather="more-horizontal" class="feather-sm"></i>
                                                        </a>
                                                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                            <li><a class="dropdown-item" data-uid="{{ $item->id }}"
                                                                    data-deskripsi="{{ $item->deskripsi }}"
                                                                    data-nama="{{ $item->nama }}"
                                                                    onclick="listUpdateSub(this)">Edit</a></li>
                                                            <li><a class="dropdown-item"
                                                                    onclick="listDeleteSub({{ $item->id }})">Delete</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="foto-layanan" role="tabpanel" aria-labelledby="pills-foto-tab">
                            <div class="card-body">
                                <h4>Daftar Foto Layanan</h4>
                                <button style="float: right;"
                                    class="
                      btn btn-light-primary
                      text-primary
                      btn-lg
                      px-4
                      fs-4
                    "
                                    data-bs-toggle="modal" data-bs-target="#foto_layanan_tambah_modal">
                                    <i class="fa fa-plus-circle"></i> Tambah
                                </button>
                                <br>
                            </div>
                            <div id="foto_layanan_tambah_modal" class="modal fade" tabindex="-1"
                                aria-labelledby="tambah-foto-layanan-modal" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header d-flex align-items-center">
                                            <h4 class="modal-title" id="myModalLabel">
                                                Tambah Foto Layanan
                                            </h4>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <form id="tambah_foto" enctype="multipart/form-data">
                                                <label for="foto_tambah_foto">Foto Layanan</label>
                                                <input type="file" name="foto" class="form-control" id="foto_tambah_foto">
                                                <div id="preview_tambah" style="display: none">
                                                    <br>
                                                    <img id="imgshow_tambah" src="#" width="400" height="220"
                                                        style="object-fit: cover;border-radius: 20px;">
                                                </div>
                                                <br>
                                                <label for="nama_tambah_foto">Nama Foto Layanan</label>
                                                <input type="text" class="form-control"
                                                    placeholder="Masukan nama Foto layanan" aria-label="nama"
                                                    id="nama_tambah_foto" name="nama" />
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button"
                                                class="
                                btn btn-light-danger
                                text-danger
                                font-weight-medium
                                rounded-pill
                                px-4
                            "
                                                data-bs-dismiss="modal">
                                                Close
                                            </button>
                                            <button type="submit" class="btn btn-success rounded-pill px-4">
                                                Save
                                            </button>
                                            </form>
                                        </div>
                                    </div>
                                    <!-- /.modal-content -->
                                </div>
                                <!-- /.modal-dialog -->
                            </div>
                            <div id="foto_layanan_ubah_modal" class="modal fade" tabindex="-1"
                                aria-labelledby="ubah-foto-layanan-modal" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header d-flex align-items-center">
                                            <h4 class="modal-title" id="myModalLabel">
                                                Ubah Foto Layanan
                                            </h4>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <form id="ubah_foto" enctype="multipart/form-data">
                                                <input type="hidden" id="id_ubah_foto" name="id">
                                                <label for="foto_ubah_foto">Foto Layanan</label>
                                                <input type="file" name="foto" class="form-control" id="foto_ubah_foto">
                                                <div id="preview_ubah">
                                                    <br>
                                                    <img id="imgshow_ubah" src="#" width="400" height="220"
                                                        style="object-fit: cover;border-radius: 20px;">
                                                </div>
                                                <br>
                                                <label for="">Nama Foto Layanan</label>
                                                <input type="text" class="form-control"
                                                    placeholder="Masukan nama foto layanan" aria-label="nama"
                                                    id="nama_ubah_foto" name="nama" />
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button"
                                                class="
                                btn btn-light-danger
                                text-danger
                                font-weight-medium
                                rounded-pill
                                px-4
                            "
                                                data-bs-dismiss="modal">
                                                Close
                                            </button>
                                            <button type="submit" class="btn btn-success rounded-pill px-4">
                                                Save
                                            </button>
                                            </form>
                                        </div>
                                    </div>
                                    <!-- /.modal-content -->
                                </div>
                                <!-- /.modal-dialog -->
                            </div>
                            <div class="table-responsive">
                                <table class="table customize-table mb-0 v-middle text-nowrap">
                                    <thead class="table-light">
                                        <tr>
                                            <th class="border-bottom border-top">Foto</th>
                                            <th class="border-bottom border-top">Nama</th>
                                            <th class="border-bottom border-top">Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody id="list_foto">
                                        @foreach ($foto_layanan as $item)
                                            <tr id="list_foto_{{ $item->id }}">
                                                <td>
                                                    <img src="{{ Storage::url($item->foto) }}" width="250" height="140"
                                                        class="rounded" style="object-fit: cover" alt="">
                                                </td>
                                                <td>{{ $item->nama }}</td>
                                                <td>
                                                    <div class="dropdown dropstart">
                                                        <a href="#" class="link" id="dropdownMenuButton"
                                                            data-bs-toggle="dropdown" aria-expanded="false">
                                                            <i data-feather="more-horizontal" class="feather-sm"></i>
                                                        </a>
                                                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                            <li><a class="dropdown-item" data-uid="{{ $item->id }}"
                                                                    onclick="listUpdateFoto(this)">Edit</a></li>
                                                            <li><a class="dropdown-item"
                                                                    onclick="listDeleteFoto({{ $item->id }})">Delete</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Column -->
    </div>
    <!-- Row -->
    <!-- ============================================================= -->
    <!-- End PAge Content -->
    <!-- ============================================================= -->
    </div>
@endsection
@section('js')
    <script>
        //Sub Layanan
        //Aksi Tambah Sub Layanan
        const tambah_sub = document.getElementById('tambah_sub');

        tambah_sub.addEventListener('submit', async (e) => {
            e.preventDefault();

            const nama = tambah_sub.nama.value;
            const deskripsi = tambah_sub.deskripsi.value;
            const id_layanan = '{{ $detail->id }}';
            const _token = "{{ csrf_token() }}";

            let formData = new FormData();
            formData.append("id_layanan", id_layanan);
            formData.append("nama", nama);
            formData.append("deskripsi", deskripsi);

            try {
                let response = await fetch("{{ route('sub-layanan.store-modal') }}", {
                    method: "POST",
                    body: formData,
                    headers: {
                        "X-CSRF-TOKEN": _token
                    }
                });
                var datasend = await response.json();

                if (datasend.status == 'success') {

                    var res_id = datasend.data.id;
                    var res_nama = datasend.data.nama;
                    var res_deskripsi = datasend.data.deskripsi;

                    var row = '<tr id="list_sub_' + res_id + '"> <td>' + res_nama + '</td> <td>' +
                        res_deskripsi + '</td> <td> <div class="dropdown dropstart">';
                    row +=
                        '<a href="#" class="link" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false" ><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal feather-sm"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg> <i data-feather="more-horizontal" class="feather-sm" ></i>';
                    row +=
                        '</a><ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <li><a class="dropdown-item" data-uid="' +
                        res_id + '"';
                    row += 'data-deskripsi="' + res_deskripsi + '" data-nama="' + res_nama +
                        '" onclick="listUpdateSub(this)">Edit</a></li>';
                    row +=
                        '<li><a class="dropdown-item" onclick="listDeleteSub(' +
                        res_id + ')">Delete</a></li></ul></div></td></tr>';

                    $('#nama_tambah_sub').val("");
                    $('#list_sub').append(row);
                    $('#sub_layanan_tambah_modal').modal('hide');
                    Swal.fire('sub layanan berhasil ditambahkan', '', 'success')
                }

            } catch (err) {
                console.log(err);
            }

            return false;
        });

        //Aksi Ubah Sub Layanan

        function listUpdateSub(obj) {

            var id = obj.getAttribute('data-uid');
            var nama = obj.getAttribute('data-nama');
            var deskripsi = obj.getAttribute('data-deskripsi');

            $('#id_ubah_sub').val(id);
            $('#nama_ubah_sub').val(nama);
            $('#deskripsi_ubah_sub').val(deskripsi);

            $('#sub_layanan_ubah_modal').modal('show');
        }

        const ubah_sub = document.getElementById('ubah_sub');

        ubah_sub.addEventListener('submit', async (e) => {
            e.preventDefault();

            const id = ubah_sub.id.value;
            const nama = ubah_sub.nama.value;
            const deskripsi = ubah_sub.deskripsi.value;
            const _token = "{{ csrf_token() }}";

            let formData = new FormData();
            formData.append("id", id);
            formData.append("nama", nama);
            formData.append("deskripsi", deskripsi);

            try {
                let response = await fetch("{{ route('sub-layanan.update-modal') }}", {
                    method: "POST",
                    body: formData,
                    headers: {
                        "X-CSRF-TOKEN": _token
                    }
                });
                var datasend = await response.json();

                if (datasend.status == 'success') {

                    var res_id = datasend.data.id;
                    var res_nama = datasend.data.nama;
                    var res_deskripsi = datasend.data.deskripsi;

                    var row = '<tr id="list_sub_' + res_id + '"> <td>' + res_nama + '</td> <td>' +
                        res_deskripsi + '</td> <td> <div class="dropdown dropstart">';
                    row +=
                        '<a href="#" class="link" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false" ><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal feather-sm"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg> <i data-feather="more-horizontal" class="feather-sm" ></i>';
                    row +=
                        '</a><ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <li><a class="dropdown-item" data-uid="' +
                        res_id + '"';
                    row += 'data-deskripsi="' + res_deskripsi + '" data-nama="' + res_nama +
                        '" onclick="listUpdateSub(this)">Edit</a></li>';
                    row +=
                        '<li><a class="dropdown-item" onclick="listDeleteSub(' +
                        res_id + ')">Delete</a></li></ul></div></td></tr>';

                    $('#name_ubah_sub').val("");
                    $('#list_sub_' + res_id).replaceWith(row);
                    $('#sub_layanan_ubah_modal').modal('hide');
                    Swal.fire('sub layanan berhasil diperbaharui', '', 'success')
                }

            } catch (err) {
                console.log(err);
            }

            return false;
        });

        //Aksi Delete Sub Layanan

        function listDeleteSub(id) {
            Swal.fire({
                title: 'apakah kamu yakin menghapus sub layanan ini?',
                icon: 'info',
                confirmButtonText: `Ya, Hapus !`,
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('sub-layanan.delete-modal') }}",
                        method: "POST",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            "id": id
                        },

                        success: function(result) {
                            Swal.fire('sub layanan berhasil dihapus', '', 'success')
                            $('#list_sub_' + id).remove();
                        }
                    });
                } else {

                }
            });
        }
        //Foto
        $('document').ready(function() {
            $("#foto_tambah_foto").change(function() {
                $('#preview_tambah').show();
                if (this.files && this.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $('#imgshow_tambah').attr('src', e.target.result);
                    }
                    reader.readAsDataURL(this.files[0]);
                }
            });
            $("#foto_ubah_foto").change(function() {
                $('#preview_ubah').show();
                if (this.files && this.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $('#imgshow_ubah').attr('src', e.target.result);
                    }
                    reader.readAsDataURL(this.files[0]);
                }
            });
        });
        //Aksi Tambah Foto
        const tambah_foto = document.getElementById('tambah_foto');

        tambah_foto.addEventListener('submit', async (e) => {
            e.preventDefault();

            const nama = tambah_foto.nama.value;
            const foto = $('#foto_tambah_foto')[0].files;
            const id_layanan = '{{ $detail->id }}';
            const _token = "{{ csrf_token() }}";

            let formData = new FormData();
            formData.append("id_layanan", id_layanan);
            formData.append("nama", nama);
            formData.append("foto", foto[0]);

            try {
                let response = await fetch("{{ route('foto-layanan.store-modal') }}", {
                    method: "POST",
                    body: formData,
                    headers: {
                        "X-CSRF-TOKEN": _token
                    }
                });
                var datasend = await response.json();

                if (datasend.status == 'success') {

                    var res_id = datasend.data.id;
                    var res_nama = datasend.data.nama;
                    var res_foto = datasend.data.foto;

                    var row = '<tr id="list_foto_' + res_id + '"> <td> <img src="' + res_foto +
                        '" width="250" height="140" class="rounded" style="object-fit: cover" alt="">';
                    row += '</td> <td>' + res_nama +
                        '</td> <td> <div class="dropdown dropstart"> <a href="#" class="link" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal feather-sm"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>';
                    row +=
                        '<i data-feather="more-horizontal" class="feather-sm"></i> </a> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <li><a class="dropdown-item" data-uid="' +
                        res_id + '"'
                    row +=
                        'onclick="listUpdateFoto(this)">Edit</a></li> <li><a class="dropdown-item" onclick="listDeleteFoto(' +
                        res_id + ')">Delete</a> </li></ul></div></td></tr>';

                    $('#nama_tambah_foto').val("");
                    $('#list_foto').append(row);
                    $('#foto_layanan_tambah_modal').modal('hide');
                    Swal.fire('foto layanan berhasil ditambahkan', '', 'success')
                }

            } catch (err) {
                console.log(err);
            }

            return false;
        });

        //Aksi Ubah Foto Layanan

        function listUpdateFoto(obj) {

            var id = obj.getAttribute('data-uid');
            fetch("{{ url('foto-layanan-detail') }}/" + id).then(function(response) {
                response.json().then(function(text) {
                    var res = text;
                    var nama = res.data.nama;
                    var foto = res.data.foto;

                    $('#id_ubah_foto').val(id);
                    $('#nama_ubah_foto').val(nama);
                    $('#imgshow_ubah').attr('src', foto);
                });
            });

            $('#foto_layanan_ubah_modal').modal('show');
        }

        const ubah_foto = document.getElementById('ubah_foto');

        ubah_foto.addEventListener('submit', async (e) => {
            e.preventDefault();

            const id = ubah_foto.id.value;
            const nama = ubah_foto.nama.value;
            const foto = $('#foto_ubah_foto')[0].files;
            const _token = "{{ csrf_token() }}";

            let formData = new FormData();
            formData.append("id", id);
            formData.append("nama", nama);
            formData.append("foto", foto[0]);

            try {
                let response = await fetch("{{ route('foto-layanan.update-modal') }}", {
                    method: "POST",
                    body: formData,
                    headers: {
                        "X-CSRF-TOKEN": _token
                    }
                });
                var datasend = await response.json();

                if (datasend.status == 'success') {

                    var res_id = datasend.data.id;
                    var res_nama = datasend.data.nama;
                    var res_foto = datasend.data.foto;

                    var row = '<tr id="list_foto_' + res_id + '"> <td> <img src="' + res_foto +
                        '" width="250" height="140" class="rounded" style="object-fit: cover" alt="">';
                    row += '</td> <td>' + res_nama +
                        '</td> <td> <div class="dropdown dropstart"> <a href="#" class="link" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal feather-sm"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>';
                    row +=
                        '<i data-feather="more-horizontal" class="feather-sm"></i> </a> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <li><a class="dropdown-item" data-uid="' +
                        res_id + '"'
                    row +=
                        'onclick="listUpdateFoto(this)">Edit</a></li> <li><a class="dropdown-item" onclick="listDeleteFoto(' +
                        res_id + ')">Delete</a> </li></ul></div></td></tr>';

                    $('#name_ubah_foto').val("");
                    $('#list_foto_' + res_id).replaceWith(row);
                    $('#foto_layanan_ubah_modal').modal('hide');
                    Swal.fire('foto layanan berhasil diperbaharui', '', 'success')
                }

            } catch (err) {
                console.log(err);
            }

            return false;
        });

        //Aksi Delete Foto Layanan

        function listDeleteFoto(id) {
            Swal.fire({
                title: 'apakah kamu yakin menghapus foto layanan ini?',
                icon: 'info',
                confirmButtonText: `Ya, Hapus !`,
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('foto-layanan.delete-modal') }}",
                        method: "POST",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            "id": id
                        },

                        success: function(result) {
                            Swal.fire('foto layanan berhasil dihapus', '', 'success')
                            $('#list_foto_' + id).remove();
                        }
                    });
                } else {

                }
            });
        }
    </script>
@endsection