@extends('layouts.app')
@section('title')
   Add Project Setting
@endsection
@section('content')
    <div class="row card">


        <div class="mt-3 card-body card-white mb-4">
            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                <h6 class="m-0 font-weight-normal text-head-color"><b>Add Project Setting</b></h6>
                <span > <a href="{{ route('config.setting.index')}}">Back </a></span>
            </div>
            <br>
            <div id='loader'></div>
            <form id="CreateSettingForm" action="{{ url('config-setting/create/') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="row">

                    <div class=" form-group col-md-4">
                        <label> Name <span class="astric-sign">*</span></label>
                        <input type="text" name="Name" class="form-control search">
                        <div class="text-danger d-none"></div>
                        @error('Name')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="row">
                        <h6> <b>DataBase Configuration : </b></h6>
                        <div class=" form-group col-md-4">
                            <label> Host Name <span class="astric-sign">*</span></label>
                            <input type="text" name="HostName" id="HostName" class="form-control search" value="4.240.14.129,50502">
                            <div class="text-danger d-none"></div>
                            @error('HostName')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class=" form-group col-md-4">
                            <label> Port Name <span class="astric-sign">*</span></label>
                            <input type="text" name="PortName" id="PortName" class="form-control search" value="50502">
                            <div class="text-danger d-none"></div>
                            @error('PortName')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class=" form-group col-md-4">
                            <label> User Name <span class="astric-sign">*</span></label>
                            <input type="text" name="UserName" id="UserName" class="form-control search" value="skumar8">
                            <div class="text-danger d-none"></div>
                            @error('UserName')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class=" form-group col-md-4">
                            <label> Password <span class="astric-sign">*</span></label>
                            <input type="text" name="DatabasePassword" id="DatabasePassword" class="form-control search" value="Sujeet@123">
                            <div class="text-danger d-none"></div>
                            @error('DatabasePassword')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="form-group col-md-4">
                            <label> DB Name <span class="astric-sign">*</span></label>
                            {{-- <input type="text" name="DatabaseName" class="form-control search"> --}}
                                  <select name="DatabaseName" id="DatabaseName" class="selectpicker form-control" data-live-search="true">
                                    <option data-tokens="">--Select--</option>
                                    @foreach ($databasesList as $list)
                                        <option value="{{ $list->name }}" data-tokens="{{ $list->name }}">{{ $list->name }}</option>
                                        
                                    @endforeach
                                  </select>
                            <div class="text-danger d-none"></div>
                            @error('DatabaseName')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <h6> <b>Basic Configuration : </b></h6>

                            <div class=" form-group col-md-3">
                                <label> First Shift Reporting Time <span class="astric-sign">*</span></label>
                                <input type="text" name="FirstShiftReportingTime" class="form-control search">
                                <div class="text-danger d-none"></div>
                                @error('FirstShiftReportingTime')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class=" form-group col-md-3">
                                <label> First Shift Closing Time <span class="astric-sign">*</span></label>
                                <input type="text" name="FirstShiftClosingTime" class="form-control search">
                                <div class="text-danger d-none"></div>
                                @error('FirstShiftClosingTime')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class=" form-group col-md-3">
                                <label> First Shift Exam Start Time <span class="astric-sign">*</span></label>
                                <input type="text" name="FirstShiftExamStartTime" class="form-control search">
                                <div class="text-danger d-none"></div>
                                @error('FirstShiftExamStartTime')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class=" form-group col-md-3">
                                <label> First Shift Exam End Time <span class="astric-sign">*</span></label>
                                <input type="text" name="FirstShiftExamEndTime" class="form-control search">
                                <div class="text-danger d-none"></div>
                                @error('FirstShiftExamEndTime')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class=" form-group col-md-3">
                                <label> Second Shift Reporting Time <span class="astric-sign">*</span></label>
                                <input type="text" name="SecondShiftReportingTime" class="form-control search">
                                <div class="text-danger d-none"></div>
                                @error('SecondShiftReportingTime')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class=" form-group col-md-3">
                                <label> Second Shift Closing Time <span class="astric-sign">*</span></label>
                                <input type="text" name="SecondShiftClosingTime" class="form-control search">
                                <div class="text-danger d-none"></div>
                                @error('SecondShiftClosingTime')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class=" form-group col-md-3">
                                <label> Second Shift Exam Start Time <span class="astric-sign">*</span></label>
                                <input type="text" name="SecondShiftExamStartTime" class="form-control search">
                                <div class="text-danger d-none"></div>
                                @error('SecondShiftExamStartTime')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class=" form-group col-md-3">
                                <label> Second Shift Exam End Time <span class="astric-sign">*</span></label>
                                <input type="text" name="SecondShiftExamEndTime" class="form-control search">
                                <div class="text-danger d-none"></div>
                                @error('SecondShiftExamEndTime')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class=" form-group col-md-12">
                                <label> Primary Table <span class="astric-sign">*</span></label>
                                <input type="text" name="TableName" class="form-control search">
                                <div class="text-danger d-none"></div>
                                @error('TableName')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class=" form-group col-md-12">
                                <label> Procurement Data Column <span class="astric-sign">*</span></label>
                                <textarea rows="7" name="TableColumnName" class="form-control search"></textarea>
                                <div class="text-danger d-none"></div>
                                @error('TableColumnName')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>                          
                        </div>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <h6> <b>TCS Configuration Section: </b></h6>

                    <div class="d-flex" id="table_column_div_1">
                        <div class="form-group col-md-3">
                            <label>Table Name<span class="astric-sign">*</span></label>
                            <select name="leftTableName" id="leftTableName" class="selectpicker form-control" data-live-search="true">
                                
                            </select>
                            <div class="text-danger d-none"></div>
                            @error('leftTableName')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="form-group col-md-2">
                            <label>Column Name<span class="astric-sign">*</span></label>
                            <input type="text" name="leftTableColumnName[]" class="form-control search">
                            <div class="text-danger d-none"></div>
                            @error('leftTableColumnName')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="form-group col-md-2">
                            <label>Join<span class="astric-sign">*</span></label>
                            <select class="form-control" name="joinType[]">
                                <option value="join">join</option>
                                <option value="leftjoin">leftjoin</option>
                                <option value="rightjoin">rightjoin</option>
                                <option value="innerjoin">innerjoin</option>
                                <option value="outerjoin">outerjoin</option>
                            </select>
                            @error('joinType')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="form-group col-md-2">
                            <label>Table Name<span class="astric-sign">*</span></label>
                            <select name="rightTableName[]" id="rightTableName" class="selectpicker form-control" data-live-search="true">
                                {{-- <option value="">-- Choose --</option> --}}
                            </select>
                            <div class="text-danger d-none"></div>
                            @error('rightTableName')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="form-group col-md-2">
                            <label>Column Name<span class="astric-sign">*</span></label>
                            <input type="text" name="rightTableColumnName[]" class="form-control search">
                            <div class="text-danger d-none"></div>
                            @error('rightTableColumnName')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div id="table_column_div_append" class="row ml-1">

                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-sm btn-success ml-3" onclick="add_more()">Add More <i class="fa fa-plus-circle" aria-hidden="true"></i></button>
                    </div>
                </div>
                <div class="row">
                    <div class=" form-group col-md-12 mt-2">
                        <label>TCS Data Select Columns Query<span class="astric-sign">*</span></label>
                        <textarea rows="10" name="TCSTableColumnName" class="form-control search"></textarea>
                        <div class="text-danger d-none"></div>
                        @error('TCSTableColumnName')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-md-4 serch-button">
                        <button type="submit" id="CreateSettingFormSubmit" class="btn btn-success">
                            Save</button>
                    </div>
                </div>
            </form>


        </div>
    </div>
