@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">
            1. CLIENT INFORMATION
        </h4>  
        <div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
            <form action="{{ route('loans.store.step-1') }}" method="post" enctype="multipart/form-data">
                @csrf
                <label for="loan_type" class="block mb-4 text-sm">
                    <span class="text-gray-700 dark:text-gray-400">*Select Loan Type</span>
                    <select id="loan_type" name="loan_type"
                        class="select2 block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-select @error('loan_type') 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 type</option>
                        @foreach ($loanTypes as $index => $value)
                            <option value="{{ $index }}" @selected(old('loan_type',optional($loan)['loan_type']) == $index)>{{ $value }}</option>
                        @endforeach
                    </select>
                    <x-form.error field='loan_type' />
                </label>

                <label for="loan_group_category" class="block mb-4 text-sm "
                    style="display: @if (old('loan_type',optional($loan)['loan_type']) == \App\Constants\LoanConstants::GROUP_LOAN) block @else none" @endif>
                    <span class="text-gray-700
                    dark:text-gray-400">*Select Group Loan Category</span>
                    <select id="loan_group_category" name="loan_group_category"
                        class="select2 block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-select @error('loan_group_category') 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 Group Loan Category</option>
                        @foreach ($groupLoanCategories as $index => $value)
                            <option value="{{ $index }}" @selected(old('loan_group_category',optional($loan)['loan_group_category']) == $index)>{{ $value }}</option>
                        @endforeach
                    </select>
                    <x-form.error field='loan_group_category' />
                </label>

                <label for="group_id" class="block mb-4 text-sm"
                    style="display: @if (old('loan_type',optional($loan)['loan_type']) == \App\Constants\LoanConstants::GROUP_LOAN) block @else none" @endif>
                    <span class="text-gray-700
                    dark:text-gray-400">*Select Group</span>
                    <select id="group_id" name="group_id"
                        class="select2 block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-select @error('group_id') 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 Group</option>
                        @foreach ($groups as $group)
                            <option value="{{ $group->id }}" @selected(old('group_id',optional($loan)['group_id']) == $group->id)>{{ $group->name }}
                            </option>
                        @endforeach
                    </select>
                    <x-form.error field='group_id' />
                </label>

                <label for="client_id" class="block mb-4 text-sm "
                    style="display: @if (old('loan_type',optional($loan)['loan_type']) == \App\Constants\LoanConstants::INDIVIDUAL_LOAN) block @else none" @endif>
                    <span class="text-gray-700
                    dark:text-gray-400">*Select Client(s)</span>
                    <select id="client_id" name="client_id"
                        class="select2 block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-select @error('client_id') 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 Client</option>
                        @foreach ($clients as $client)
                            <option value="{{ $client->id }}" @selected(old('client_id',optional($loan)['client_id']) == $client->id)>{{ $client->fullname }}
                            </option>
                        @endforeach
                    </select>
                    <x-form.error field='client_id' />
                </label>

                <label for="group_clients" class="block mb-4 text-sm"
                    style="display: @if (old('loan_type',optional($loan)['loan_type']) == \App\Constants\LoanConstants::GROUP_LOAN) block @else none" @endif>
                    <span class="text-gray-700
                    dark:text-gray-400">*Select Group Client(s)</span>
                    <select id="group_clients" name="group_clients[]" multiple
                        @if (old('loan_group_category') == \App\Constants\LoanConstants::ALL_LOAN) disabled @endif
                        class="select2 block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-select @error('group_clients') 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 Group Clients</option>
                    </select>
                    <x-form.error field='group_clients' />
                </label>

                <label class="block mb-4 text-sm">
                    <span class="text-gray-700 dark:text-gray-400">*Select Loan Officer</span>
                    <select name="officer"
                        class="select2 block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-select @error('gender') 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 disabled selected>Select officer</option>
                        @foreach ($loanofficer as $officer)
                            <option value="{{ $officer->id }}" @selected($officer->id == old('officer',optional($loan)['officer']))>
                                {{ $officer->fullname }}</option>
                        @endforeach
                    </select>
                    @error('officer')
                        <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </label>


                <label class="block mb-4 text-sm" for="loan_product_id">
                    <span class="text-gray-700 dark:text-gray-400">*Select Loan Product</span>
                    <select name="loan_product_id"
                        class="select2 block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-select @error('loan_product_id') 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 disabled selected>Select Loan Product</option>
                        @foreach ($loanProducts as $product)
                            <option value="{{ $product->id }}" @selected($product->id == old('loan_product_id',optional($loan)['loan_product_id']))>
                                {{ $product->product_name }} : {{ $product->description }}</option>
                        @endforeach
                    </select>
                    <x-form.error field='loan_product_id' />
                </label>

                <label class="block mb-4 text-sm" for="funds_id">
                    <span class="text-gray-700 dark:text-gray-400">*Select Funds Account</span>
                    <select name="funds_id"
                        class="select2 block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-select @error('funds_id') 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 disabled selected>Select Funds</option>
                        @foreach ($funds as $type)
                            <option value="{{ $type->id }}"
                                 @selected($type->id == old('funds_id',optional($loan)['funds_id']))>
                                {{ $type->name }} : {{ $type->description }}</option>
                        @endforeach
                    </select>
                    <x-form.error field='funds_id' />
                </label>

                <div class="flex mt-4 justify-between">
                    <x-button type="sumbit" label="Next" />
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            // Access constants directly from PHP
            const FLAT_INTEREST = @json(\App\Constants\LoanConstants::FLAT_INTEREST);
            const DECLINING_BALANCE = @json(\App\Constants\LoanConstants::DECLINING_BALANCE);
            const INDIVIDUAL_LOAN = @json(\App\Constants\LoanConstants::INDIVIDUAL_LOAN);
            const GROUP_LOAN = @json(\App\Constants\LoanConstants::GROUP_LOAN);

            const GROUP_PERSONAL_LOAN = @json(\App\Constants\LoanConstants::PERSONAL_LOAN);
            const GROUP_ALL_LOAN = @json(\App\Constants\LoanConstants::ALL_LOAN);




            $('.select2').select2();

            $('#loan_type').change(function() {
                $('.select2').select2({
                    'width': '100%',
                });
                if ($(this).val() == INDIVIDUAL_LOAN) {

                    $("#client_id").parent().show()
                    $("#group_id").parent().hide()
                    $("#loan_group_category").parent().hide()
                    $("#group_clients").parent().hide()

                } else if ($(this).val() == GROUP_LOAN) {

                    $("#client_id").parent().hide()
                    $("#group_id").parent().show()
                    $("#loan_group_category").parent().show()
                    $("#group_clients").parent().show()

                } else {
                    $("#client_id").parent().hide()
                    $("#loan_group_category").parent().hide()
                    $("#group_clients").parent().hide()
                    $("#group_id").parent().hide()

                }

            })
            $('#loan_group_category').change(function() {

                if ($(this).val() == GROUP_PERSONAL_LOAN) {
                    $("#group_clients").removeAttr('disabled', 'disabled').trigger('change')

                } else if ($(this).val() == GROUP_ALL_LOAN) {
                    $("#group_clients").attr('disabled', 'disabled').trigger('change')

                }

            })
            $('#group_id').change(function() {

                //clear the group clients list
                $("#group_clients").empty();
                const groupId = $(this).val()
                const url = `/api/groups/${groupId}/clients`;
                fetch(url, {
                        method: 'GET',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector(
                                    'meta[name="csrf-token"]')
                                .getAttribute('content')
                        }
                    })
                    .then(response => {
                        if (!response.ok) {
                            $("#group_clients").append(
                                new Option("No clients found", "", true,
                                    true)
                            ).trigger('change');
                        }
                        response.json().then(groupClients => {
                            
                            if (groupClients.length == 0) {
                                $("#group_clients").append(
                                    new Option("No clients registered to this group", "",
                                        true,
                                        true)
                                ).trigger('change');
                            } else {
                                 
                                groupClients.forEach((groupClient) => {
                                    $("#group_clients").append(
                                        new Option(groupClient.client.fullname, groupClient.client.id,
                                            false,
                                            false)
                                    ).trigger('change');
                                })
                            }

                        })
                    })
                    .catch(error => {
                        $("#group_clients").append(
                            new Option("Could not fetch clients", "", true,
                                true)
                        ).trigger('change');

                    });

            })

            const oldGroupClients = (@json(old('group_clients',optional($loan)['group_clients'])))
            const oldGroupId = @json(old('group_id'))

            if (oldGroupId) {

                $("#group_clients").empty();
                const url = `/api/groups/${oldGroupId}/clients`;
                fetch(url, {
                        method: 'GET',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector(
                                    'meta[name="csrf-token"]')
                                .getAttribute('content')
                        }
                    })
                    .then(response => {
                        if (!response.ok) {
                            $("#group_clients").append(
                                new Option("No clients found", "", true,
                                    true)
                            ).trigger('change');
                        }
                        response.json().then(data => {
                            const {
                                clients
                            } = data[0]
                            if (clients.length == 0) {
                                $("#group_clients").append(
                                    new Option("No clients registered to this group", "",
                                        true,
                                        true)
                                ).trigger('change');
                            } else {
                                 
                                clients.forEach((client) => {
                                    const selected = oldGroupClients ? oldGroupClients.includes(
                                        `${client.id}`) : false
                                    $("#group_clients").append(
                                        new Option(client.fullname, client.id,
                                            selected,
                                            selected)
                                    ).trigger('change');
                                })
                            }

                        })
                    })
                    .catch(error => {
                        $("#group_clients").append(
                            new Option("Could not fetch clients", "", true,
                                true)
                        ).trigger('change');

                    });
            }
        });
    </script>
@endpush('scripts')