@extends('layouts.admin')

@section('content')
<div class="creatUser" style="width:100%">
    @if(Session::has('update_title_sub'))
            <p class="bg-success text-light p-2">{{Session('update_title_sub')}}</p>
    @endif
    <div class="row create mb-4" >
            <div class="col-11 " style="text-align: center; margin: auto;border: 1px solid black; background-color: #e99109;font-size: 1.4rem;font-weight: 700;font-family: monospace;">
                Create Title and Subtite and Chains Together
            </div>
       <div class="col-11 d-flex m-auto" style="border:1px solid black">

        <div class="" style="margin: auto;width:40%;border-right:1px solid black;padding-right:5%">
            {!! Form::open(['method' => 'POST', 'action'=> 'App\Http\Controllers\TimesheettitleController@store','files'=>true]) !!}

                <div class="form-group">
                    {!! Form::label('title','Title:') !!}
                    {!! Form::text('title', null, ['class' => 'form-control'],array('tabindex' => '1', 'required' => '')) !!}
                </div>


                <div class="form-group">
                    {!! Form::submit('Create', ['class'=>'btn btn-primary']) !!}
                </div>

           {!! Form::close() !!}
        </div>
        @if(count($arraytile) > 0)
        <div class="" style="width:50%">
            {!! Form::open(['method' => 'POST', 'action'=> 'App\Http\Controllers\TimesheettitleController@storecat','files'=>true]) !!}

                <div class="form-group">
                    <div class="row">
                        <div class="col-sm-6">
                            {!! Form::label('categoryname','subtitle:') !!}
                            {!! Form::text('name', null, ['class' => 'form-control']) !!}
                        </div>
    
           


                        <div class="col-sm-6" style="display: flex;flex-direction: column;justify-content: flex-end;">
                            <div class="btn-group">
                                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="background-color: transparent;
                                color: black;
                                border: 1px solid black;">
                                    select title
                                </button>
                                <div class="dropdown-menu dropdown-menu-right">
                                    @foreach($arraytile as $id=>$name)
                                    <button class="dropdown-item" type="button" style="text-align: left"> 
                                            <label class="form-check-label">
                                                <input name="ids{{$id}}" type="checkbox" class="form-check-input" value="{{$id}}">{{$name}}
                                            </label>
                                        </button>
                                    @endforeach
                                 
                                </div>
                              </div>
                        </div>

                    </div>
              
               
                </div>

                <div class="form-group">
                    {!! Form::submit('Create', ['class'=>'btn btn-primary']) !!}
                </div>

           {!! Form::close() !!}
        </div>
       </div>

          

        
       

        <div class="col-md-11 mt-3" style="border: 1px solid black;border-radius:5px;margin:auto;padding:0">
            <div style="display: flex;justify-content: center; background-color: #e99109;width: 100%;font-size: 1.4rem;font-weight: 700;font-family: monospace;">Update chain Subtitle's to Title</div>

            <div class="row m-4">
                <div class="col-sm-12">
                    <div class="dropdown" style="display: flex;justify-content:center">
                        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          select title
                        </button>
                        <div class="dropdown-menu drpChain" aria-labelledby="dropdownMenuButton">
                        @foreach($timesheettitles as $tt)
                            @if($tt->is_active !== 'no')
                                <a class="dropdown-item" select="unselect" href="#" id="{{$tt->id}}">{{$tt->title}}</a>
                            @endif  
                          @endforeach
                        </div>

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

            <div class="containerCheckboxChain" style="width:90%;margin:auto;flex-direction:column">
                <div>all title:</div>
                <div class="cncheck" style="">
                    <ul>
                        @foreach($tscategory as $tsc)
                            <li>
                                <div class="form-group" style="">
                                    <label for="{{$tsc->name}}" class="form-check-label">
                                        <input name="{{$tsc->name}}" type="checkbox" class="form-check-input" value="{{$tsc->id}}" required>{{$tsc->name}}
                                    </label>
                                </div>
                            </li>

                        @endforeach
                    </ul>

                
                </div>
                <button type="submit" class="btn btn-primary updatechain" style="width: 20%;margin:auto">submit</button>
           
        
            </div>
        </div>


        <div class="col-md-11 mt-3" style="border: 1px solid black;border-radius:5px;margin:auto;padding:0">
            <div style="display: flex;justify-content: center; background-color: #e99109;width: 100%;font-size: 1.4rem;font-weight: 700;font-family: monospace;">Update  Subtitle's and Title</div>

            <div class="row m-4">
                <div class="col-sm-12" style="display: flex;justify-content: space-evenly">
                    <div class="dropdown" style="display: flex;justify-content:center">
                        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            select title
                        </button>
                        <div class="dropdown-menu drpChainUpTitle" aria-labelledby="dropdownMenuButton">
                            @foreach($timesheettitles as $tt)
                                @if($tt->is_active !== 'no')
                                    <a class="dropdown-item" select="unselect" href="#" id="{{$tt->id}}">{{$tt->title}}</a>
                                @endif
                            @endforeach
                        </div>


                    </div>
                    <div class="dropdown" style="display: flex;justify-content:center">
                        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            select subtitle
                        </button>
                        <div class="dropdown-menu drpChainUpSubTitle" aria-labelledby="dropdownMenuButton">
                            @foreach($tscategory as $tt)
                                @if($tt->is_active !== 'no')
                                    <a class="dropdown-item" select="unselect" href="#" id="{{$tt->id}}">{{$tt->name}}</a>
                                @endif
                            @endforeach
                        </div>


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

            <div class="containerdrpChainUpTitle" style="width:90%;margin:auto;flex-direction:column">

                <div class="cncheck" style="">
                    {!! Form::open(['method' => 'POST', 'action'=> 'App\Http\Controllers\TimesheettitleController@changeSingleTitle','files'=>true]) !!}

                    <div class="form-group titleinp">
                        {!! Form::label('title','Title:') !!}
                        {!! Form::text('title', null, ['class' => 'form-control'],array('tabindex' => '1', 'required' => '')) !!}
                        {{ Form::hidden('titleid', '',['class' => 'titleid']) }}
                    </div>


                    <div class="form-group">
                        {!! Form::submit('Update', ['class'=>'btn btn-primary']) !!}
                    </div>

                    {!! Form::close() !!}


                </div>



            </div>

            <div class="containerdrpChainUpSubTitle" style="width:90%;margin:auto;flex-direction:column">

                <div class="cncheck" style="">
                    {!! Form::open(['method' => 'POST', 'action'=> 'App\Http\Controllers\TimesheettitleController@changeSingleSubTitle','files'=>true]) !!}

                    <div class="form-group subtitleinp">
                        {!! Form::label('Subtitle','Subtitle:') !!}
                        {!! Form::text('name', null, ['class' => 'form-control'],array('tabindex' => '1', 'required' => '')) !!}
                        {{ Form::hidden('subtitleid', '',['class' => 'subtitleid']) }}
                    </div>


                    <div class="form-group">
                        {!! Form::submit('Update', ['class'=>'btn btn-primary']) !!}
                    </div>

                    {!! Form::close() !!}


                </div>



            </div>

        </div>


        @endif

   
        
                
                
  
 
               
                

      

    </div>
    <div class="row">
        <div class="col-md-12 mb-4" >
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">List Title and subtitle</h6>
                </div>
                <div class="card-body">
                    <table id="table_id_tasks" class="table table-bordered dataTable">
                        <thead>
                        <tr>
                            <th class="id" scope="col">Id</th>
                            <th class="title" scope="col">Title</th>
                            <th class="category" scope="col">Sub Title</th>
                            <th class="category" scope="col">Status</th>
                            <th class="del">Delete</th>


                        </tr>
                        </thead>
                        <tbody>
                        @if($timesheettitles )
                            @foreach($timesheettitles as $tt)
                                <tr>
                                    <td>{{$tt->id}}</td>
                                    <td>{{$tt->title}}</td>

                                    <td>
                                        @if($tt->category)
                                            @foreach($tt->category as $cat)
                                                <span style="background-color:black;padding:5px;color: white;border-radius: 5px ">{{$cat}}</span>
                                            @endforeach
                                        @endif
                                    </td>
                                    <td>
                                        @if($tt->is_active == NULL)
                                            <span style="color:green">active</span>
                                        @elseif($tt->is_active == 'no')
                                            <span style="color:red">deactive</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if( $tt->is_active == 'no')
                                            <form action="{{ route('timesheet.title.active', $tt)}}" method="POST" enctype="multipart/form-data">
                                                @csrf
                                                {{-- @method('DELETE') --}}
                                                <button type="submit" class="btn btn-success">active</button>
                                            </form>

                                        @else
                                            <form action="{{ route('timesheet.title.deactive', $tt)}}" method="POST" enctype="multipart/form-data">
                                                @csrf
                                                {{-- @method('DELETE') --}}
                                                <button type="submit" class="btn btn-warning">deactive</button>
                                            </form>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        @endif



                        </tbody>
                    </table>
                </div>

            </div>

        </div>
    </div>
    <div class="row">
        @include('includes.form_error')
    </div>



   
 </div>
 <script src="{{asset('vendor/jquery/jquery.min.js')}}"></script>
 <script>
     $(document).ready(function(){
        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

        
        //change attr select to unselect when click
         $('.drpChain a').click(function(){
             console.log('meshhh')
             $(this).parent().find('a').each(function(){
                 if($(this).attr("select")){
                    $(this).attr('select','unselect')
                 }
                 if($(this).find('span')) {
                    $(this).find('span').remove();
                 }
             })
             //add tick
             $(this).prepend(`<span>&#10004;</span>`);
             //change attr unselect to select when click
             $(this).attr('select','selected');
             var id = $(this).attr('id');
             var getUrl = window.location;
             
            //get data title
             $.ajax({
                    /* the route pointing to the post function */
                    url: `${getUrl.origin}/admin/user/timesheet/ajaxgetcat`,
                    type: 'POST',
                    /* send the csrf-token and the input to the controller */
                    data: {_token: CSRF_TOKEN, id:id},
                    dataType: 'JSON',
                    /* remind that 'data' is the response of the AjaxController */
                    success: function (data) { 
                        console.log(data,'test');
                        $('.containerCheckboxChain').css('display','none');
                     
                      $('.containerCheckboxChain').find('.form-group').each(function(e){
                        $(this).find('input').prop('checked', false);
                          var name = $(this).find('input').attr('name');
                          for(let i = 0 ;i<data.length;i++) {
                              if(name == data[i]){
                                var tt = $(this).find('input').prop('checked', true);
                             
                              }
                          }
                      })

                      $('.containerCheckboxChain').css('display','flex');

                    }
                }); 



         })
                // update chain
                $('.updatechain').click(function(){
                    var idtitle;
                    var idcheckboxes = [];
                    var iduncheck =[];
                    // get id title
                    $('.drpChain').find('a').each(function(){
                        if($(this).attr('select') == 'selected') {
                            idtitle = $(this).attr('id');                            
                        }

                     
                        
                    })
                    //get check boxes title

                    $('.cncheck').find('.form-group').each(function(){
                        if($(this).find('input'). is(':checked')){
                            let idcheckbox = $(this).find('input').attr('value');
                            idcheckboxes.push(idcheckbox);
                        }
                        if(!$(this).find('input'). is(':checked')){
                            let idcheckbox = $(this).find('input').attr('value');
                            iduncheck.push(idcheckbox);
                        }

                  
                    })
                   
                    if(idcheckboxes.length == 0) {
                        idcheckboxes = [];
                    }

                    if(iduncheck.length == 0) {
                        iduncheck = [];
                    }

                    var idcheckboxesjson = JSON.stringify(idcheckboxes);
                    var iduncheckjson =     JSON.stringify(iduncheck);

                    // console.log(idcheckboxesjson);
                    // console.log(iduncheckjson);
                 


                    var getUrl = window.location;
                    $.ajax({
                    /* the route pointing to the post function */

                    url: `${getUrl.origin}/admin/user/timesheet/ajaxtitlecategory/update`,
                    type: 'POST',
                    /* send the csrf-token and the input to the controller */
                    data: {_token: CSRF_TOKEN, titleid:idtitle,checkedcheckboxesid:idcheckboxesjson,Uncheckboxesidchecked:iduncheckjson},
                    dataType: 'JSON',
                    /* remind that 'data' is the response of the AjaxController */
                    success: function (data) { 
                        console.log(data);
                        if(data.response == 200) {
                            location.reload();
                        }

                    }
                });
                
                    
                })

         function changesingleTitleandsub(classdrpchain){
             $(`.${classdrpchain} a`).click(function(e){
                 e.preventDefault();
                    if(classdrpchain == 'drpChainUpSubTitle' ){
                        $('.containerdrpChainUpSubTitle').css('display','block');
                        var getSubTitleid = $(this).attr('id');
                        var getSubTitle = $(this).html();
                        $(".containerdrpChainUpSubTitle").find('.subtitleinp').find('input').val(getSubTitle);
                        $(".containerdrpChainUpSubTitle").find('.subtitleinp').find('.subtitleid').val(getSubTitleid);


                    }else if(classdrpchain == 'drpChainUpTitle') {
                        $('.containerdrpChainUpTitle').css('display','block');
                        var getTitle = $(this).html();
                        var getTitleid = $(this).attr('id')
                        $(".containerdrpChainUpTitle").find('.titleinp').find('input').val(getTitle);
                        $(".containerdrpChainUpTitle").find('.titleinp').find('.titleid').val(getTitleid);
                    }


             })
         }

         changesingleTitleandsub('drpChainUpSubTitle');
         changesingleTitleandsub('drpChainUpTitle');


        
 
     })
 </script>
@endsection