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

<link href="/assets/plugins/select2/dist/css/select2.min.css" rel="stylesheet" />
<script src="/assets/plugins/select2/dist/js/select2.min.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
    $id = 0;
@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('/saveMember')}}" method="POST">
                            @else
                                <form action="{{url('/updMember')}}" method="POST">
                            @endif        
                                @csrf
                                <div class="row">
                                    <div class="col-sm-4 @error('txt_meeting_no') has-error @enderror">
                                        <label class="control-label" for="txt_meeting_no"><b>Committee</b></label>
                                        <select id="ddl_is_active" name="ddl_is_active" type="text" class="default-select2 form-select">
                                            @php
                                                foreach($allCommittee as $all){
                                            @endphp        
                                                    <option value="{{ $all->id }}">{{ $all->comm_id."-".$all->comm_name }}</option>
                                            @php            
                                                }
                                            @endphp
                                        </select>           
                                        @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="" 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="" 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="" 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="" 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="Submit" />
                                    </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>Committee</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>{{ 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();

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

        $('#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