@extends('admin::layouts.plane')
@section('page_heading') {{ $title }} @endsection
@section('content')
    <div class="col-lg-12">
        <div class="panel panel-default filterable">
            <div class="panel-heading">
                <div class="panel-title font-weight-bold">{{ $title }}</div>
            </div>
            <div class="container-fluid">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-12">
                            &nbsp;
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            &nbsp;
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            {{ Form::open(['url' => route('save_scheme'), 'method' => 'post', 'name' => 'feedbackF']) }}
                            {{ csrf_field() }}
                            <div class="row">
                                <div class="col-lg-12">
                                    <div id="field-container">
                                        <div class="row field-group">
                                            <div class="col-lg-4">
                                                <div class="form-group row">
                                                    <label for="program" class="col-sm-3 col-form-label">Program</label>
                                                    <div class="col-sm-6">
                                                        {{ Form::select('program[]', $programData, '', ['placeholder' => '- Select -', 'id' => 'program', 'class' => 'form-control program', 'required' => 'required']) }}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group row">
                                                    <label for="start_date" class="col-sm-5 col-form-label">Start on</label>
                                                    <div class="col-sm-7">
                                                        {{ Form::select('start_on[]', $yearData, '', ['placeholder' => '- Select -', 'id' => 'start_on', 'class' => 'form-control start_on', 'required' => 'required']) }}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group row">
                                                    <label for="session" class="col-sm-5 col-form-label">Session</label>
                                                    <div class="col-sm-7">
                                                        {{ Form::text('session[]', '', ['class' => 'form-control', 'readonly' => 'readonly']) }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12">
                                    <button type="button" class="btn btn-primary" id="add-more-fields">Add
                                        More</button>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12">
                                    &nbsp;
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12 text-right">
                                    {{ Form::submit('Submit', ['class' => 'btn btn-info']) }}
                                </div>
                            </div>
                            {{ Form::close() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="clone d-none">
        <div class="row field-group">
            <div class="col-lg-4">
                <div class="form-group row">
                    <label for="program" class="col-sm-3 col-form-label">Program</label>
                    <div class="col-sm-6">
                        {{ Form::select('program[]', $programData, '', ['placeholder' => '- Select -', 'id' => 'program', 'class' => 'form-control program_clone', 'required' => 'required']) }}
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="form-group row">
                    <label for="start_date" class="col-sm-5 col-form-label">Start on</label>
                    <div class="col-sm-7">
                        {{ Form::select('start_on[]', $yearData, '', ['placeholder' => '- Select -', 'id' => 'start_on', 'class' => 'form-control start_on_clone', 'required' => 'required']) }}
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="form-group row">
                    <label for="session" class="col-sm-5 col-form-label">Session</label>
                    <div class="col-sm-7">
                        {{ Form::text('session[]', '', ['class' => 'form-control', 'readonly' => 'readonly']) }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style>
        .input-sm {
            font-size: 14px;
            height: 100%;
            width: 100%;
            color: #000;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#add-more-fields').click(function() {
                var fieldGroup = $('.clone .field-group').clone();
                fieldGroup.find('input, select').val('');
                fieldGroup.append(
                    '<div class="col-lg-4"><div class="form-group row"><div class="col-sm-7"><button type="button" class="btn btn-danger remove-field">Remove</button></div></div></div>'
                );
                $('#field-container').append(fieldGroup);
                fieldGroup.find(".start_on_clone").select2();
                fieldGroup.find(".program_clone").select2();
            });

            $('#field-container').on('click', '.remove-field', function() {
                $(this).closest('.field-group').remove();
            });
            $(".start_on").select2();
            $(".program").select2();



            function updateSessionField(program, startOn, sessionField) {
                $.ajax({
                    url: '{{ route('get_session') }}',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        program: program,
                        start_on: startOn
                    },
                    success: function(response) {
                        sessionField.val(response.session_period);
                    }
                });
            }
            $(document).on('change', '.start_on, .program', function() {
                var fieldGroup = $(this).closest('.field-group');
                var program = fieldGroup.find('.program').val();
                var startOn = fieldGroup.find('.start_on').val();
                var sessionField = fieldGroup.find('input[name="session[]"]');

                if (program && startOn) {
                    updateSessionField(program, startOn, sessionField);
                } else {
                    sessionField.val('');
                }
            });
            $(document).on('change', '.start_on_clone, .program_clone', function() {
                console.log("onchange calling");
                var fieldGroup = $(this).closest('.field-group');
                var program = fieldGroup.find('.program_clone').val();
                var startOn = fieldGroup.find('.start_on_clone').val();
                var sessionField = fieldGroup.find('input[name="session[]"]');

                if (program && startOn) {
                    updateSessionField(program, startOn, sessionField);
                } else {
                    sessionField.val('');
                }
            });


        });
    </script>
@stop