@extends('layouts.app')
@section('title')
    Procurement Data Lists
@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>Edit Exam</b></h6>
                <span > <a href="{{ route('config.setting.index')}}">Back </a></span>
            </div>
            <br>
            <div id='loader'></div>
            <form id="EditSettingForm" action="{{ url('config-setting/update/') }}/{{ $MISConfiguration->ID}}" method="POST" enctype="multipart/form-data">
            <form action="{{ url('config-setting/update/') }}/{{ $MISConfiguration->ID }}" method="POST"
                enctype="multipart/form-data">
                @csrf
                <div class="row">

                    <div class=" form-group col-md-4">
                        <label> Exam Name <span class="astric-sign">*</span></label>
                        <input type="text" name="Name"
                            value="{{ $MISConfiguration->Name ? trim($MISConfiguration->Name) : null }}"
                            class="form-control search">
                            <div class="text-danger d-none"></div>
                        @error('Name')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>

                </div>
                <div class="row">
                    <h6> <b>DataBase Configuration : </b></h6>
                    <div class=" form-group col-md-4">
                        <label> DB Name <span class="astric-sign">*</span></label>
                        <input type="text" name="DatabaseName"
                            value="{{ $MISConfiguration->DatabaseName ? trim($MISConfiguration->DatabaseName) : null }}"
                            class="form-control search">
                            <div class="text-danger d-none"></div>
                        @error('DatabaseName')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class=" form-group col-md-4">
                        <label> Host Name <span class="astric-sign">*</span></label>
                        <input type="text" name="HostName"
                            value="{{ $MISConfiguration->HostName ? trim($MISConfiguration->HostName) : null }}"
                            class="form-control search">
                            <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"
                            value="{{ $MISConfiguration->PortName ? trim($MISConfiguration->PortName) : null }}"
                            class="form-control search">
                            <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"
                            value="{{ $MISConfiguration->UserName ? trim($MISConfiguration->UserName) : null }}"
                            class="form-control search">
                            <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"
                            value="{{ $MISConfiguration->Password ? trim($MISConfiguration->Password) : null }}"
                            class="form-control search">
                            <div class="text-danger d-none"></div>
                        @error('DatabasePassword')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>

                </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"
                            value="{{ $MISConfiguration->FirstShiftReportingTime ? trim($MISConfiguration->FirstShiftReportingTime) : null }}"
                            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"
                            value="{{ $MISConfiguration->FirstShiftClosingTime ? trim($MISConfiguration->FirstShiftClosingTime) : null }}"
                            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"
                            value="{{ $MISConfiguration->FirstShiftExamStartTime ? trim($MISConfiguration->FirstShiftExamStartTime) : null }}"
                            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"
                            value="{{ $MISConfiguration->FirstShiftExamEndTime ? trim($MISConfiguration->FirstShiftExamEndTime) : null }}"
                            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"
                            value="{{ $MISConfiguration->SecondShiftReportingTime ? trim($MISConfiguration->SecondShiftReportingTime) : null }}"
                            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"
                            value="{{ $MISConfiguration->SecondShiftClosingTime ? trim($MISConfiguration->SecondShiftClosingTime) : null }}"
                            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"
                            value="{{ $MISConfiguration->SecondShiftExamStartTime ? trim($MISConfiguration->SecondShiftExamStartTime) : null }}"
                            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"
                            value="{{ $MISConfiguration->SecondShiftExamEndTime ? trim($MISConfiguration->SecondShiftExamEndTime) : null }}"
                            class="form-control search">
                        <div class="text-danger d-none"></div>
                        @error('SecondShiftExamEndTime')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>


                    

                  
                    <hr>
                    <div class="row  m-0">
                        <h6> <b>Configuration Section: </b></h6>

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

                        @foreach ($TablesJoinDetailData as $item)                                
                            <div class="d-flex" id="table_column_div_1">
                                <div class="form-group col-md-3">
                                    <input type="hidden" id="tableRecordId" name="tableRecordId[]"
                                        value="{{ $item->ID }}">
                                    <label>Table Name<span class="astric-sign">*</span></label>
                                    <input type="text" name="leftTableName[]" class="form-control search" value="{{ trim($item->leftTableName) }}">
                                    <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" value="{{ trim($item->leftTableColumnName) }}">
                                    <div class="text-danger d-none"></div>
                                    @error('leftTableColumnName')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="form-group col-md-1">
                                    <label>Join<span class="astric-sign">*</span></label>
                                    <select class="form-control" name="joinType[]">
                                        <option value="join" {{ trim($item->joinType) == "join" ? "selected" : ''}}>join</option>
                                        <option value="leftjoin" {{ trim($item->joinType) == "leftjoin" ? "selected" : ''}}>leftjoin</option>
                                        <option value="rightjoin" {{ trim($item->joinType) == "rightjoin" ? "selected" : ''}}>rightjoin</option>
                                        <option value="innerjoin" {{ trim($item->joinType) == "innerjoin" ? "selected" : ''}}>innerjoin</option>
                                        <option value="outerjoin" {{ trim($item->joinType) == "outerjoin" ? "selected" : ''}}>outerjoin</option>
                                    </select>
                                    <div class="text-danger d-none"></div>
                                    @error('joinType')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="form-group col-md-3">
                                    <label>Table Name<span class="astric-sign">*</span></label>
                                    <input type="text" name="rightTableName[]" class="form-control search" value="{{ trim($item->rightTableName) }}">
                                    <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" value="{{ trim($item->rightTableColumnName) }}">
                                    <div class="text-danger d-none"></div>
                                    @error('rightTableColumnName')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-2" style="margin-top: 31px;">
                                    <button type="button"  data-id={{ $item->ID }}
                                    class="btn btn-danger btn-sm removeTableRowBtn">
                                    Remove</button>
                                </div>
                                
                            </div>
                        @endforeach
                        <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">{{ $MISConfiguration->TCSTableColumnName }}</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" class="btn btn-success">
                                Save</button>
                        </div>
                    </div>


                </div>
            </form>


        </div>
    </div>

    <div id="deleteRecordModal" class="modal fade">
        <div class="modal-dialog modal-confirm">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title w-100 dark-font">Are you sure?</h4>
                    <button type="button" class="close cancelModalBtn" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <p>Do you really want to delete these records? This process cannot be undone.</p>
                </div>
                <div class="modal-footer justify-content-center">
                    <button type="button" class="btn btn-secondary cancelModalBtn" data-dismiss="modal">Cancel</button>
                    <form action="{{ route('config.setting.join.table') }}" name="deleteRecordFrm"
                        id="deleteRecordFrm" method="POST">
                        @csrf
                        @method('DELETE')
                        <input type="hidden" name="record_id" id="record_id">
                        <button type="submit" class="btn btn-danger">Delete</button>
                    </form>
                </div>
            </div>
        </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 () {
        
            $("#EditSettingFormSubmit").click(function (e) 
            {     
                e.preventDefault();
                var form = $("#EditSettingForm");
                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) {
                    $("#EditSettingForm").submit();
                }  
            });
     
    });

