@extends('layouts.default', ['appTopMenu' => true])
    @section('title', 'Committee')
    @push('scripts')
    <!--<script src="{{ asset('js/typeahead.js') }}"></script>
    <script src="{{ asset('js/bootstrap3-typeahead.min.js') }}"></script

    <script src="{{ asset('js/autocomplete.js') }}"></script>-->
    <link rel="stylesheet" href="{{ asset('css/jquery-ui.css')}}" />
    <script src="{{ asset('js/jquery-ui.js') }}"></script>
    <script src="{{ asset('js/bootstrap-datetimepicker.js')}}"></script>
    <link href="../assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.css" rel="stylesheet" />
    <script src="../assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>

    <script src="/assets/plugins/sweetalert/dist/sweetalert.min.js"></script>
    <!-- Copy from SCLSC -->

    <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>
    <script src="{{ asset('js/task/pending_report.js') }}"></script>


    <!-- Copy from SCLSC -->

    <!--<script src="{{ asset('js/bootstrap-datetimepicker.fr.js') }}"></script>-->
    @endpush
    @push('head')

    <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>

    @php 

    if(!empty($result)){
        foreach($result as $res){
            $id = $res->id;
            $comm_id = $res->comm_id;
            $comm_name = $res->comm_name;
            $description = $res->description;
            $from_dt = date("d-m-Y", strtotime($res->from_dt));
            $to_dt = ($res->to_dt == null ? "" : date("d-m-Y", strtotime($res->to_dt)));
            $btn = "Update";
        }    
    }else{
        $id = 0;
        $comm_id = "";
        $comm_name = "";
        $description = "";
        $to_dt = "";
        $from_dt = "";
        $btn = "Submit";
    }
    @endphp


    <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">Committee</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">
                                @if($id == 0)
                                    <form action="{{url('/saveCommittee')}}" method="POST">
                                @else
                                    <form action="{{url('/updCommittee')}}" method="POST">
                                @endif        
                                    @csrf
                                    <div class="row">
                                        <div class="col-sm-1 @error('txt_meeting_no') has-error @enderror">
                                            <label class="control-label" for="txt_meeting_no"><b>Meeting No.</b></label>
                                            <input id="txt_meeting_no" value="{{$comm_id}}" name="txt_meeting_no" type="text" class="form-control @error('txt_meeting_no') is-invalid @enderror" />
                                            @error('txt_meeting_no')
                                            <small class="help-block text-danger">{{ $message }}</small>
                                            @enderror
                                        </div>
                                        <div class="col-sm-4 @error('txt_meeting_name') has-error @enderror">
                                            <label class="control-label" for="txt_meeting_name"><b>Name</b></label>
                                            <input id="txt_meeting_name" value="{{$comm_name}}" name="txt_meeting_name" type="text" class="form-control @error('txt_meeting_name') is-invalid @enderror" />
                                            @error('txt_meeting_name')
                                            <small class="help-block text-danger">{{ $message }}</small>
                                            @enderror
                                        </div>
                                        <div class="col-sm-2 @error('txt_meeting_desc') has-error @enderror">
                                            <label class="control-label" for="txt_meeting_desc"><b>Description</b></label>
                                            <input id="txt_meeting_desc" value="{{$description}}" name="txt_meeting_desc" type="text" class="form-control @error('txt_meeting_desc') is-invalid @enderror" />
                                            @error('txt_meeting_desc')
                                            <small class="help-block text-danger">{{ $message }}</small>
                                            @enderror
                                        </div>
                                        <div class="col-sm-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" value="{{ $from_dt }}" class="form-control txt_date"  id="datepicker-autoClose" 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 @error('txt_to_date') has-error @enderror">
                                            <label class="control-label" for="txt_to_date"><b>To Date</b></label>
                                            <div class="input-group date" data-date-start-date="Date.default">
                                                <input type="text" value="{{ $to_dt }}" class="form-control txt_date"  id="datepicker-autoClose1" name="txt_to_date" />
                                                <span class="input-group-text input-group-addon"><i class="fa fa-calendar"></i></span>
                                            </div>  
                                            @error('txt_to_date')
                                            <small class="help-block text-danger">{{ $message }}</small>
                                            @enderror
                                        </div>
                                        <div class="col-sm-1 @error('ddl_is_active') has-error @enderror">
                                            <label class="control-label" for="ddl_is_active"><b>Is Active</b></label>
                                            <select id="ddl_is_active" name="ddl_is_active" type="text" class="form-select">
                                                <option value="Y">Yes</option>
                                                <option value="N">No</option>
                                            </select>    
                                        </div>
                                        <div class="col-sm-1 mt-3" style="float:none;margin:auto;"> 
                                            <input type="hidden" id="id" name="id" value="{{ Crypt::encryptString($id) }}" />
                                            <input id="btnCadre" name="btnCadre" type="submit" class="btn-primary form-control" value="{{ $btn }}" />
                                        </div>
                                        <!-- <div class="col-sm-1 mt-3" style="float:none;margin:auto;">
                                            <label class="control-label" for="ddl_user_type"><b></b></label>
                                            <input id="reset" type="reset" class="btn-primary form-control" value="Reset" />
                                        </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">Committee 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">
                        <table id="data-table-default" class="table table-striped table-bordered align-middle">
                            <thead>
                                <tr style='font-size:12px;'>
                                    <th width="1%">S.No.</th>
                                    <th width="10%">Committee No.</th>
                                    <th>Committeei</th>
                                    <th>Description</th>
                                    <th>Active From</th>
                                    <th width="5%">Active From</th>
                                    <th data-sortable="false" style="width:5px;"><i style="margin-top: -7px;margin-left:10px;" class='fas fa-lg fa-fw me-5px fa-user-edit text-success'></i></th>
                                    <th data-sortable="false" style="width:5px;"><i style="margin-top: -7px;margin-left:10px;" class='fas fa-lg fa-fw me-5px fa-trash text-danger'></i></th>
                                </tr>
                            </thead>
                            <tbody>
                                    @php
                                        $sn = 1;
                                        foreach($allCommittee as $all){
                                    @endphp
                                            <tr>
                                                <td>{{ $sn }}</td>
                                                <td>{{ $all->comm_id }}</td>
                                                <td>{{ $all->comm_name }}</td>
                                                <td>{{ $all->description}}</td>
                                                <td>{{ date("d-m-Y", strtotime($all->from_dt)) }}</td>
                                                <td class='text-center'>
                                                    <a href='/editComm/{{ Crypt::encryptString($all->id) }}'><i style="margin-top: 10px;" class='fas fa-lg fa-fw me-5px fa-user-edit text-success'></i></a>
                                                </td>
                                                <td class='text-center'>
                                                    <a href='/delComm/{{ Crypt::encryptString($all->id) }}'><i style="margin-top: 10px;" class='fas fa-lg fa-fw me-5px fa-trash text-danger'></i></a>
                                                </td>
                                            </tr>
                                    @php  
                                            ++$sn;
                                        }
                                    @endphp
                            </tbody>
                        </table>                           
                    </div>
                </div>         
            </div>
        </div>
    </section>

    @endsection
    @push('scripts')
    <script>
        $(document).ready(function(){

            $(".activeto").hide();

            $('#data-table-default').DataTable({
                "pageLength": 10,
                responsive: true
            });

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

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

            $("#reset").click(function(){
                $("#btnCadre").val("Submit");
                $("#txt_cadre_code").val(0);
            });    

            $("#data-table-default").on("click", ".pr-2", function(){
                var id = this.id;
                var ids = id.split("-");
                var act = ids[0];
                id = ids[1];
                if (act == "edit")
                    Url = "{{ url('editCadre')}}";
                else if (act == "delete")
                    Url = "{{ url('deleteCadre')}}";
                $.ajax({
                    url: Url,
                    type: 'GET',
                    cache: false,
                    async: false,
                    beforeSend:function(){

                    },
                    data: {id:id},
                    success: function (data, status){
                        res = data.split("~");
                        $("#ddl_user_type").val(res[0].trim());
                        $("#txt_cadre").val(res[1]);
                        $("#txt_cadre_code").val(id);
                        $("#btnCadre").val("Update");
                        $(".activeto").show();
                    },
                    error: function (xhr) {
                        alert("Error:" + xhr.status + ' ' + xhr.statusText);
                    }
                });    
            });

        });
        
    </script>


    @endpush