lpj/resources/views/debitur/components/pemilik.blade.php

<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-5 lg:gap-7.5">
    @foreach($pemilikJaminan as $pemilik)
        <div class="card flex flex-col gap-5 p-5 lg:p-7.5">
            <div class="flex items-center flex-wrap justify-between gap-1">
                <div class="flex items-center gap-2.5">
                    <div class="relative size-[44px] shrink-0">
                        <svg class="w-full h-full stroke-primary-clarity fill-primary-light" fill="none" height="48" viewBox="0 0 44 48" width="44" xmlns="http://www.w3.org/2000/svg">
                            <path d="M16 2.4641C19.7128 0.320509 24.2872 0.320508 28 2.4641L37.6506 8.0359C41.3634 10.1795 43.6506 14.141 43.6506
			18.4282V29.5718C43.6506 33.859 41.3634 37.8205 37.6506 39.9641L28 45.5359C24.2872 47.6795 19.7128 47.6795 16 45.5359L6.34937
			39.9641C2.63655 37.8205 0.349365 33.859 0.349365 29.5718V18.4282C0.349365 14.141 2.63655 10.1795 6.34937 8.0359L16 2.4641Z" fill="">
                            </path>
                            <path d="M16.25 2.89711C19.8081 0.842838 24.1919 0.842837 27.75 2.89711L37.4006 8.46891C40.9587 10.5232 43.1506 14.3196 43.1506
			18.4282V29.5718C43.1506 33.6804 40.9587 37.4768 37.4006 39.5311L27.75 45.1029C24.1919 47.1572 19.8081 47.1572 16.25 45.1029L6.59937
			39.5311C3.04125 37.4768 0.849365 33.6803 0.849365 29.5718V18.4282C0.849365 14.3196 3.04125 10.5232 6.59937 8.46891L16.25 2.89711Z" stroke="">
                            </path>
                        </svg>
                        <div class="absolute leading-none left-2/4 top-2/4 -translate-y-2/4 -translate-x-2/4">
                            <i class="ki-filled ki-user-tick     text-1.5xl text-primary">
                            </i>
                        </div>
                    </div>
                    <div class="flex flex-col">
                        <a class="text-md font-semibold text-gray-900 hover:text-primary-active mb-px" href="/metronic/tailwind/demo1/public-profile/profiles/creator">
                            {{ $pemilik->name }}
                        </a>
                        <span class="text-2sm font-medium text-gray-600">
                            {{ $pemilik->hubungan_pemilik->name }}
                        </span>
                    </div>
                </div>
                <div class="menu inline-flex" data-menu="true">
                    <div class="flex flex-nowrap justify-center gap-1.5">
                        <a href="{{ route('debitur.pemilik.edit',['id' => $debitur->id,'pemilik' => $pemilik->id]) }}" class="btn btn-sm btn-icon btn-outline btn-info">
                            <i class="ki-outline ki-notepad-edit"></i>
                        </a>
                        <a onclick="deleteData({{ $pemilik->id }})" class="delete btn btn-sm btn-icon btn-outline btn-danger">
                            <i class="ki-outline ki-trash"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="grid">
                <div class="flex items-center justify-between flex-wrap mb-3.5 gap-2">
                    <span class="text-2xs text-gray-600 uppercase">
                        nomor id/ktp
                    </span>
                    <p class="text-2xs text-gray-600 text-right max-w-[250px]">
                        {{ $pemilik->nomor_id }}
                    </p>
                </div>
                <div class="border-t border-gray-300 border-dashed">
                </div>
                <div class="flex items-start justify-between flex-wrap my-2.5 gap-2">
                    <span class="text-2xs text-gray-600 uppercase">
                        npwp
                    </span>
                    <p class="text-2xs text-gray-600 text-right max-w-[250px]">
                        {{ $pemilik->npwp }}
                    </p>
                </div>
                <div class="border-t border-gray-300 border-dashed">
                </div>
                <div class="flex items-start justify-between flex-wrap my-2.5 gap-2">
                    <span class="text-2xs text-gray-600 uppercase">
                        nomor telepon
                    </span>
                    <p class="text-2xs text-gray-600 text-right max-w-[250px]">
                        {{ $pemilik->phone }}
                    </p>
                </div>
                <div class="border-t border-gray-300 border-dashed">
                </div>
                <div class="flex items-start justify-between flex-wrap my-2.5 gap-2">
                    <span class="text-2xs text-gray-600 uppercase">
                        Email
                    </span>
                    <p class="text-2xs text-gray-600 text-right max-w-[250px]">
                        {{ $pemilik->email }}
                    </p>
                </div>
                <div class="border-t border-gray-300 border-dashed mb-3.5">
                </div>
                <div class="flex items-start justify-between flex-wrap gap-2">
                    <span class="text-2xs text-gray-600 uppercase">
                        alamat
                    </span>
                    <p class="text-2xs text-gray-600 text-right max-w-[250px]">
                        {{ $pemilik->address.', '.$pemilik->village->name.', '.$pemilik->city->name.', '.$pemilik->province->name.', '.$pemilik->postal_code }}
                    </p>
                </div>
            </div>
        </div>
    @endforeach
    <style>
        .add-new-bg {
            background-image: url('/assets/media/images/2600x1200/bg-4.png');
        }

        .dark .add-new-bg {
            background-image: url('/assets/media/images/2600x1200/bg-4-dark.png');
        }
    </style>
    <a class="card border-2 border-dashed border-brand-clarity bg-center bg-[length:600px] bg-no-repeat add-new-bg" href="{{ route('debitur.pemilik.create',$debitur->id) }}">
        <div class="card-body grid items-center">
            <div class="flex flex-col gap-3">
                <div class="flex justify-center pt-5">
                    <div class="relative size-[60px] shrink-0">
                        <svg class="w-full h-full stroke-brand-clarity fill-light" fill="none" height="48" viewBox="0 0 44 48" width="44" xmlns="http://www.w3.org/2000/svg">
                            <path d="M16 2.4641C19.7128 0.320509 24.2872 0.320508 28 2.4641L37.6506 8.0359C41.3634 10.1795 43.6506 14.141 43.6506
			18.4282V29.5718C43.6506 33.859 41.3634 37.8205 37.6506 39.9641L28 45.5359C24.2872 47.6795 19.7128 47.6795 16 45.5359L6.34937
			39.9641C2.63655 37.8205 0.349365 33.859 0.349365 29.5718V18.4282C0.349365 14.141 2.63655 10.1795 6.34937 8.0359L16 2.4641Z" fill="">
                            </path>
                            <path d="M16.25 2.89711C19.8081 0.842838 24.1919 0.842837 27.75 2.89711L37.4006 8.46891C40.9587 10.5232 43.1506 14.3196 43.1506
			18.4282V29.5718C43.1506 33.6804 40.9587 37.4768 37.4006 39.5311L27.75 45.1029C24.1919 47.1572 19.8081 47.1572 16.25 45.1029L6.59937
			39.5311C3.04125 37.4768 0.849365 33.6803 0.849365 29.5718V18.4282C0.849365 14.3196 3.04125 10.5232 6.59937 8.46891L16.25 2.89711Z" stroke="">
                            </path>
                        </svg>
                        <div class="absolute leading-none left-2/4 top-2/4 -translate-y-2/4 -translate-x-2/4">
                            <i class="ki-filled ki-user-edit text-2xl text-brand">
                            </i>
                        </div>
                    </div>
                </div>
                <div class="flex flex-col text-center">
                    <span class="text-lg font-semibold text-gray-900 hover:text-primary-active mb-px">
                        Pemilik Jaminan
                    </span>
                    <span class="text-2sm font-normal text-gray-600">
                        Tambah Pemilik
                    </span>
                </div>
            </div>
        </div>
    </a>
</div>


@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script type="text/javascript">
        function deleteData(data) {
            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token()  }}'
                        }
                    });

                    $.ajax(`debitur/{{$debitur->id}}}/pemilik/${data}`, {
                        type: 'DELETE'
                    }).then((response) => {
                        swal.fire('Deleted!', 'Pemilik Jaminan has been deleted.', 'success').then(() => {
                            window.location.reload();
                        });
                    }).catch((error) => {
                        console.error('Error:', error);
                        Swal.fire('Error!', 'An error occurred while deleting the file.', 'error');
                    });
                }
            })
        }
    </script>
@endpush