@extends('layouts.default', ['appTopMenu' => true])
@section('title', 'Act Sub Sub Section Master')
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> -->
<!-- <link href="/assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css" rel="stylesheet" />
<script src="/assets/plugins/datatables.net/js/jquery.dataTables.min.js" defer></script>
<script src="/assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js" defer></script>
<script src="/assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js" defer></script> -->

@push('scripts')
<link href="/assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.css" rel="stylesheet" />
<script src="/assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.js" defer></script>

<!-- <script src="/assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script> -->
<script src="/assets/plugins/sweetalert/dist/sweetalert.min.js"></script>


<!-- required files -->
<link href="/assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-colreorder-bs5/css/colReorder.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-keytable-bs5/css/keyTable.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-rowreorder-bs5/css/rowReorder.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-select-bs5/css/select.bootstrap5.min.css" rel="stylesheet" />

<script src="/assets/plugins/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script>
<script src="/assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="/assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script>
<script src="/assets/plugins/datatables.net-colreorder/js/dataTables.colReorder.min.js"></script>
<script src="/assets/plugins/datatables.net-colreorder-bs5/js/colReorder.bootstrap5.min.js"></script>
<script src="/assets/plugins/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
<script src="/assets/plugins/datatables.net-keytable-bs5/js/keyTable.bootstrap5.min.js"></script>
<script src="/assets/plugins/datatables.net-rowreorder/js/dataTables.rowReorder.min.js"></script>
<script src="/assets/plugins/datatables.net-rowreorder-bs5/js/rowReorder.bootstrap5.min.js"></script>
<script src="/assets/plugins/datatables.net-select/js/dataTables.select.min.js"></script>
<script src="/assets/plugins/datatables.net-select-bs5/js/select.bootstrap5.min.js"></script>
<script src="/assets/plugins/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="/assets/plugins/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js"></script>
<script src="/assets/plugins/datatables.net-buttons/js/buttons.colVis.min.js"></script>
<script src="/assets/plugins/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="/assets/plugins/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="/assets/plugins/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="/assets/plugins/pdfmake/build/pdfmake.min.js"></script>
<script src="/assets/plugins/pdfmake/build/vfs_fonts.js"></script>
<script src="/assets/plugins/jszip/dist/jszip.min.js"></script>

<link href="/assets/plugins/select2/dist/css/select2.min.css" rel="stylesheet" />
<script src="/assets/plugins/select2/dist/js/select2.min.js"></script>


@endpush

@push('head')

<script src="/assets/plugins/sweetalert/dist/sweetalert.min.js"></script>


<style>
/*Custom CSS*/
span {
    transition: color 0.5s ease-in;
}

label:focus-within span {
    color: blue;
}

input {
    display: block;
    width: 100%;
}

label,
select {

    display: block;
    width: 100%;
    max-width: 100%;
}

/*Profile Pic Start*/
.picture-container {
    position: relative;
    cursor: pointer;
    text-align: center;
}

.picture {
    width: 106px;
    height: 106px;
    background-color: #999999;
    border: 4px solid #CCCCCC;
    color: #FFFFFF;
    border-radius: 50%;
    margin: 0px auto;
    overflow: hidden;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
}

.picture:hover {
    border-color: #2ca8ff;
}

.picture input[type="file"] {
    cursor: pointer;
    display: block;
    height: 100%;
    left: 0;
    opacity: 0 !important;
    position: absolute;
    top: 0;
    width: 100%;
}

.picture-src {
    width: 100%;

}

/*Profile Pic End*/
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.select2:focus-within {
    border-color: #6265e4 !important;
    box-shadow: 0 0 5px rgba(98, 101, 228, 1) !important;
}
</style>
@endpush
@section('content')
<script>
@if (Session::has('success'))

   swal("{{Session::get('success')}}").then(function() {
//window.location = "/project/" + loc;
});
        @endif


</script>