@endsection
<style>
    .form-group.col-md-4.serch-button {
        margin-top: 28px;
    }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
{{-- <script>
   
    $(document).ready(function () {
        
            $("#CreateSettingFormSubmit").click(function (e) 
            {     
                e.preventDefault();
                var form = $("#CreateSettingForm");
                form.validate({
                    rules: {
                        Name: {
                            required: true
                        },
                        DatabaseName: {
                            required: true
                        },
                        HostName: {
                            required: true
                        },
                        PortName: {
                            required: true
                        },
                        UserName: {
                            required: true
                        },
                        DatabasePassword: {
                            required: true
                        },
                        FirstShiftReportingTime: {
                            required: true
                        },
                        FirstShiftClosingTime: {
                            required: true
                        },
                        FirstShiftExamStartTime: {
                            required: true
                        },
                        FirstShiftExamEndTime: {
                            required: true
                        },
                        SecondShiftReportingTime: {
                            required: true
                        },
                        SecondShiftClosingTime: {
                            required: true
                        },
                        SecondShiftExamStartTime: {
                            required: true
                        },
                        SecondShiftExamEndTime: {
                            required: true
                        },
                        TableName: {
                            required: true
                        },
                        TableColumnName: {
                            required: true
                        }
                    
                    },
                    messages: {
                        Name: {
                            required: "Name cannot be blank."
                        },
                        DatabaseName: {
                            required: "Database Name cannot be blank."
                        },
                        HostName: {
                            required: "Host Name cannot be blank."
                        },PortName: {
                            required: "Port Name cannot be blank."
                        },UserName: {
                            required: "Database UserName cannot be blank."
                        },DatabasePassword: {
                            required: "Database Password cannot be blank."
                        },FirstShiftReportingTime: {
                            required: "First Shift ReportingTime cannot be blank."
                        },FirstShiftClosingTime: {
                            required: "First Shift ClosingTime cannot be blank."
                        },FirstShiftExamStartTime: {
                            required: "First Shift ExamStartTime cannot be blank."
                        },FirstShiftExamEndTime: {
                            required: "First Shift ExamEndTime cannot be blank."
                        },SecondShiftReportingTime: {
                            required: "Second Shift ReportingTime cannot be blank."
                        },SecondShiftClosingTime: {
                            required: "Second Shift ClosingTime cannot be blank."
                        },SecondShiftExamStartTime: {
                            required: "Second Shift ExamStartTime cannot be blank."
                        },SecondShiftExamEndTime: {
                            required: "Second Shift ExamEndTime cannot be blank."
                        },TableName: {
                            required: "Primary table cannot be blank."
                        },TableColumnName: {
                            required: "Primary table selected column cannot be blank."
                        }
                    
                    },
                    errorElement: 'span',
                    errorPlacement: function (error, element) {
                        error.addClass('invalid-feedback');
                        element.closest('.form-group').append(error);
                    },
                    highlight: function (element, errorClass, validClass) {
                    $(element).addClass('is-invalid');            
                    },
                    unhighlight: function (element, errorClass, validClass) {
                    $(element).removeClass('is-invalid');
                    }

                });
                if (form.valid() === true) {
                    $("#CreateSettingForm").submit();
                }  
            });
     
    });

</script> --}}
  

