@extends('admin.index')
@section('content')
@php
use App\Models\ProjectTeam;
@endphp
  <title>{{trans('admin.Projects')}}</title>

    <main id="js-page-content" role="main" class="page-content">
                    <ol class="breadcrumb page-breadcrumb">
                        <li class="breadcrumb-item"><a href="javascript:void(0);"> {{trans('admin.CRM')}}</a></li>
                        <li class="breadcrumb-item active">{{trans('admin.Projects')}}</li>
                        <li class="position-absolute pos-top pos-right d-none d-sm-block"><span
                                class="js-get-date"></span></li>
                    </ol>

                    <div class="row">
                        <div class="col-xl-12">
                            <div id="panel-1" class="panel">
                                <div class="panel-hdr">
                                    <h2>
                                         <span class="fw-300"><i>{{trans('admin.Projects')}}</i></span>
                                    </h2>

                                    <div class="panel-toolbar">
                                           @can('اضافه مشروع')
                                        <button type="button" class="btn btn-default" data-toggle="modal" data-target="#default-example-modal-lg">{{trans('admin.AddNew')}}</button>
                                         @endcan

                                        <button class="btn btn-primary btn-sm mx-3" data-toggle="dropdown">Table Style</button>

                                               @include('admin.layouts.toolbar')
                                    </div>

                                </div>
                                <div class="panel-container show">
                                   <span id="ex"> @include('admin.layouts.messages')</span>
                                    <div class="panel-content">
                                        <!-- datatable start -->
                                        <div style="overflow:auto;">
                                        <table id="dt-basic-example"
                                            class="table table-bordered table-hover table-striped ">
                                            <thead class="bg-highlight">
                                                <tr>
                                                    <th>{{trans('admin.Arabic_Name')}}</th>
                                                    <th>{{trans('admin.English_Name')}}</th>
                                                    <th>{{trans('admin.Start_Date')}}</th>
                                                    <th>{{trans('admin.End_Date')}}</th>
                                                    <th>{{trans('admin.Duration')}}</th>
                                                    <th>{{trans('admin.Value')}}</th>
                                                    <th>{{trans('admin.File')}}</th>
                                                    <th>{{trans('admin.Client')}}</th>
                                                    <th>{{trans('admin.Manager')}}</th>
                                                    <th>{{trans('admin.Team')}}</th>
                                                    <th>{{trans('admin.User')}}</th>
                                                    <th>{{trans('admin.Actions')}}</th>
                                                </tr>
                                            </thead>
                                            <tbody>

                                            @foreach($items as $item)
                                                <tr>
                                                    <td>{{$item->Name}}</td>
                                                    <td>{{$item->NameEn}}</td>
                                                    <td>{{$item->Start_Date}}</td>
                                                    <td>{{$item->End_Date}}</td>
                                                    <td>{{$item->Duration}}</td>
                                                    <td>{{$item->Value}}</td>
                                                    <td>
                                                    @if(!empty($item->File))
                 <a class="btn btn-primary" href="{{URL::to($item->File)}}" download><i class="fal fa-download"></i></a>
                                                    @else
                                                        {{trans('admin.Not_Found')}}
                                                    @endif
                                                    </td>
                                                    <td>
                                                        @if(!empty($item->Client()->first()->Name))
                                                     {{app()->getLocale() == 'ar' ?$item->Client()->first()->Name :$item->Client()->first()->NameEn}}
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if(!empty($item->Manager()->first()->Name))
                                                     {{app()->getLocale() == 'ar' ?$item->Manager()->first()->Name :$item->Manager()->first()->NameEn}}
                                                        @endif
                                                    </td>

                                                    <td>

                                       <button type="button" class="btn btn-default" data-toggle="modal" data-target="#Team{{$item->id}}">{{trans('admin.Team')}}</button>
                                                    </td>
                                 <td>

                                {{app()->getLocale() == 'ar' ?$item->User()->first()->name :$item->User()->first()->nameEn}}
                                                    </td>
                                                    <td class="text-center">


                                          @can('حذف مشروع')
                      <button type="button" class="btn btn-default" data-toggle="modal" data-target="#default-example-modal-center{{$item->id}}"><i class="fal fa-trash"></i></button>
                                   @endcan
                                        @can('تعديل مشروع')
                         <button type="button" class="btn btn-default" data-toggle="modal" data-target="#default-example-modal-lg-edit{{$item->id}}"><i class="fal fa-edit"></i></button>
                        @endcan


                                                        @if($item->Status == 0)
                  <a class="btn btn-primary" href="{{url('EndProject/'.$item->id)}}"><i class="fal fa-check"></i></a>                                           @endif
                                                    </td>
                                                </tr>
                                             @endforeach


                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                     <th>{{trans('admin.Arabic_Name')}}</th>
                                                     <th>{{trans('admin.English_Name')}}</th>
                                                    <th>{{trans('admin.Start_Date')}}</th>
                                                    <th>{{trans('admin.End_Date')}}</th>
                                                    <th>{{trans('admin.Duration')}}</th>
                                                    <th>{{trans('admin.Value')}}</th>
                                                    <th>{{trans('admin.File')}}</th>
                                                    <th>{{trans('admin.Client')}}</th>
                                                    <th>{{trans('admin.Manager')}}</th>
                                                    <th>{{trans('admin.Team')}}</th>
                                                    <th>{{trans('admin.User')}}</th>
                                                    <th>{{trans('admin.Actions')}}</th>
                                                </tr>
                                            </tfoot>
                                        </table>
                                        </div>
                                        {{$items->Links()}}
                                        <!-- datatable end -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Modal Add-->
            <div class="modal fade" id="default-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog modal-lg" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">{{trans('admin.AddNew')}}  </h5>

                                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true"><i class="fal fa-times"></i></span>
                                    </button>

                                </div>
                                <div class="modal-body">
                                    <form action="{{url('AddProjects')}}" method="post">
                                        {!! csrf_field() !!}
                                              @honeypot
                                        <div class="form-row">
                                        <div class="form-group col-lg-4">
                                            <label class="form-label" for="simpleinput">{{trans('admin.Arabic_Name')}}</label>
              <input type="text" name="Name"  value="{{old('Name')}}" class="form-control" required >
                                        </div>

                                            <div class="form-group col-lg-4">
                                            <label class="form-label" for="simpleinput">{{trans('admin.English_Name')}}</label>
              <input type="text" name="NameEn"  value="{{old('NameEn')}}" class="form-control"  >
                                        </div>

                                             <div class="form-group col-lg-4">
                                            <label class="form-label" for="simpleinput">{{trans('admin.Client')}}</label>
              <select class="js-data-example-ajax form-control Client" name="Client" required>
                                <option value="">{{trans('admin.Client')}}</option>
                                            </select>
                                        </div>

                                        <div class="form-group col-lg-4">
                                     <label class="form-label" for="simpleinput"> {{trans('admin.Start_Date')}}</label>
            <input type="date" name="Start_Date" id="Start_Date"  value="{{date('Y-m-d')}}" onchange="Dif()" class="form-control" required >
                                        </div>
                                              <div class="form-group col-lg-4">
                                     <label class="form-label" for="simpleinput"> {{trans('admin.End_Date')}}</label>
            <input type="date" name="End_Date" id="End_Date"  value="{{date('Y-m-d')}}" onchange="Dif()" class="form-control" required >
                                        </div>

                                                <div class="form-group col-lg-4">
                                     <label class="form-label" for="simpleinput"> {{trans('admin.Duration')}}</label>
                                                    <input type="text"  id="Duration"  class="form-control" disabled >
                                                    <input type="hidden" name="Duration" id="DurationHide">
                                        </div>

                                            <div class="form-group col-lg-4">
                                     <label class="form-label" for="simpleinput"> {{trans('admin.Value')}}</label>
            <input type="number" step="any" name="Value"   value="{{old('Value')}}"  class="form-control" required >
                                        </div>

                                                                  <div class="form-group col-lg-4">
                                            <label class="form-label" for="simpleinput">{{trans('admin.Manager')}}</label>
              <select class="select2 form-control"  name="Manager" required>
                                <option value="">{{trans('admin.Manager')}}</option>
                                            @foreach($Employess as $emp)
                    <option value="{{$emp->id}}">
                   {{app()->getLocale() == 'ar' ?$emp->Name :$emp->NameEn}}
                  </option>
                                           @endforeach
                                            </select>
                                        </div>


                                        <div class="form-group col-lg-4">
                                            <label class="form-label" for="simpleinput">{{trans('admin.Team')}}</label>
              <select class="select2 form-control" multiple name="Team[]" required>
                                            @foreach($Employess as $emp)
                    <option value="{{$emp->id}}">
                    {{app()->getLocale() == 'ar' ?$emp->Name :$emp->NameEn}}
                  </option>
                                           @endforeach
                                            </select>
                                        </div>

                                                           <div class="form-group col-lg-4">
                                     <label class="form-label" for="simpleinput"> {{trans('admin.File')}}</label>
            <input type="file" name="File" >
                                        </div>

                                        </div>
                                    <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{trans('admin.Close')}}</button>
                                    <button type="submit" class="btn btn-primary"> {{trans('admin.Save')}}</button>
                                </div>
                                    </form>
                                </div>

                            </div>
                        </div>
                    </div>


         @foreach($items as $item)
             <!-- Modal Edit-->
                    <div class="modal fade" id="default-example-modal-lg-edit{{$item->id}}" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog modal-lg" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">{{trans('admin.Edit')}}  </h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true"><i class="fal fa-times"></i></span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <form action="{{url('EditProjects/'.$item->id)}}" method="post">
                                        {!! csrf_field() !!}
                                              @honeypot
                            <input type="hidden" name="Files" value="{{$item->File}}">
                            <input type="hidden" name="Status" value="{{$item->Status}}">

                                         <div class="form-row">
                                        <div class="form-group col-lg-4">
                                            <label class="form-label" for="simpleinput">{{trans('admin.Arabic_Name')}}</label>
              <input type="text" name="Name"  value="{{$item->Name}}" class="form-control" required >
                                        </div>
                                             <div class="form-group col-lg-4">
                                            <label class="form-label" for="simpleinput">{{trans('admin.English_Name')}}</label>
              <input type="text" name="NameEn"  value="{{$item->NameEn}}" class="form-control" required >
                                        </div>

                                             <div class="form-group col-lg-4">
                                            <label class="form-label" for="simpleinput">{{trans('admin.Client')}}</label>
              <select class="js-data-example-ajax form-control Client" name="Client" required>

                                <option value="{{$item->Client}}" selected>
                    {{app()->getLocale() == 'ar' ?$item->Client()->first()->Name :$item->Client()->first()->NameEn}}
                  </option>

                                            </select>
                                        </div>

                                        <div class="form-group col-lg-4">
                                     <label class="form-label" for="simpleinput"> {{trans('admin.Start_Date')}}</label>
            <input type="date" name="Start_Date" id="Start_Date{{$item->id}}"  value="{{$item->Start_Date}}" onchange="Diff({{$item->id}})" class="form-control" required >
                                        </div>
                                              <div class="form-group col-lg-4">
                                     <label class="form-label" for="simpleinput"> {{trans('admin.End_Date')}}</label>
            <input type="date" name="End_Date" id="End_Date{{$item->id}}"  value="{{$item->End_Date}}" onchange="Diff({{$item->id}})" class="form-control" required >
                                        </div>

                                                <div class="form-group col-lg-4">
                                     <label class="form-label" for="simpleinput"> {{trans('admin.Duration')}}</label>
                      <input type="text"  id="Duration{{$item->id}}"  class="form-control" value="{{$item->Duration}}" disabled >
                      <input type="hidden" name="Duration" id="DurationHide{{$item->id}}" value="{{$item->Duration}}">
                                        </div>

                                            <div class="form-group col-lg-4">
                                     <label class="form-label" for="simpleinput"> {{trans('admin.Value')}}</label>
            <input type="number" step="any" name="Value"   value="{{$item->Value}}"  class="form-control" required >
                                        </div>

                                                                  <div class="form-group col-lg-4">
                                            <label class="form-label" for="simpleinput">{{trans('admin.Manager')}}</label>
              <select class="select2 form-control"  name="Manager" required>
                                <option value="">{{trans('admin.Manager')}}</option>
                                            @foreach($Employess as $emp)
                    <option value="{{$emp->id}}" @if($item->Manager == $emp->id) selected @endif>
                    {{app()->getLocale() == 'ar' ?$emp->Name :$emp->NameEn}}
                  </option>
                                           @endforeach
                                            </select>
                                        </div>


                                        <div class="form-group col-lg-4">
                                            <label class="form-label" for="simpleinput">{{trans('admin.Team')}}</label>
              <select class="select2 form-control" multiple name="Team[]" required>
                                            @foreach($Employess as $emp)
                  @php  $proj=ProjectTeam::where('Project',$item->id)->where('Member',$emp->id)->first();  @endphp
                  @if(!empty($proj))
                    <option value="{{$emp->id}}" selected>  {{app()->getLocale() == 'ar' ?$emp->Name :$emp->NameEn}}</option>
                  @else
                     <option value="{{$emp->id}}">  {{app()->getLocale() == 'ar' ?$emp->Name :$emp->NameEn}}</option>
                  @endif
                                           @endforeach
                                            </select>
                                        </div>

                                                           <div class="form-group col-lg-4">
                                     <label class="form-label" for="simpleinput"> {{trans('admin.File')}}</label>
            <input type="file" name="File" >
                                        </div>

                                        </div>

                                    <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{trans('admin.Close')}}</button>
                                    <button type="submit" class="btn btn-primary"> {{trans('admin.Save')}}</button>
                                </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                      <!-- Modal Delete -->
                      <div class="modal fade" id="default-example-modal-center{{$item->id}}" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title">
                                          {{trans('admin.RUSWDT')}} <strong> {{app()->getLocale() == 'ar' ?$item->Name :$item->NameEn}}</strong>
                                    </h4>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true"><i class="fal fa-times"></i></span>
                                    </button>
                                </div>

                                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal"> {{trans('admin.No')}}</button>
                   <a href="{{url('DeleteProjects/'.$item->id)}}"  class="btn btn-primary"> {{trans('admin.Yes')}}</a>
                                </div>
                            </div>
                        </div>
                    </div>



                    <!-- Modal Team -->
                      <div class="modal fade" id="Team{{$item->id}}" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title">
                                          {{trans('admin.Team')}}
                                    </h4>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true"><i class="fal fa-times"></i></span>
                                    </button>
                                </div>
                                @php  $Teams=ProjectTeam::where('Project',$item->id)->get(); @endphp
                                <div class="modal-body">
                                @foreach($Teams as $team)
                                    <li>
                         {{app()->getLocale() == 'ar' ?$team->Member()->first()->Name :$team->Member()->first()->NameEn}}
                                    </li>
                                @endforeach
                                </div>
                                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal"> {{trans('admin.No')}}</button>

                                </div>
                            </div>
                        </div>
                    </div>



        @endforeach
                </main>