<section>
    <div class="row">
        <div class="col-xl-12">
            <div class="panel" data-sortable-id="form-stuff-3">
                <div class="panel-heading card-bg-color">
                    <h4 class="panel-title">Act Sub Sub Section Master</h4>
                    <div class="panel-heading-btn">
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i
                                class="fa fa-expand"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i
                                class="fa fa-redo"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i
                                class="fa fa-minus"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i
                                class="fa fa-times"></i></a>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="row"> 
                        <div class="card border-0">
                            <form action="{{url('/saveActSubSectionMaster')}}" method="POST">
                                @csrf
                                <div class="row" style="float:none;margin:auto;">
                                    <div class="col-sm-4 @error('ddl_act') has-error @enderror">
                                        <label class="control-label" for="ddl_act"><b>Select Act*</b></label>
                                        <select name="ddl_act"  onchange="getActSection()" id="ddl_act" class="default-select2 form-control  @error('ddl_act') is-invalid @enderror">
                                            <option value="">Select</option>
                                            @foreach($act as $val)
                                                <option value="{{ $val->actcode }}">{{ $val->actname }}</option>
                                            @endforeach    
                                        </select>                                       
                                        @error('ddl_act')
                                        <small class="help-block text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="col-sm-8 @error('ddl_section') has-error @enderror">
                                        <label class="control-label" for="ddl_section"><b>Select Section*</b></label>
                                        <select name="ddl_section"  id="ddl_section" onchange="loadtable(0,this.value)" class="default-select2 form-control  @error('ddl_section') is-invalid @enderror">
                                            <option value="">Select</option>
                                        </select>                                       
                                        @error('ddl_section')
                                        <small class="help-block text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="col-sm-4 mt-2 @error('txt_sub_section') has-error @enderror">
                                        <label class="control-label" for="txt_sub_section"><b>Sub Section*</b></label>
                                        <input type="text" class="form-control @error('txt_sub_section') is-invalid @enderror" id="txt_sub_section" name="txt_sub_section" />
                                        @error('txt_sub_section')
                                        <small class="help-block text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="col-sm-2 mt-2 @error('txt_from_date') has-error @enderror">
                                        <label class="control-label" for="txt_from_date"><b>From Date</b></label>
                                        <div class="input-group date" data-date-start-date="Date.default">
                                            <input type="text" size="10" class="form-control from_data @error('txt_from_date') is-invalid @enderror"  id="datepicker-autoClose" value="{{ date('d-m-Y') }}" name="txt_from_date" />
                                            <span class="input-group-text input-group-addon"><i class="fa fa-calendar"></i></span>
                                        </div> 
                                        @error('txt_from_date')
                                        <small class="help-block text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="col-sm-2 mt-2">
                                        <label class="control-label @error('txt_to_date') is-invalid @enderror" for="txt_to_date"><b>To Date</b></label>
                                        <div class="input-group date" data-date-start-date="Date.default">
                                            <input type="text" disabled size="10" class="form-control from_data @error('txt_to_date') has-error @enderror"  id="datepicker-autoClose1" name="txt_to_date" />
                                            <span class="input-group-text input-group-addon"><i class="fa fa-calendar"></i></span>
                                        </div> 
                                        @error('to_date')
                                        <small class="help-block text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="col-sm-1 mt-4">
                                        <input type="hidden" id="id" name="id" />
                                        <label class="control-label" for="ddl_user_type"><b></b></label>
                                        <input id="btnSection" name="btnSection" type="submit" class="btn-primary form-control" value="Submit" />
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel" data-sortable-id="form-stuff-3">
                <div class="panel-heading card-bg-color">
                    <h4 class="panel-title">Act Sub Section Details</h4>
                    <div class="panel-heading-btn">
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
                    </div>
                </div>
                <div class="panel-body tabledata"></div>
            </div>
        </div>
    </div>
</section>

@endsection
@push('scripts')
<script>
    
