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

<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">MY Committees</h4>
                    
                </div>
                <div class="panel-body">
                    <table id="" class="table table-striped table-bordered align-middle">
                        <thead>
                            <tr style='font-size:12px;text-align: center;vertical-align: middle;'>
                                <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();
                                    foreach($allMYCommitteesMember as $all){
                                       
                                        if($temp_comm_name!== $all->meeting_id) {  @endphp
                                            <tr>
                                                <td colspan=3><b>{{ $all->meeting_id.'. '.$all->comm_name; }}</b>
                                               <!-- toggler -->
                                        <!--<a href="#modal-dialog_" class="menu-label" data-bs-toggle="modal">View</a>-->
                                                </td>
                                            </tr>
                                           
                                            @php
                                            $sn = 1;$temp_sec_name='';$temp_mem_name='';$initials='';$initials_s='';
                                        }
                                        
                                       
                                @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>
                                        <!-- #modal-dialog -->
<div class="modal fade" id="modal-dialog_">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">{{ $all->comm_name; }}</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
      </div>
      <div class="modal-body">
        <ul class="list-inline">
            <li>{{ $all->description; }}</li>
        </ul>
      
      </div>
      <div class="modal-footer">
        <a href="javascript:;" class="btn btn-white" data-bs-dismiss="modal">Close</a>
        
      </div>
    </div>
  </div>
</div>
                                @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