@extends('layouts.main')

@section('breadcrumbs')
    {{ Breadcrumbs::render(request()->route()->getName()) }}
@endsection

@section('content')
    <div class="w-full grid gap-5 lg:gap-7.5 mx-auto">

        <div class="card border border-agi-100 pb-2.5">
            <div class="card-header bg-agi-50" id="basic_settings">
                <h3 class="card-title">
                    {{ isset($pemilik->id) ? 'Edit' : 'Tambah' }} Pemilik Jaminan
                </h3>
                <div class="flex items-center gap-2">
                    @if(request()->get('document'))
                        <a href="{{ request()->get('from') == 'update-document' ? route('debitur.jaminan.edit',['id'=>$debitur->id,'jaminan'=>request()->get('document')]) : route('debitur.pemilik.index',$debitur->id) }}" class="btn btn-xs btn-info"><i class="ki-filled ki-exit-left"></i> Back</a>
                    @else
                        <a href="{{ request()->get('from') == 'create-document' ? route('debitur.jaminan.create',$debitur->id) : route('debitur.pemilik.index',$debitur->id) }}" class="btn btn-xs btn-info"><i class="ki-filled ki-exit-left"></i> Back</a>
                    @endif
                </div>
            </div>
            <div class="card-body">
                <form action="{{ isset($pemilik->id) ? route('debitur.pemilik.update', ['id'=>$debitur->id,'pemilik'=>$pemilik->id]) : route('debitur.pemilik.store',$debitur->id) }}" method="POST" class="grid gap-5" enctype="multipart/form-data">
                    @if(isset($pemilik->id))
                        @method('PUT')
                    @endif
                    @csrf

                    @if(request()->get('from'))
                        <input type="hidden" name="from" value="{{ request()->get('from') }}">
                    @endif

                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                        <label class="form-label max-w-56">
                            Debitur
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <input type="hidden" name="debiture_id" value="{{ $debitur->id ?? '' }}">
                            <p class="text-base text-gray-700">
                                {{ $debitur->name ?? '' }} | {{ $debitur->address ?? '' }}
                                {{ $debitur->village?->name ?? '' }}
                                {{ $debitur->city?->name ?? '' }}
                                {{ $debitur->province?->name ?? '' }}
                                {{ $debitur->country?->name ?? '' }},
                                {{ $debitur->postal_code ?? '' }}
                            </p>

                        </div>
                    </div>
                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                        <label class="form-label max-w-56">
                            Hubungan Pemilik Jaminan
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <select class="input tomselect w-full @error('branch_id') border-danger bg-danger-light @enderror" name="hubungan_pemilik_jaminan_id" id="hubungan_pemilik_jaminan_id">
                                <option value="">Pilih Hubungan Pemilik Jaminan</option>
                                @if(isset($hubunganPemilik))
                                    @foreach($hubunganPemilik as $hubungan)
                                        @if(isset($pemilik))
                                            <option value="{{ $hubungan->id }}" {{ isset($pemilik->hubungan_pemilik_jaminan_id) && $pemilik->hubungan_pemilik_jaminan_id == $hubungan->id?'selected' : '' }}>
                                                {{ $hubungan->name }}
                                            </option>
                                        @else
                                            <option value="{{ $hubungan->id }}">
                                                {{ $hubungan->name }}
                                            </option>
                                        @endif
                                    @endforeach
                                @endif
                            </select>
                            @error('hubungan_pemilik_jaminan_id')
                            <em class="alert text-danger text-sm">{{ $message }}</em>
                            @enderror
                        </div>
                    </div>
                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                        <label class="form-label max-w-56">
                            Nama Lengkap
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <div class="flex flex-col lg:flex-row gap-2 w-full">
                                <div class="flex flex-wrap items-baseline w-full">
                                    <input class="input  @error('name') border-danger bg-danger-light @enderror" type="text " id="name" name="name" value="{{ $pemilik->name ?? '' }}" placeholder="Nama Pemilik Jaminan">
                                    @error('name')
                                    <em class="alert text-danger text-sm">{{ $message }}</em>
                                    @enderror
                                </div>
                                <div class="flex flex-wrap items-baseline w-full">
                                    <input class="input  @error('nomor_id') border-danger bg-danger-light @enderror" type="number" name="nomor_id" value="{{ $pemilik->nomor_id ?? '' }}" placeholder="Nomor ID/KTP">
                                    @error('nomor_id')
                                    <em class="alert text-danger text-sm">{{ $message }}</em>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="nama_sertifikat">
                        @if(isset($detailSertifikat))
                           @foreach(json_decode($detailSertifikat) as $sertifikat)
                                <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 mb-5">
                                    <label class="form-label max-w-56">
                                        Nama Lengkap
                                    </label>
                                    <div class="flex flex-wrap items-baseline w-full">
                                        <div class="flex flex-col lg:flex-row gap-2 w-full">
                                            <div class="flex flex-wrap items-baseline w-full">
                                                <input class="input" type="text" id="name" name="detail_sertifikat[name][]" value="{{ $sertifikat->name }}" placeholder="Nama Pemilik Jaminan">

                                            </div>
                                            <div class="flex flex-wrap items-baseline w-full">
                                                <input class="input" type="number" name="detail_sertifikat[nomor_id][]" value="{{ $sertifikat->nomor_id }}" placeholder="Nomor ID/KTP">

                                            </div>
                                            <button type="button" class="btn btn-danger btn-xs delete-button">Hapus</button>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                        <label class="form-label max-w-56">
                            &nbsp;
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <button type="button" id="tambah_sertifikat" class="btn btn-primary btn-xs">Tambah Nama di Sertifikat</button>
                        </div>
                    </div>

                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                        <label class="form-label max-w-56">
                            NPWP
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <input class="input  @error('npwp') border-danger bg-danger-light @enderror" type="number" name="npwp" value="{{ $debitur->npwp ?? '' }}">
                            @error('npwp')
                            <em class="alert text-danger text-sm">{{ $message }}</em>
                            @enderror
                        </div>
                    </div>
                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                        <label class="form-label max-w-56">
                            Email
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <input class="input  @error('email') border-danger bg-danger-light @enderror" type="email" name="email" value="{{ $debitur->email ?? '' }}">
                            @error('email')
                            <em class="alert text-danger text-sm">{{ $message }}</em>
                            @enderror
                        </div>
                    </div>
                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                        <label class="form-label max-w-56">
                            No Handphone
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <input class="input  @error('phone') border-danger bg-danger-light @enderror" type="number" name="phone" value="{{ $debitur->phone ?? '' }}">
                            @error('phone')
                            <em class="alert text-danger text-sm">{{ $message }}</em>
                            @enderror
                        </div>
                    </div>

                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                        <label class="form-label max-w-56">
                            Alamat
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <div class="flex flex-col lg:flex-row gap-2 w-full">
                                <div class="flex flex-wrap items-baseline w-full">
                                    <select id="province_code" name="province_code" class="select w-full @error('province_code') border-danger bg-danger-light @enderror">
                                        <option value="">Select Province</option>
                                        @foreach($provinces as $province)
                                            @if(isset($pemilik))
                                                <option value="{{ $province->code }}" {{ isset($pemilik->province_code) && $pemilik->province_code == $province->code?'selected' : '' }}>
                                                    {{ $province->name }}
                                                </option>
                                            @else
                                                <option value="{{ $province->code }}">
                                                    {{ $province->name }}
                                                </option>
                                            @endif
                                        @endforeach
                                    </select>
                                    @error('province_code')
                                    <em class="alert text-danger text-sm">{{ $message }}</em>
                                    @enderror
                                </div>
                                <div class="flex flex-wrap items-baseline w-full">
                                    <select id="city_code" name="city_code" class="select w-full @error('city_code') border-danger bg-danger-light @enderror">
                                        <option value="">Select City</option>
                                        @if(isset($cities))
                                            @foreach($cities as $city)
                                                @if(isset($pemilik))
                                                    <option value="{{ $city->code }}" {{ isset($pemilik->city_code) && $pemilik->city_code == $city->code?'selected' : '' }}>
                                                        {{ $city->name }}
                                                    </option>
                                                @else
                                                    <option value="{{ $city->code }}">
                                                        {{ $city->name }}
                                                    </option>
                                                @endif
                                            @endforeach

                                        @endif
                                    </select>
                                    @error('city_code')
                                    <em class="alert text-danger text-sm">{{ $message }}</em>
                                    @enderror
                                </div>
                            </div>
                            <div class="flex flex-col lg:flex-row gap-2 w-full mt-2 lg:mt-5">
                                <div class="flex flex-wrap items-baseline w-full">
                                    <select id="district_code" name="district_code" class="select w-full @error('district_code') border-danger bg-danger-light @enderror">
                                        <option value="">Select District</option>
                                        @if(isset($districts))
                                            @foreach($districts as $district)
                                                @if(isset($pemilik))
                                                    <option value="{{ $district->code }}" {{ isset($pemilik->district_code) && $pemilik->district_code == $district->code?'selected' : '' }}>
                                                        {{ $district->name }}
                                                    </option>
                                                @else
                                                    <option value="{{ $district->code }}">
                                                        {{ $district->name }}
                                                    </option>
                                                @endif
                                            @endforeach

                                        @endif
                                    </select>
                                    @error('district_code')
                                    <em class="alert text-danger text-sm">{{ $message }}</em>
                                    @enderror
                                </div>
                                <div class="flex flex-wrap items-baseline w-full">
                                    <select id="village_code" name="village_code" class="select w-full @error('district_code') border-danger bg-danger-light @enderror">
                                        <option value="">Select Village</option>
                                        @if(isset($villages))
                                            @foreach($villages as $village)
                                                @if(isset($pemilik))
                                                    <option value="{{ $village->code }}" {{ isset($pemilik->village_code) && $pemilik->village_code == $village->code?'selected' : '' }}>
                                                        {{ $village->name }}
                                                    </option>
                                                @else
                                                    <option value="{{ $village->code }}">
                                                        {{ $village->name }}
                                                    </option>
                                                @endif
                                            @endforeach

                                        @endif
                                    </select>
                                    @error('district_code')
                                    <em class="alert text-danger text-sm">{{ $message }}</em>
                                    @enderror
                                </div>
                                <div class="flex flex-wrap items-baseline w-full">
                                    <input class="input  @error('postal_code') border-danger bg-danger-light @enderror" type="number" id="postal_code" name="postal_code" value="{{ $pemilik->postal_code ?? '' }}" placeholder="Postal Code">
                                    @error('postal_code')
                                    <em class="alert text-danger text-sm">{{ $message }}</em>
                                    @enderror
                                </div>
                            </div>
                            <div class="flex flex-row w-full mt-2 lg:mt-5">
                                <textarea class="textarea  @error('address') border-danger bg-danger-light @enderror" rows="3" type="number" id="address" name="address">{{ $pemilik->address ?? '' }}</textarea>
                                @error('address')
                                <em class="alert text-danger text-sm">{{ $message }}</em>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="flex justify-end">
                        <button type="submit" class="btn btn-primary">
                            Save
                        </button>
                    </div>
                </form>

            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const namaSertifikatDiv = document.getElementById("nama_sertifikat");

            // Function to add delete event listeners to existing buttons
            function addDeleteListeners() {
                document.querySelectorAll(".delete-button").forEach(button => {
                    button.addEventListener("click", function() {
                        this.closest(".flex.items-baseline.flex-wrap.lg\\:flex-nowrap.gap-2\\.5.mb-5").remove();
                    });
                });
            }

            // Add delete listeners to existing buttons
            addDeleteListeners();

            document.getElementById("tambah_sertifikat").addEventListener("click", function() {
                const newDiv = document.createElement("div");
                newDiv.className = "flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 mb-5";
                newDiv.innerHTML = `
                    <label class="form-label max-w-56">
                        Nama Lengkap
                    </label>
                    <div class="flex flex-wrap items-baseline w-full">
                        <div class="flex flex-col lg:flex-row gap-2 w-full">
                            <div class="flex flex-wrap items-baseline w-full">
                                <input class="input" type="text" name="detail_sertifikat[name][]" value="" placeholder="Nama Pemilik Jaminan">
                            </div>
                            <div class="flex flex-wrap items-baseline w-full">
                                <input class="input" type="number" name="detail_sertifikat[nomor_id][]" value="" placeholder="Nomor ID/KTP">
                            </div>
                            <button type="button" class="btn btn-danger btn-xs delete-button">Hapus</button>
                        </div>
                    </div>
                `;
                namaSertifikatDiv.appendChild(newDiv);

                // Add delete listener to the new button
                addDeleteListeners();
            });
        });
    </script>
@endpush