@extends('layouts.admin', ['title' => 'Add Participant 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')}}">Participants 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 Participant Linkage</h5>
                                </div>
                                <div class="card-body">
                                    <form method="post" action="{{url("/bds/participants")}}">
                                        {{--<form method="post" action="{{url("api/test")}}">--}}
                                        @csrf
                                        <div class="form-group mb-3">
                                            <label>Farmer Group</label>
                                            <select class="form-control" id="group_select">
                                                <option value=""></option>
                                                @foreach($groups as $item)
                                                    <option value="{{$item->id}}">{{$item->farmer_group}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group mb-3" id="participants_div" style="display: none;">
                                            <label>Participant</label>
                                            <select class="form-control" name="participant_id" id="participant_select" required>
                                            </select>
                                        </div>
                                        <div class="form-group mb-3">
                                            <label>Do you have a 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" id="bank_account_date_div">
                                            <label>Date Opened Bank Account</label>
                                            <input type="text" class="form-control _dt" name="date_opened_bank_account"
                                                   placeholder="Date bank account opened">
                                        </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>Account Number</label>
                                            <input type="number" class="form-control" name="account_number"
                                                   value="{{old('account_number')}}" placeholder="Account Number">
                                        </div>
                                        <div class="form-group mb-3 has_account">
                                            <label>Account Name</label>
                                            <input type="text" class="form-control" name="account_name"
                                                   value="{{old('account_name')}}" placeholder="Account Name">
                                        </div>
                                        <div class="form-group mb-3 has_account">
                                            <label>Amount Saved</label>
                                            <input type="number" min="0" class="form-control" name="amount_saved"
                                                   value="{{old('amount_saved')}}" placeholder="Amount Saved">
                                        </div>

                                        <div class="form-group mb-3">
                                            <label>Received a loan?</label>
                                            <div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input loan_radio" type="radio"
                                                           name="got_a_loan" value="0">
                                                    <label class="form-check-label">No</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input loan_radio" type="radio"
                                                           name="got_a_loan" value="1">
                                                    <label class="form-check-label">Yes</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group mb-3 has_loan">
                                            <label>Loan Financial Institution</label>
                                            <select class="form-control has_loan" id="loan_financial_institution_select"
                                                    name="loan_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_loan">
                                            <label>Loan Amount</label>
                                            <input type="number" min="0" class="form-control" name="loan_amount"
                                                   value="{{old('loan_amount')}}" placeholder="Loan Amount">
                                        </div>
                                        <div class="form-group mb-3 has_loan">
                                            <label>Purpose of loan</label>
                                            <input type="text" class="form-control" name="loan_purpose"
                                                   value="{{old('loan_purpose')}}" placeholder="Purpose of loan">
                                        </div>

                                        <button class="btn btn-primary" type="submit">Submit</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div><!--end col-->
                </div><!--end row-->
            </div>
            <!-- container-fluid -->
        </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", {});

                    $('#group_select')
                        .select2({placeholder: 'Select group'})
                        .change(function () {
                            var id = $(this).val();
                            const container = $('#participants_div');

                            $.ajax({
                                url: '/farmerGroupParticipants/' + id,
                                type: 'get',
                                dataType: 'json',
                                success: function (response) {
                                    container.show();
                                    let ptc = $('#participant_select');
                                    ptc.empty();

                                    if (response.data.length > 0) {
                                        first_option_line = '<option value="">Select participant</option>'
                                        ptc.append(first_option_line);
                                        for (var i = 0; i < response.data.length; i++) {
                                            var id = response.data[i].id;
                                            var name = response.data[i].first_name + " " + response.data[i].last_name;

                                            var option = "<option value='" + id + "'>" + name + "</option>";

                                            ptc.append(option);
                                        }
                                        ptc.select2({placeholder: 'Select Participant'});
                                    }
                                }
                            })
                        });

                    console.log('bank account status :: ',);
                    $('.bank_account_radio').change(function () {
                        bank_account_change(this.value);
                    })
                    bank_account_change($('.bank_account_radio').val());

                    function bank_account_change(new_val) {
                        if (new_val == "0") {
                            // no bank account
                            $('.has_account').each(function () {
                                $(this).hide();
                            })
                        } else {
                            // has account
                            $('.has_account').each(function () {
                                $(this).show();
                            })
                        }
                    }

                    $('.loan_radio').change(function () {
                        loan_change(this.value);
                    })
                    loan_change($('.loan_radio').val());

                    function loan_change(new_val) {
                        if (new_val == "0") {
                            // no bank account
                            $('.has_loan').each(function () {
                                $(this).hide();
                            })
                        } else {
                            // has account
                            $('.has_loan').each(function () {
                                $(this).show();
                            })
                        }
                    }

                });
            </script>
    @endpush