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

<form action="{{ isset($debitur->id) ? route('debitur.update', $debitur->id) : route('debitur.store') }}" method="POST" id="debitur-form" class="grid gap-5">
    @if(isset($debitur->id))
        <input type="hidden" name="id" value="{{ $debitur->id }}">
        @method('PUT')
    @endif
    @csrf
    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
        <label class="form-label max-w-56 gap-1">
            Cabang
            <span class="text-danger">
                *
           </span>
        </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="branch_id" id="branch_id">
                <option value="">Pilih Cabang</option>
                @foreach($branches as $branch)
                    @if(isset($debitur))
                        <option value="{{ $branch->id }}" {{ $branch->id == $debitur->branch_id ? 'selected' : '' }}>{{ $branch->name }}</option>
                    @else
                        <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                    @endif

                @endforeach
            </select>
            @error('branch_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 gap-1">
            CIF
            <span class="text-danger">
                *
           </span>
        </label>
        <div class="flex flex-wrap items-baseline w-full">
            <input class="input  @error('cif') border-danger bg-danger-light @enderror" type="number" id="cif" name="cif" value="{{ $debitur->cif ?? '0000000000' }}">
            @error('cif')
            <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">
            Nomor Rekening
        </label>
        <div class="flex flex-wrap items-baseline w-full">
            <input class="input  @error('nomor_rekening') border-danger bg-danger-light @enderror" type="number" name="nomor_rekening" value="{{ $debitur->nomor_rekening ?? '' }}">
            @error('nomor_rekening')
            <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 gap-1">
            Nama Debitur
            <span class="text-danger">
                *
           </span>
        </label>
        <div class="flex flex-wrap items-baseline w-full">
            <input required class="input  @error('name') border-danger bg-danger-light @enderror" type="text" name="name" value="{{ $debitur->name ?? '' }}">
            @error('name')
            <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">
            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 gap-1">
            Address
            <span class="text-danger">
                *
           </span>
        </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 required 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($debitur))
                                <option value="{{ $province->code }}" {{ isset($debitur->province_code) && $debitur->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 required 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($debitur))
                                    <option value="{{ $city->code }}" {{ isset($debitur->city_code) && $debitur->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 required 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($debitur))
                                    <option value="{{ $district->code }}" {{ isset($debitur->district_code) && $debitur->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 required 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($debitur))
                                    <option value="{{ $village->code }}" {{ isset($debitur->village_code) && $debitur->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 required class="input  @error('postal_code') border-danger bg-danger-light @enderror" type="number" id="postal_code" name="postal_code" value="{{ $debitur->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 required class="textarea  @error('address') border-danger bg-danger-light @enderror" rows="3" id="address" name="address" placeholder="Alamat Lengkap">{{ $debitur->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" id="submit">
            Save
        </button>
    </div>
</form>
@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.getElementById('debitur-form');
            const nameInput = form.querySelector('input[name="name"]');
            const provinceSelect = form.querySelector('#province_code');
            const citySelect = form.querySelector('#city_code');
            const districtSelect = form.querySelector('#district_code');
            const villageSelect = form.querySelector('#village_code');
            const postalCodeInput = form.querySelector('#postal_code');
            const addressTextarea = form.querySelector('#address');
            const branchSelect = document.getElementById('branch_id');
            const cifInput = document.getElementById('cif');
            const submitButton = document.getElementById('submit');

            function validateField(field, errorMessage) {
                const value = field.value.trim();
                if (value.length === 0) {
                    field.classList.add('border-danger', 'bg-danger-light');
                    const existingError = field.parentElement.querySelector('.alert.text-danger');
                    if (!existingError) {
                        const em = document.createElement('em');
                        em.className = 'alert text-danger text-sm';
                        em.textContent = errorMessage;
                        field.parentElement.appendChild(em);
                    }
                    return false;
                } else {
                    field.classList.remove('border-danger', 'bg-danger-light');
                    const existingError = field.parentElement.querySelector('.alert.text-danger');
                    if (existingError) {
                        existingError.remove();
                    }
                    return true;
                }
            }

            function validateBranch() {
                return validateField(branchSelect, 'Cabang is required');
            }

            function validateCIF() {
                return validateField(cifInput, 'CIF is required');
            }

            function validateName() {
                return validateField(nameInput, 'Nama Debitur is required');
            }

            function validateProvince() {
                return validateField(provinceSelect, 'Province is required');
            }

            function validateCity() {
                return validateField(citySelect, 'City is required');
            }

            function validateDistrict() {
                return validateField(districtSelect, 'District is required');
            }

            function validateVillage() {
                return validateField(villageSelect, 'Village is required');
            }

            function validatePostalCode() {
                return validateField(postalCodeInput, 'Postal Code is required');
            }

            function validateAddress() {
                return validateField(addressTextarea, 'Address is required');
            }

            nameInput.addEventListener('blur', validateName);
            nameInput.addEventListener('input', validateName);
            provinceSelect.addEventListener('change', validateProvince);
            citySelect.addEventListener('change', validateCity);
            districtSelect.addEventListener('change', validateDistrict);
            villageSelect.addEventListener('change', validateVillage);
            postalCodeInput.addEventListener('blur', validatePostalCode);
            postalCodeInput.addEventListener('input', validatePostalCode);
            addressTextarea.addEventListener('blur', validateAddress);
            addressTextarea.addEventListener('input', validateAddress);
            branchSelect.addEventListener('change', validateVillage);
            cifInput.addEventListener('blur', validateCIF);
            cifInput.addEventListener('input', validateName);

            function validateAllFields() {
                const isValid =
                    validateBranch() &&
                    validateCIF() &&
                    validateName() &&
                    validateProvince() &&
                    validateCity() &&
                    validateDistrict() &&
                    validateVillage() &&
                    validatePostalCode() &&
                    validateAddress();

                return isValid;
            }

            form.addEventListener('submit', function (event) {
                const isValid =
                    validateBranch() &&
                    validateCIF() &&
                    validateName() &&
                    validateProvince() &&
                    validateCity() &&
                    validateDistrict() &&
                    validateVillage() &&
                    validatePostalCode() &&
                    validateAddress();

                if (!isValid) {
                    event.preventDefault();
                }
            });

            submitButton.addEventListener('click', function (event) {
                if (!validateAllFields()) {
                    event.preventDefault();
                }
            });
        });
    </script>
@endpush