@section('scripts')
    <script>
        var loop_count = 1;
        function add_more() {
            console.log(loop_count)
            // let table_column_div_html = $('#table_column_div_1').html();
            let table_column_div_html = 
            
            `<div class="form-group col-md-3">
                <label>Table Name<span class="astric-sign">*</span></label>
                <select name="leftTableName[]" id="leftTableName${loop_count}" class="selectpicker form-control" data-live-search="true">
                    
                </select>
                <div class="text-danger d-none"></div>
                @error('leftTableName')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>
            <div class="form-group col-md-2">
                <label>Column Name<span class="astric-sign">*</span></label>
                <input type="text" name="leftTableColumnName[]" class="form-control search">
                <div class="text-danger d-none"></div>
                @error('leftTableColumnName')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>
            <div class="form-group col-md-2">
                <label>Join<span class="astric-sign">*</span></label>
                <select class="form-control" name="joinType[]">
                    <option value="join">join</option>
                    <option value="leftjoin">leftjoin</option>
                    <option value="rightjoin">rightjoin</option>
                    <option value="innerjoin">innerjoin</option>
                    <option value="outerjoin">outerjoin</option>
                </select>
                @error('joinType')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>
            <div class="form-group col-md-2">
                <label>Table Name<span class="astric-sign">*</span></label>
                <select name="rightTableName[]" id="rightTableName${loop_count}" class="selectpicker form-control" data-live-search="true">
                    {{-- <option value="">-- Choose --</option> --}}
                </select>
                <div class="text-danger d-none"></div>
                @error('rightTableName')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>
            <div class="form-group col-md-2">
                <label>Column Name<span class="astric-sign">*</span></label>
                <input type="text" name="rightTableColumnName[]" class="form-control search">
                <div class="text-danger d-none"></div>
                @error('rightTableColumnName')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>`;

            
            var html= '<div class="row" id="table_column_div_id_'+ loop_count +'">'+table_column_div_html

            html += '<div class="col-md-1" style="margin-top: 31px;"><button type="button" id="add_more_box"\
                        class="btn btn-danger btn-sm" onclick=remove_box("'+loop_count+'")>\
                        Remove</button>\
                    </div></div>';

            $('#table_column_div_append').append(html);
            // console.log(table_column_div_html);

            let host_name = $('#HostName').val();
                let port_name = $('#PortName').val();
                let user_name = $('#UserName').val();
                let db_pass = $('#DatabasePassword').val();
                let db_name = $('#DatabaseName').val();

                // $('#leftTableName'+loop_count).html(
                //     "<option selected value='0'>{{ __('Loading..') }}</option>");

                jQuery.ajax({
                    type: 'GET',
                    url: "{{ route('config.getDatabse.tables') }}",
                    data: {
                        host_name: host_name,
                        port_name: port_name,
                        user_name: user_name,
                        db_name: db_name,
                        db_pass: db_pass,
                        loop_count: loop_count
                    },

                    success: function(response) {
                        console.log(response)
                        if (response.status == 'success') {
                            $('#leftTableName'+loop_count).html('');
                            var loop_count_resp = response.loop_count;;
                            $.each(response.data, function(key, value) {
                                var table_name = value.TABLE_NAME;
                                
                                console.log(loop_count_resp)
                                $('#leftTableName'+loop_count_resp).append('<option value="' +
                                    table_name + '">' + table_name + '</option>'
                                );

                            });
                            $('#leftTableName'+loop_count_resp).prepend($(
                                '<option value="">-- Choose --</option>'));
                            $("#leftTableName"+loop_count_resp+ "option[value='']").attr('selected',
                                true);
                            $('#leftTableName'+loop_count_resp).selectpicker('refresh');


                            //right table
                            // $('#rightTableName').empty();
                            // $.each(response.data, function(key, value) {
                            //     var table_name = value.TABLE_NAME;
                            //     // console.log(table_name)
                            //     $('#rightTableName').append('<option value="' +
                            //         table_name + '">' + table_name + '</option>'
                            //     );

                            // });
                            // $('#rightTableName').prepend($(
                            //     '<option value="">-- Choose --</option>'));
                            // $("#rightTableName option[value='']").attr('selected',
                            //     true);
                            // $('#rightTableName').selectpicker('refresh');
                        }
                    }
                });

                loop_count++;
        }

        function remove_box(loop_count) {
            $('#table_column_div_id_' + loop_count).remove();
        }
    </script>

    <script>
        $(document).ready(function() {
            $('form').submit(function() {
                var isValid = true;

                $('input[type="text"],textarea').each(function() {
                    if ($.trim($(this).val()) == '') {
                        var next = $(this).siblings('div');
                        var input_name = $(this).prev().text();
                        var input_name = input_name.slice(0, -1);
                        next.addClass('error');
                        next.removeClass('d-none')
                        next.text(`${input_name} is required`)
                        isValid = false;
                    }
                });

                if (!isValid) {
                    return false;
                }
            });

            // Attach event handler to input blur event for real-time validation
            $(document).on('input', 'input[type="text"],textarea', function() {
                var next = $(this).siblings('div');
                var input_name = $(this).prev().text();
                var input_name = input_name.slice(0, -1);
                if ($.trim($(this).val()) == '') {
                    next.addClass('error');
                    next.removeClass('d-none');
                    next.text(`${input_name} is required`)
                } else {
                    next.removeClass('error');
                    next.addClass('d-none'); 
                }
            });

            $('#DatabaseName').on('change',function(){
                let host_name = $('#HostName').val();
                let port_name = $('#PortName').val();
                let user_name = $('#UserName').val();
                let db_pass = $('#DatabasePassword').val();
                let db_name = $(this).val();

                $('#leftTableName').html(
                    "<option selected value='0'>{{ __('Loading..') }}</option>");

                jQuery.ajax({
                    type: 'GET',
                    url: "{{ route('config.getDatabse.tables') }}",
                    data: {
                        host_name: host_name,
                        port_name: port_name,
                        user_name: user_name,
                        db_name: db_name,
                        db_pass: db_pass
                    },

                    success: function(response) {
                        console.log(response)
                        if (response.status == 'success') {
                            $('#leftTableName').empty();
                            $.each(response.data, function(key, value) {
                                var table_name = value.TABLE_NAME;
                                console.log(table_name)
                                $('#leftTableName').append('<option value="' +
                                    table_name + '">' + table_name + '</option>'
                                );

                            });
                            $('#leftTableName').prepend($(
                                '<option value="">-- Choose --</option>'));
                            $("#leftTableName option[value='']").attr('selected',
                                true);
                            $('#leftTableName').selectpicker('refresh');


                            //right table
                            $('#rightTableName').empty();
                            $.each(response.data, function(key, value) {
                                var table_name = value.TABLE_NAME;
                                console.log(table_name)
                                $('#rightTableName').append('<option value="' +
                                    table_name + '">' + table_name + '</option>'
                                );

                            });
                            $('#rightTableName').prepend($(
                                '<option value="">-- Choose --</option>'));
                            $("#rightTableName option[value='']").attr('selected',
                                true);
                            $('#rightTableName').selectpicker('refresh');
                        }
                    }
                });
            });
        });

    </script>
   
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>
    <script>
        $(document).ready(function(){
          $('.selectpicker').selectpicker();
        });
      </script>
@endsection