var options = {
    dom: '<"dataTables_wrapper dt-bootstrap"<"row"<"col-xl-10 d-block d-sm-flex d-xl-block justify-content-center"<"d-block d-lg-inline-flex me-0 me-md-3"l><"d-block d-lg-inline-flex"B>><"col-xl-2 d-flex d-xl-block justify-content-center"fr>>t<"row"<"col-md-5"i><"col-md-7"p>>>',
    buttons: [{
            extend: 'copy',
            className: 'btn-sm'
        },
        {
            extend: 'csv',
            className: 'btn-sm'
        },
        {
            extend: 'excel',
            className: 'btn-sm'
        },
        {
            extend: 'pdf',
            className: 'btn-sm'
        },
        {
            extend: 'print',
            className: 'btn-sm'
        }
    ],
    responsive: true,
    colReorder: true,
    keys: true,
    rowReorder: true,
    select: true
};

if ($(window).width() <= 767) {
    options.rowReorder = false;
    options.colReorder = false;
  }
  
 // loadtable();

 

$(document).ready(function() {

    $(".default-select2").select2();
    
  //  loadtable();

    $("#datepicker-autoClose").datepicker({
        todayHighlight: true,
        autoclose: true,
        format : "dd-mm-yyyy"
    });

    $("#datepicker-autoClose1").datepicker({
        todayHighlight: true,
        autoclose: true,
        format : "dd-mm-yyyy"
    });

    /* For edit the record */
    $(document).on("click", ".pr-1", function() {

        var id = this.id;
        var ids = id.split("-");
        var act = ids[0];
        id = ids[1];
        $.ajax({
            url: "editActSubSection",
            type: 'GET',
            cache: false,
            async: false,
            beforeSend: function() {

            },
            data: {
                id: id
            },
            success: function(data, status) {
                $("#btnSection").val("Update");
                    var result = (data[0]);
                    var columns = String(Object.keys(result[0])).split(',');
                    // alert(columns);
                    var i = 0;
                    $.each(columns, function (k, v) {

                        $.each(result, function (k, v) {
                            j = 0;
                            m = 0;
                            $("#ddl_act").val(eval("v." + columns[1]));
                            $("#ddl_section").val(eval("v." + columns[2])).trigger("change"); 
                            $("#txt_sub_section").val(eval("v." + columns[3]));
                            $("#datepicker-autoClose").val(eval("v." + columns[5]).split("-").reverse().join("-"));
                            $("#datepicker-autoClose1").val(eval("v." + columns[6]));
                            $("#datepicker-autoClose1").prop( "disabled", false);
                            $("#id").val(id);
                        });
                    });

            },
            error: function(xhr) {
                alert("Error:" + xhr.status + ' ' + xhr.statusText);
            }
        });
    });

});

function resets(){
    $("#ddl_estb_type").val("");
    $("#txt_section_full").val("");
    $("#txt_section_abbrv").val("");
    $("#datepicker-autoClose").val("");
    $("#datepicker-autoClose1").val("");
    $("#txt_section_full_h").val("");
    $("#btnSection").val("Submit");
    $("#datepicker-autoClose1").prop( "disabled", true);
}

function getActSection() {
    var act = $("#ddl_act").val(); 
    $.ajax({
        url: "getActSection",
        type: 'GET',
        cache: false,
        async: false,
        beforeSend: function() {

        },
        data: { act:act },
        success: function (data, status){
            var model = $('#ddl_section');
            model.empty();
            var html = "<option value=''>Select Act Section</option>";
            $.each(data, function (index, element) {
                html += "<option value='" + element.id + "'>" + element.actsection_code+" - "+element.act_section + "</option>";
            });
            model.append(html);
            loadtable(act, 0);
        },
        error: function(xhr) {
            alert("Error:" + xhr.status + ' ' + xhr.statusText);
        }
        
    });
}

function loadtable(act, section) {
    if(act == 0)
        act = $("#ddl_act").val();
    $.ajax({
        url: "getDataTableActSubSection",
        type: 'GET',
        cache: false,
        async: false,
        beforeSend: function() {

        },
        data: {
            act:act, section:section
        },
        success: function(data, status) {
            $(".tabledata").html(data);
            $('#data-table-combine').DataTable(options);
        },
        error: function(xhr) {
            alert("Error:" + xhr.status + ' ' + xhr.statusText);
        }
    });
}


    
// var estb_type1 = '{{ old("estb_type") }}';
// if(estb_type1 != "")
//     $("#ddl_estb_type").trigger("change");    

    
</script>


@endpush