@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;
    }
    .select2.select2-container .selection .select2-selection.select2-selection--single .select2-selection__rendered,
    .select2.select2-container .selection .select2-selection.select2-selection--multiple .select2-selection__rendered{
        font-weight:100;
    }
</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-2 @error('comm_id') has-error @enderror">
                                        <label class="control-label" for="comm_id"><b>Committee</b></label>
                                        <select id="comm_id" name="comm_id" type="text" class="default-select2 form-select">
                                        <option value="">SELECT COMMITEE</option>
                                            @php
                                                foreach($allCommittee as $all){
                                            @endphp        
                                                    <option value="{{ $all->comm_id }}">{{ $all->comm_id."-".$all->comm_name }}</option>
                                            @php            
                                                }
                                            @endphp
                                        </select>           
                                        @error('comm_id')
                                        <small class="help-block text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="col-sm-3 @error('comm_members') has-error @enderror">
                                        <label class="control-label" for="comm_members"><b>Members</b></label>
                                        <select name="comm_members[]" type="text" class="default-select2 form-select" multiple="multiple">
                                        
                                        @php
                                                foreach($allMembers as $all){
                                            @endphp        
                                           
                                                                                                <option value="{{$post_code}}">{{ $post_name }}</option>
                                            @php            
                                                }
                                            @endphp
                                        </select>    
                                        @error('comm_members')
                                        <small class="help-block text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="col-sm-3 @error('comm_secretary') has-error @enderror">
                                        <label class="control-label" for="comm_secretary"><b>Secretary</b></label>
                                        <select name="comm_secretary[]" type="text"  class="default-select2 form-select" multiple="multiple" style="font-weight:100;">
                                       
                                        @php
                                                foreach($allMembers as $all){
                                            @endphp        
                                                   
                                                                                                
                                            ?>
                                                    <option value="{{$post_code}}">{{ $post_name }}</option>
                                            @php            
                                                }
                                            @endphp
                                        </select>    
                                        @error('comm_secretary')
                                        <small class="help-block text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>                             
                                            
                                    
                                           
                                    <div class="col-sm-2 @error('txt_meeting_date') has-error @enderror">
                                        <label class="control-label" for="txt_meeting_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_meeting_date" />
                                            <span class="input-group-text input-group-addon"><i class="fa fa-calendar"></i></span>
                                        </div>  
                                        @error('txt_meeting_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" style="position: relative;top: 17px;"> 
                                      
                                        <input type="hidden" id="id" name="id" value="{{ Crypt::encryptString($id) }}" />
                                        <input id="btnCadre" name="btnCadre" type="submit" class="btn btn-primary" value="Submit" />
                                    </div>
                                    <div class="col-sm-1"></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 Members 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="" class="table table-striped table-bordered align-middle">
                        <thead>
                            <tr style='font-size:12px;'>
                                <th>Committee Members</th>
                                <th>Committee Secretary</th>
                                <th width="5%">Active From</th>
                                
                            </tr>
                        </thead>
                        <tbody>
                                @php 
                                    $sn = 1;$temp_comm_name='';$temp_sec_name='';$s=1;$uniques = array();$initials='';$initials_s='';
                                    foreach($allCommitteesMembers as $all){
                                       
                                        if($temp_comm_name!== $all->meeting_id) {  @endphp
                                            <tr>
                                                <td colspan=3><b>{{ $all->meeting_id.'. '.$all->comm_name; }}</b>
                                                <span style="float:right">
                                                <a href='#'><i style="margin-top: 10px;" class='fas fa-lg fa-fw me-5px fa-user-edit text-success'></i></a>
                                           
                                         
                                                <a href='#'><i style="margin-top: 10px;" class='fas fa-lg fa-fw me-5px fa-trash text-danger'></i></a>
                                                </span>
                                                </td>
                                            </tr>
                                            
                                            @php
                                            $sn = 1;$temp_sec_name='';$temp_mem_name='';
                                        }
                                        
                                       
                                @endphp
                              
                                        <tr>
                                                                              
                                            <td><b>1.</b>  <br/></td>
                                           <td style="vertical-align: initial;"><b>1.</b>  <br/></td>
                                            <td>{{ date("d-m-Y", strtotime($all->from_dt)) }}</td>
                                            
                                        </tr>
                                @php  
                                        
                                        $temp_comm_name=$all->meeting_id;
                                      
                                    }
                                    
                                @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