@extends('layouts.admin', ['title' => 'Add FarmerGroup BDS Linkage'])

@push('stylesheets')

    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link href="https://cdn.jsdelivr.net/npm/dual-listbox/dist/dual-listbox.css" rel="stylesheet"/>
    {{--    <link rel="stylesheet" href="{{ asset('/assets/libs/nouislider/nouislider.min.css') }} ">--}}

@endpush

@section('content')
    <div class="main-content">

        <div class="page-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="/dashboard">Home</a></li>
                                <li class="breadcrumb-item"><a href="{{url('/bds/participants')}}">Farmer Groups BDS</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Add Linkage</li>
                            </ol>
                        </nav>
                    </div>
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="col-md-8 col-12">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">Add Farmer Group Linkage</h5>
                                </div>
                                <div class="card-body">
                                    <form method="post" action="{{url("/bds/farmer-groups")}}">
                                        @csrf
                                        <div class="form-group mb-3">
                                            <label>Farmer Group</label>
                                            <select class="form-control" id="group_select" name="farmer_group_id" required>
                                                <option value=""></option>
                                                @foreach($groups as $item)
                                                    <option value="{{$item->id}}">{{$item->farmer_group}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group mb-3">
                                            <label>Do you have a completed constitution?</label>
                                            <div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input constitution_radio" type="radio" name="have_completed_constitution" value="0">
                                                    <label class="form-check-label">No</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input constitution_radio" type="radio" name="have_completed_constitution" value="1">
                                                    <label class="form-check-label">Yes</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group mb-3 constitution_date_div" id="constitution_date_div">
                                            <label>Date Completed Constitution</label>
                                            <input type="text" class="form-control _dt" name="date_constitution_completed"
                                                   placeholder="Date Completed Constitution">
                                        </div>
                                        <div class="form-group mb-3">
                                            <label>Paid Registration?</label>
                                            <div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input registration_radio" type="radio" name="registration_paid" value="0">
                                                    <label class="form-check-label">No</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input registration_radio" type="radio" name="registration_paid" value="1">
                                                    <label class="form-check-label">Yes</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group mb-3 registration_date_div" id="registration_date_div">
                                            <label>Date registration paid</label>
                                            <input type="text" class="form-control _dt" name="date_paid_registration"
                                                   placeholder="Date registration paid">
                                        </div>
                                        <div class="form-group mb-3">
                                            <label>Registered at District?</label>
                                            <div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input district_registration_radio" type="radio" name="registered_at_district" value="0">
                                                    <label class="form-check-label">No</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input district_registration_radio" type="radio" name="registered_at_district" value="1">
                                                    <label class="form-check-label">Yes</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group mb-3 district_registration_date_div" id="district_registration_date_div">
                                            <label>Date registered at District</label>
                                            <input type="text" class="form-control _dt" name="date_registered_at_district"
                                                   placeholder="Date registered at district">
                                        </div>
                                        <div class="form-group mb-3 district_registration_date_div">
                                            <label>Certificate Number</label>
                                            <input type="text" class="form-control" name="certificate_number"
                                                   value="{{old('certificate_number')}}" placeholder="Certificate Number">
                                        </div>
                                        <div class="form-group mb-3">
                                            <label>Have bank account?</label>
                                            <div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input bank_account_radio" type="radio" name="have_bank_account" value="0">
                                                    <label class="form-check-label">No</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input bank_account_radio" type="radio" name="have_bank_account" value="1">
                                                    <label class="form-check-label">Yes</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group mb-3 has_account">
                                            <label>Financial Institution</label>
                                            <select class="form-control" id="financial_institution_select" name="financial_institution_id">
                                                <option value=""></option>
                                                @foreach($financial_institutions as $item)
                                                    <option value="{{$item->id}}">{{$item->financial_institution}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group mb-3 has_account">
                                            <label>Date Account opened</label>
                                            <input type="text" class="form-control _dt" name="date_opened_bank_account"
                                                   value="{{old('date_opened_bank_account')}}" placeholder="Date Account opened">
                                        </div>

                                        <div class="form-group mb-3">
                                            <label>Accessed inputs?</label>
                                            <div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input input_radio" type="radio" name="accessed_inputs" value="0">
                                                    <label class="form-check-label">No</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input input_radio" type="radio" name="accessed_inputs" value="1">
                                                    <label class="form-check-label">Yes</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group mb-3 input_details_div" id="input_details_div">
                                            <label>Input Details</label>
                                            <textarea name="input_details" rows="3" id="input_details_input"
                                                      class="form-control" readonly></textarea>
                                        </div>
                                        <div class="form-group mb-3">
                                            <label>Received Financial Training</label>
                                            <div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input training_radio" type="radio" name="received_financial_training" value="0">
                                                    <label class="form-check-label">No</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input training_radio" type="radio" name="received_financial_training" value="1">
                                                    <label class="form-check-label">Yes</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group mb-3 training_details_div" id="training_details_div">
                                            <label>Financial Training Details</label>
                                            <textarea name="training_details" rows="3" id="training_details_input"
                                                      class="form-control" readonly></textarea>
                                        </div>

                                        <button class="btn btn-primary" type="submit">Submit</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div><!--end col-->
                </div><!--end row-->
            </div>
            <!-- container-fluid -->
        </div>


        {{--modals--}}
        <div class="modal modal-lg" tabindex="-1" id="input_modal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Input Details</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <table class="table table-striped table-bordered">
                            <thead>
                            <tr>
                                <th>Input</th>
                                <th>Cost</th>
                                <th>Date Accessed</th>
                                <th>Source of input</th>
                                <th>Delete</th>
                            </tr>
                            </thead>
                            <tbody id="input_table_body"></tbody>
                        </table>
                        <hr />
                        <form class="row" id="input_form">
                            <div class="form-group col-md-6 col-12 mb-3">
                                <label>Input</label>
                                <select name="input" id="input_input" class="form-control" required>
                                    <option value="">Select input</option>
                                    @foreach($input_types as $input_type)
                                        <option value="{{$input_type->input}}">{{$input_type->input}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-12 col-md-6 mb-3">
                                <label>Cost of Input</label>
                                <input type="number" min="0" id="input_cost" name="input_cost" class="form-control" required>
                            </div>
                            <div class="form-group col-12 col-md-6 mb-3">
                                <label>Date Accessed Input</label>
                                <input type="text" id="input_date" name="input_date" class="form-control _dt" required>
                            </div>
                            <div class="form-group col-12 col-md-6 mb-3">
                                <label>Source of Input</label>
                                <input type="text" id="input_source" name="input_source" class="form-control" required>
                            </div>
                            <div class="form-group col-6 col-md-3 mb-3">
                                <button class="btn btn-outline-primary" type="submit">Save Input</button>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Done</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal modal-lg" tabindex="-1" id="training_modal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Training Details</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <table class="table table-striped table-bordered">
                            <thead>
                            <tr>
                                <th>Service Provider</th>
                                <th>No. of females in training</th>
                                <th>No. of males in training</th>
                                <th>Delete</th>
                            </tr>
                            </thead>
                            <tbody id="training_table_body"></tbody>
                        </table>
                        <hr />
                        <form class="row" id="training_form">
                            <div class="form-group col-md-6 col-12 mb-3">
                                <label>Provider</label>
                                <select name="provider" class="form-control" required>
                                    <option value="">Select provider</option>
                                    @foreach($training_providers as $item)
                                        <option value="{{$item->name}}">{{$item->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-12 col-md-6 mb-3">
                                <label>Number of Females in training</label>
                                <input type="number" min="0" name="female_count" class="form-control" required>
                            </div>
                            <div class="form-group col-12 col-md-6 mb-3">
                                <label>Number of Males in training</label>
                                <input type="number" min="0" name="male_count" class="form-control" required>
                            </div>
                            <div class="form-group col-12 mb-3">
                                <button class="btn btn-outline-primary" type="submit">Save Training</button>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Done</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- End Page-content -->


        @endsection

        @push('scripts')
            <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
            <script src="https://cdn.jsdelivr.net/npm/dual-listbox/dist/dual-listbox.min.js"></script>
            <script>

                $(document).ready(function(){
                    $('#group_select').select2({placeholder: 'Select farmer group'});
                    $('#financial_institution_select').select2({placeholder: 'Select financial institution'});
                    $('#loan_financial_institution_select').select2({placeholder: 'Select financial institution'});
                    flatpickr("._dt", {});
                    // $('#input_input').select2({placeholder: 'Select input'});


                    $('.constitution_radio').change(function(){
                        toggleVisibility(this.value, 'constitution_date_div');
                    })
                    toggleVisibility($('.constitution_radio').val(),'constitution_date_div');

                    $('.registration_radio').change(function(){
                        toggleVisibility(this.value, 'registration_date_div');
                    })
                    toggleVisibility($('.registration_radio').val(),'registration_date_div');

                    $('.district_registration_radio').change(function(){
                        toggleVisibility(this.value, 'district_registration_date_div');
                    })
                    toggleVisibility($('.district_registration_radio').val(),'district_registration_date_div');

                    $('.bank_account_radio').change(function(){
                        toggleVisibility(this.value, 'has_account');
                    })
                    toggleVisibility($('.bank_account_radio').val(),'has_account');

                    $('.input_radio').change(function (){
                        toggleVisibility(this.value, 'input_details_div')
                    });
                    toggleVisibility($('.input_radio').val(),'input_details_div');

                    $('.training_radio').change(function (){
                        toggleVisibility(this.value, 'training_details_div')
                    });
                    toggleVisibility($('.training_radio').val(),'training_details_div');

                    function toggleVisibility(state, className) {
                        if (state == '0') {
                            $(`.${className}`).each(function(){
                                $(this).hide();
                            })
                        } else {
                            $(`.${className}`).each(function(){
                                $(this).show();
                            })
                        }
                    }

                });
                const input_form = document.getElementById('input_form');
                const input_details_input = document.getElementById('input_details_input');
                let input_data = [];

                input_details_input.addEventListener('click', function() {
                    const input_modal = new bootstrap.Modal('#input_modal', {
                        keyboard: false,
                        backdrop: true
                    });
                    input_modal.show();
                });
                input_form.addEventListener('submit', function(event){
                    event.preventDefault();

                    input_data.push(getAllFormInputValues(this));
                    populateTable(input_data, 'input_table_body');
                    document.getElementById('input_details_input').textContent = JSON.stringify(input_data);
                    input_form.reset();
                })

                function populateTable(data, tableBodyId){
                    const tableBody = document.getElementById(tableBodyId);
                    if (!tableBody) {
                        throw new Error(`Table Body with ID "${tableBodyId}" not found.`);
                    }

                    tableBody.innerHTML = '';
                    for (let i=0; i<data.length; i++) {
                        const dataRow = document.createElement('tr');
                        for (const value of Object.values(data[i])) {
                            const dataCell = document.createElement('td');
                            dataCell.textContent = value;
                            dataRow.appendChild(dataCell);
                        }
                        let deleteCell = document.createElement('td');
                        deleteCell.innerHTML = `<button class="btn btn-sm btn-soft-danger" onclick="deleteInput(${i})"><i class="ri-delete-bin-2-fill"></i></button>`;
                        dataRow.appendChild(deleteCell);

                        tableBody.appendChild(dataRow);
                    }
                }

                function deleteInput(position) {
                    input_data.splice(position,1);
                    populateTable(input_data, 'input_table_body');
                    document.getElementById('input_details_input').textContent = JSON.stringify(input_data);
                }

                // handle training details
                const training_form = document.getElementById('training_form');
                const training_details_input = document.getElementById('training_details_input');
                let training_data = [];

                training_details_input.addEventListener('click', function() {
                    const training_modal = new bootstrap.Modal('#training_modal', {
                        keyboard: false,
                        backdrop: true
                    });
                    training_modal.show();
                });

                training_form.addEventListener('submit', function(event){
                    event.preventDefault();

                    training_data.push(getAllFormInputValues(this));
                    populateTable(training_data, 'training_table_body');
                    document.getElementById('training_details_input').textContent = JSON.stringify(training_data);
                    training_form.reset();
                })

                function deleteTraining(position) {
                    training_data.splice(position,1);
                    populateTable(training_data, 'training_table_body');
                    document.getElementById('training_details_input').textContent = JSON.stringify(training_data);
                }

            </script>
    @endpush