</script> --}}
  

@section('scripts')
    <script>
        var loop_count = 1;
        function add_more() {
            loop_count++;
            let table_column_div_html = `
                                <div class="form-group col-md-3">
                                    <label>Table Name<span class="astric-sign">*</span></label>
                                    <input type="text" name="leftTableName[]" class="form-control search">
                                    <div class="text-danger d-none"></div>
                                </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>
                                </div>
                                <div class="form-group col-md-1">
                                    <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>
                                    <div class="text-danger d-none"></div>
                                    @error('joinType')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="form-group col-md-3">
                                    <label>Table Name<span class="astric-sign">*</span></label>
                                    <input type="text" name="rightTableName[]" class="form-control search">
                                    <div class="text-danger d-none"></div>
                                </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>
                                </div>`;
            
            var html = '<input type="hidden" id="tableRecordId" name="tableRecordId[]">'
            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"\
                        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);

        }

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

    <script>
        $(document).ready(function(){
            $('.removeTableRowBtn').on('click', function() {
                let record_id = $(this).data('id');
                $('#record_id').val(record_id);
                $('#deleteRecordModal').modal('show');
                // alert(record_id);
            });

            $('.cancelModalBtn').on('click',function(){
                $('#deleteRecordModal').modal('hide');
            })
        });
    </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'); 
            }
        });
    });

</script>
@endsection