@extends('layout.main')

@section('content')
    <div class="container grid px-6 mx-auto">
        <h4 class="mb-4 mt-4 text-lg font-semibold text-gray-600 dark:text-gray-300">
            Add New Loan Product
        </h4>
        <div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
            <form action="{{ route('loan-products.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="mt-2 grid gap-2 mb-3 md:grid-cols-2">
                    <label class="block mb-4 mr-3 text-sm">
                        <span class="text-gray-700 dark:text-gray-400">*Product Name</span>
                        <input
                            class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 
      @error('product_name')border-red-600 focus:border-red-400 focus:outline-none focus:shadow-outline-red @enderror
      focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
                            name="product_name" value="{{ old('product_name') }}" placeholder="Name">
                        @error('product_name')
                            <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </label>
                    <label class="block mb-4 text-sm">
                        <span class="text-gray-700 dark:text-gray-400">*Product Short Name</span>
                        <input
                            class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 
                            @error('short_name')border-red-600 focus:border-red-400 focus:outline-none focus:shadow-outline-red @enderror
                            focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
                            name="short_name" value="{{ old('short_name') }}" placeholder="Short Name">
                        @error('short_name')
                            <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </label>
                </div>
                <div class="mt-2 grid gap-2 mb-3 md:grid-cols-2">
                    <label class="block mb-4 mr-3 text-sm">
                        <span class="text-gray-700 dark:text-gray-400">* Funds Accounts</span>
                        <select name="fund_id"
                            class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-select focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray">
                            <option value="">Select Funds </option>
                            @forelse($funds as $val)
                                <option value="{{ $val->id }}" @selected(old('fund_id') == $val->id)>{{ $val->name }}
                                </option>
                            @empty
                            @endforelse
                        </select>
                        @error('fund_id')
                            <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </label>


                    <label for="interest_method" class="block mb-4 text-sm">
                        <span class="text-gray-700 dark:text-gray-400">*Select Interest Method</span>
                        <select id="interest_method" name="interest_method"
                            class="select2 block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-select @error('interest_method') border-red-600 focus:border-red-400 focus:outline-none focus:shadow-outline-red @enderror focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray">
                            <option selected disabled>Select method</option>
                            @foreach ($interestMethods as $index => $value)
                                <option value="{{ $index }}" @selected(old('interest_method') == $index)>{{ $value }}
                                </option>
                            @endforeach
                        </select>
                        <x-form.error field='interest_method' />
                    </label>
                </div>

                <!-- Multiple Charges Section -->
                <div class="mb-6">
                    <div class="flex justify-between items-center mb-3">
                        <span class="text-gray-700 dark:text-gray-400 font-medium">* Charges</span>
                        <button type="button" id="add-charge-btn"
                            class="px-3 py-2 text-xs font-medium leading-5 text-white transition-colors duration-150 bg-green-600 border border-transparent rounded-lg active:bg-green-600 hover:bg-green-700 focus:outline-none focus:shadow-outline-green">
                            + Add Charge
                        </button>
                    </div>

                    <div id="charges-container" class=" grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                        <!-- Initial charge field -->
                        @if (old('charges_id'))
                            @foreach (old('charges_id') as $chargeId)
                                <div class="charge-item mb-3 p-3 border rounded-lg dark:border-gray-600">
                                    <div class="flex gap-2 items-end mb-3">
                                        <div class="flex-1">
                                            <label class="block text-sm">
                                                <span class="text-gray-700 dark:text-gray-400">Select Charge</span>
                                                <select name="charges_id[]"
                                                    class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-select focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray">
                                                    <option value="">Select Charges</option>
                                                    @forelse($charges as $val)
                                                        <option value="{{ $val->id }}" @selected($chargeId == $val->id)>
                                                            {{ $val->name }}</option>
                                                    @empty
                                                    @endforelse
                                                </select>
                                            </label>
                                        </div>
                                        <button type="button"
                                            class="remove-charge-btn px-3 py-2 text-xs font-medium leading-5 text-white transition-colors duration-150 bg-red-600 border border-transparent rounded-lg active:bg-red-600 hover:bg-red-700 focus:outline-none focus:shadow-outline-red">
                                            Remove
                                        </button>
                                    </div>
                                </div>
                            @endforeach
                        @else
                            <div class="charge-item mb-3 p-3 border rounded-lg dark:border-gray-600">
                                <div class="flex gap-2 items-end">
                                    <div class="flex-1">
                                        <label class="block text-sm">
                                            <span class="text-gray-700 dark:text-gray-400">Select Charge</span>
                                            <select name="charges_id[]"
                                                class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-select focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray">
                                                <option value="">Select Charges</option>
                                                @forelse($charges as $val)
                                                    <option value="{{ $val->id }}">{{ $val->name }}</option>
                                                @empty
                                                @endforelse
                                            </select>
                                        </label>
                                    </div>
                                    <button type="button"
                                        class="remove-charge-btn px-3 py-2 text-xs font-medium leading-5 text-white transition-colors duration-150 bg-red-600 border border-transparent rounded-lg active:bg-red-600 hover:bg-red-700 focus:outline-none focus:shadow-outline-red"
                                        style="display: none;">
                                        Remove
                                    </button>
                                </div>
                            </div>
                        @endif
                    </div>

                    @error('charges_id')
                        <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                    @enderror
                    @error('charges_id.*')
                        <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mt-2 grid gap-2 mb-3 md:grid-cols-2">
                    <label class="block mb-4 mr-3 text-sm">
                        <span class="text-gray-700 dark:text-gray-400">* Product Start Date</span>
                        <input type="date" name="start_date" value="{{ old('start_date') }}"
                            class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 
                        @error('start_date')border-red-600 focus:border-red-400 focus:outline-none focus:shadow-outline-red @enderror
                        focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"></input>
                        @error('start_date')
                            <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </label>
                    <label class="block mb-4 text-sm">
                        <span class="text-gray-700 dark:text-gray-400">* Product End Date</span>
                        <input type="date" name="end_date" value="{{ old('end_date') }}"
                            class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 
                        @error('end_date')border-red-600 focus:border-red-400 focus:outline-none focus:shadow-outline-red @enderror
                        focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
                        </input>
                        @error('end_date')
                            <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </label>
                </div>
                <div class="mt-2 grid gap-2 mb-3 md:grid-cols-2">
                    <label class="block mb-4 mr-3 text-sm">
                        <span class="text-gray-700 dark:text-gray-400">* Number Of Days OverDue</span>
                        <input type="number" min="0" name="number_days_overdue"
                            value="{{ old('number_days_overdue') }}"
                            class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 
                        @error('number_days_overdue')border-red-600 focus:border-red-400 focus:outline-none focus:shadow-outline-red @enderror
                        focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"></input>
                        @error('number_days_overdue')
                            <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </label>
                    <label class="block mb-4 text-sm">
                        <span class="text-gray-700 dark:text-gray-400">* Max day before bad loan</span>
                        <input type="number" min="0" name="max_day_before_bad_loan"
                            value="{{ old('max_day_before_bad_loan') }}"
                            class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 
                        @error('max_day_before_bad_loan')border-red-600 focus:border-red-400 focus:outline-none focus:shadow-outline-red @enderror
                        focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
                        </input>
                        @error('max_day_before_bad_loan')
                            <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </label>
                </div>
                <div class="mt-2 grid gap-2 mb-3 md:grid-cols-2">
                    <label class="block mb-4 mr-3 text-sm">
                        <span class="text-gray-700 dark:text-gray-400">* Days In Year</span>
                        <input type="number" min="0" name="days_in_year" value="{{ old('days_in_year') }}"
                            class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 
                        @error('days_in_year')border-red-600 focus:border-red-400 focus:outline-none focus:shadow-outline-red @enderror
                        focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"></input>
                        @error('days_in_year')
                            <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </label>
                    <label class="block mb-4 text-sm">
                        <span class="text-gray-700 dark:text-gray-400">* Days in Month</span>
                        <input type="number" min="0" name="days_in_month" value="{{ old('days_in_month') }}"
                            class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 
                        @error('days_in_month')border-red-600 focus:border-red-400 focus:outline-none focus:shadow-outline-red @enderror
                        focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
                        </input>
                        @error('days_in_month')
                            <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </label>
                </div>
                <div class="mb-4 block">
                    <input type="checkbox" class="checkbox" value="yes" name="partially_approve"
                        @checked(old('partially_approve'))>
                    <label for="">Allow Partial approval</label>
                    <x-form.error field='partially_approve' />
                </div>

                <label class="block mb-4 text-sm ">
                    <span class="text-gray-700 dark:text-gray-400">*Product Description</span>
                    <textarea
                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-textarea focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray"
                        rows="4" name="description" placeholder="Enter description content.">{{ old('description') }}</textarea>

                    @error('description')
                        <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </label>

                <div class="flex justify-end mt-6">
                    <button
                        class="px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
                        type="submit">{{ __('Submit Loan Product') }}</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('js/custom.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const addChargeBtn = document.getElementById('add-charge-btn');
            const chargesContainer = document.getElementById('charges-container');
            let chargeCount = 1;

            // Charges options HTML (for dynamic creation)
            const chargesOptions = `
                <option value="">Select Charges</option>
                @forelse($charges as $val)
                    <option value="{{ $val->id }}">{{ $val->name }}</option>
                @empty
                @endforelse
            `;

            function updateRemoveButtons() {
                const chargeItems = chargesContainer.querySelectorAll('.charge-item');
                chargeItems.forEach((item, index) => {
                    const removeBtn = item.querySelector('.remove-charge-btn');
                    if (chargeItems.length > 1) {
                        removeBtn.style.display = 'block';
                    } else {
                        removeBtn.style.display = 'none';
                    }
                });
            }

            function addChargeField() {
                chargeCount++;
                const chargeItem = document.createElement('div');
                chargeItem.className = 'charge-item mb-3 p-3 border rounded-lg dark:border-gray-600';
                chargeItem.innerHTML = `
                    <div class="flex gap-2 items-end">
                        <div class="flex-1">
                            <label class="block text-sm">
                                <span class="text-gray-700 dark:text-gray-400">Select Charge</span>
                                <select name="charges_id[]"
                                    class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-select focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray">
                                    ${chargesOptions}
                                </select>
                            </label>
                        </div>
                        <button type="button" class="remove-charge-btn px-3 py-2 text-xs font-medium leading-5 text-white transition-colors duration-150 bg-red-600 border border-transparent rounded-lg active:bg-red-600 hover:bg-red-700 focus:outline-none focus:shadow-outline-red">
                            Remove
                        </button>
                    </div>
                `;

                chargesContainer.appendChild(chargeItem);
                updateRemoveButtons();
            }

            function removeChargeField(event) {
                if (event.target.classList.contains('remove-charge-btn')) {
                    const chargeItem = event.target.closest('.charge-item');
                    chargeItem.remove();
                    updateRemoveButtons();
                }
            }

            // Event listeners
            addChargeBtn.addEventListener('click', addChargeField);
            chargesContainer.addEventListener('click', removeChargeField);

            // Initialize remove buttons visibility
            updateRemoveButtons();
        });
    </script>
@endpush