@endsection

@push('js')
<link rel="stylesheet" media="screen, print" href="{{asset('Admin/css/datagrid/datatables/datatables.bundle.css')}}">
    <link rel="stylesheet" media="screen, print" href="{{asset('Admin/css/formplugins/summernote/summernote.css')}}">
    <link rel="stylesheet" media="screen, print" href="{{asset('Admin/css/formplugins/select2/select2.bundle.css')}}">
  <script src="{{asset('Admin/js/datagrid/datatables/datatables.bundle.js')}}"></script>
    <script src="{{asset('Admin/js/datagrid/datatables/datatables.export.js')}}"></script>
    <script src="{{asset('Admin/js/formplugins/summernote/summernote.js')}}"></script>
    <script src="{{asset('Admin/js/formplugins/select2/select2.bundle.js')}}"></script>

    <!-- Search Selecet -->
 <script>
        $(document).ready(function()
        {
            $(function()
            {
                $('.select2').select2();

                $(".select2-placeholder-multiple").select2(
                {
                    placeholder: "Select State"
                });
                $(".js-hide-search").select2(
                {
                    minimumResultsForSearch: 1 / 0
                });
                $(".js-max-length").select2(
                {
                    maximumSelectionLength: 2,
                    placeholder: "Select maximum 2 items"
                });
                $(".select2-placeholder").select2(
                {
                    placeholder: "Select a state",
                    allowClear: true
                });

                $(".js-select2-icons").select2(
                {
                    minimumResultsForSearch: 1 / 0,
                    templateResult: icon,
                    templateSelection: icon,
                    escapeMarkup: function(elm)
                    {
                        return elm
                    }
                });

                function icon(elm)
                {
                    elm.element;
                    return elm.id ? "<i class='" + $(elm.element).data("icon") + " mr-2'></i>" + elm.text : elm.text
                }


  $('.Client').select2({
    placeholder: "select...",
    ajax: {
        type: "GET",
        dataType: 'json',
        url: 'AllCli',
        processResults: function (data) {
          return {
            results: $.map(data, function(obj, index) {
              return { id: index, text: obj };
            })
          };

            	console.log(data);

        },
       data: function (params) {


                   var query = {
                            search: params.term,
                        };


              $.ajax({
                              url: 'AllCliJ/'+params.term,
                              type:"GET",
                              dataType:"json",
                              beforeSend: function(){
                                  $('#loader').css("visibility", "visible");
                              },

                              success:function(data) {
                                          $('.Client').empty();
                                  $.each(data, function(key, value){

                         $('.Client').append('<option value="'+ key +'">' + value + '</option>');

                                  });
                              },
                              complete: function(){
                                  $('#loader').css("visibility", "hidden");
                              }
                          });



        }
    }
  });


$('.Client').on('select2:select', function (e) {
	console.log("select done", e.params.data);
});



          $('#Client').select2({
    placeholder: "select...",
    ajax: {
        type: "GET",
        dataType: 'json',
        url: 'AllCli',
        processResults: function (data) {
          return {
            results: $.map(data, function(obj, index) {
              return { id: index, text: obj };
            })
          };

            	console.log(data);

        },
       data: function (params) {


                   var query = {
                            search: params.term,
                        };


              $.ajax({
                              url: 'AllCliJ/'+params.term,
                              type:"GET",
                              dataType:"json",
                              beforeSend: function(){
                                  $('#loader').css("visibility", "visible");
                              },

                              success:function(data) {
                                          $('#Client').empty();
                                  $.each(data, function(key, value){

                         $('#Client').append('<option value="'+ key +'">' + value + '</option>');

                                  });
                              },
                              complete: function(){
                                  $('#loader').css("visibility", "hidden");
                              }
                          });



        }
    }
  });


$('#Client').on('select2:select', function (e) {
	console.log("select done", e.params.data);
});



            });
        });



    </script>

    <script>
        //_fnFeatureHtmlLength();
        $(document).ready(function () {
            // Setup - add a text input to each footer cell
            $('#dt-basic-example thead tr').clone(true).appendTo('#dt-basic-example thead');
            $('#dt-basic-example thead tr:eq(1) th').each(function (i) {
                var title = $(this).text();
                $(this).html('<input type="text" class="form-control form-control-sm" placeholder="Search ' + '" />');

                $('input', this).on('keyup change', function () {
                    if (table.column(i).search() !== this.value) {
                        table
                            .column(i)
                            .search(this.value)
                            .draw();
                    }
                });
            });
            var table = $('#dt-basic-example').DataTable(
                {
                    // responsive: true,
                    orderCellsTop: true,
                    fixedHeader: true,
                    lengthChange: true,

                    dom: "<'row mb-3'<'col-sm-12 col-md-3 d-flex align-items-center justify-content-start'f><'col-sm-12 col-md-9 d-flex align-items-center justify-content-end'B>>" +
                        "<'row'<'col-sm-12'tr>>" +
                        "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",

                    buttons: [
                        {
                            extend: 'pageLength',
                            className: 'btn-outline-default'
                        },
                        {
                            extend: 'colvis',
                            text: 'Column Visibility',
                            titleAttr: 'Col visibility',
                            className: 'btn-outline-default'
                        },
                        {
                            extend: 'pdfHtml5',
                            text: 'PDF',
                            titleAttr: 'Generate PDF',
                            className: 'btn-outline-danger btn-sm mr-1'
                        },
                        {
                            extend: 'excelHtml5',
                            text: 'Excel',
                            titleAttr: 'Generate Excel',
                            className: 'btn-outline-success btn-sm mr-1'
                        },
                        {
                            extend: 'csvHtml5',
                            text: 'CSV',
                            titleAttr: 'Generate CSV',
                            className: 'btn-outline-primary btn-sm mr-1'
                        },
                        {
                            extend: 'copyHtml5',
                            text: 'Copy',
                            titleAttr: 'Copy to clipboard',
                            className: 'btn-outline-primary btn-sm mr-1'
                        },
                        {
                            extend: 'print',
                            text: 'Print',
                            titleAttr: 'Print Table',
                            className: 'btn-outline-primary btn-sm'
                        }
                    ],
                });
            $('.js-thead-colors a').on('click', function () {
                var theadColor = $(this).attr("data-bg");
                console.log(theadColor);
                $('#dt-basic-example thead').removeClassPrefix('bg-').addClass(theadColor);
            });

            $('.js-tbody-colors a').on('click', function () {
                var theadColor = $(this).attr("data-bg");
                console.log(theadColor);
                $('#dt-basic-example').removeClassPrefix('bg-').addClass(theadColor);
            });

        });

    </script>

<!-- Differnce Date -->
<script>
    function Dif(){

      var start =new Date($('#Start_Date').val());
      var end = new Date($('#End_Date').val());

// To calculate the time difference of two dates
var Difference_In_Time = end.getTime() - start.getTime();

// To calculate the no. of days between two dates
var res = Difference_In_Time / (1000 * 3600 * 24);

            $('#Duration').val(res);
            $('#DurationHide').val(res);

    }
 function Diff(r){

      var start =new Date($('#Start_Date'+r).val());
      var end = new Date($('#End_Date'+r).val());

// To calculate the time difference of two dates
var Difference_In_Time = end.getTime() - start.getTime();

// To calculate the no. of days between two dates
var res = Difference_In_Time / (1000 * 3600 * 24);

            $('#Duration'+r).val(res);
            $('#DurationHide'+r).val(res);

    }
</script>

@endpush

