@extends('layouts.app')

        @section('styles')

        @endsection

            @section('content')

                             <!-- PAGE-HEADER -->
                            <div class="page-header">
                                <h1 class="page-title">Doctors</h1>
                                <div>
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                                        <li class="breadcrumb-item active" aria-current="page">Doctors</li>
                                    </ol>
                                </div>
                            </div>
                            <!-- PAGE-HEADER END -->

                            <!-- ROW-1 OPEN -->
                            @canany(['doctors-create','doctors-edit'])
                            <div class="row">
                                <div class="col-lg-12 col-md-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <h3 class="card-title">Add Doctors</h3>
                                        </div>
                                        <div class="card-body">
                                                <form method="POST" id="createForm" class="myform" enctype="multipart/form-data">  
                                                    <input id="csrf_token" type="hidden" value="{{ csrf_token() }}">
                                                    <input id="news_id" name="news_id" type="hidden" value="">
                                                    
                                                    @csrf
                                                <div class="form-row">
                                                    <div class="col-xl-6 mb-3">
                                                        <label for="validationTooltip01">Department *</label>
                                                        <select class="form-control" name="department" id="department">
                                                            <option value="">Select Department</option>
                                                            @foreach($departments as $dept)
                                                            <option value="{{ $dept->category_id }}">{{ $dept->category_name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-xl-6 mb-3">
                                                        <label for="validationTooltip01">Doctor Name *</label>
                                                        <input data-parsley-required-message="Doctor Name Required" type="text" class="form-control" name="doctor_name" id="doctor_name"
                                                            value="" required>
                                                            
                                                    </div>
                                                    <div class="col-xl-6 mb-3">
                                                        <label for="validationTooltip01">Doctor Name Arabic *</label>
                                                        <input data-parsley-required-message="Doctor Name Required" type="text" class="form-control" name="doctor_name_ar" id="doctor_name_ar"
                                                            value="" required>
                                                            
                                                    </div>
                                                    <div class="col-xl-6 mb-3">
                                                        <label for="validationTooltip01">Doctor Image ({{str_replace(',', 'x', env('SECTION_IMAGE_SIZE'))}}px)*</label>
                                                        <input data-parsley-required-message="Section Image Required" type="file" class="form-control" name="image" id="image"
                                                            value="">
                                                            
                                                    </div>
                                                    <div class="col-xl-6 mb-3">
                                                        <label for="validationTooltip01">Doctor Details *</label>
                                                        <textarea data-parsley-required-message="Section Description Required" type="text" class="form-control" name="doctor_details" id="doctor_details"
                                                            value="" required></textarea>
                                                            
                                                    </div>
                                                    <div class="col-xl-6 mb-3">
                                                        <label for="validationTooltip01">Doctor Details Arabic*</label>
                                                        <textarea data-parsley-required-message="Section Description Required" type="text" class="form-control" name="doctor_details_ar" id="doctor_details_ar"
                                                            value="" required></textarea>
                                                            
                                                    </div>
                                                    <div class="col-xl-6 mb-3">
                                                        <label for="validationTooltip01">Spoken Languages *</label>
                                                        <input data-parsley-required-message="Section Title Required" type="text" class="form-control" name="languages" id="languages"
                                                            value="" required>
                                                            
                                                    </div>
                                                    <div class="col-xl-6 mb-3">
                                                        <label for="validationTooltip01">Spoken Languages (in arabic)*</label>
                                                        <input data-parsley-required-message="Section Title Required" type="text" class="form-control" name="languages_ar" id="languages_ar"
                                                            value="" required>
                                                            
                                                    </div>
                                                    <div class="col-xl-9 mb-3">
                                                        <div class="row" id="append_features_div">
                                                            <input type="hidden" id="appendcount" value="0">
                                                            <div class="col-xl-5 mb-3">
                                                                <label for="validationTooltip01">More Details*</label>
                                                                <textarea data-parsley-required-message="Features Required" type="text" class="form-control" id="more_details" name="more_details[]" value="" required></textarea>
                                                            </div>
                                                            <div class="col-xl-5 mb-3">
                                                                <label for="validationTooltip01">More Details Arabic*</label>
                                                                <textarea data-parsley-required-message="Features Required" type="text" class="form-control" id="more_details_ar" name="more_details_ar[]" value="" required></textarea>
                                                            </div>
                                                            <div class="col-xl-2 mb-3">
                                                                <button style="margin-top: 28px;" onclick="append_features_fn()" type="button" class="btn btn-info">+ Add</button>
                                                            </div>
                                                            
                                                        </div>
                                                    </div>
                                                    
                                                        
                                                        
                                                </div>
                                                @can('doctors-create')
                                                <a id="create_btn" href="#" onclick="createOrUpdate('{{url('/admin/add_service')}}', 'createForm', '', 'table_datatable','')" class="btn custom-btn-success"><i class="fa fa-save"></i> Save</a>
                                                @endcan
                                                @can('doctors-edit')
                                                <a  id="update_btn" style="display: none" href="#" onclick="createOrUpdate('{{url('/admin/update_service')}}', 'createForm', '', 'table_datatable','')" class="btn custom-btn-success"><i class="fa fa-save"></i> Update</a>
                                                @endcan
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                             @endcanany
                            <!-- /ROW-1 CLOSED -->

                               <!-- Row -->
                        @can('doctors-list')
                        <div class="row row-sm">
                            <div class="col-lg-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h3 class="card-title">View Doctors</h3>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive">
                                             <table  class="table table-bordered text-nowrap border-bottom dataTable no-footer " style="width: 100% !important;" id="table_datatable">
                                                <thead class="text-center">
                                                    <tr>
                                                        <th class="wd-15p border-bottom-0">#</th>
                                                        <th class="wd-15p border-bottom-0">Doctor</th>
                                                        <th class="wd-15p border-bottom-0">Department</th>
                                                        <th class="wd-15p border-bottom-0">Languages</th>
                                                        <th class="wd-15p border-bottom-0">Image</th>
                                                        <th class="wd-15p border-bottom-0">Added By</th>
                                                        <th class="wd-10p border-bottom-0">Actions</th>
                                                    </tr>
                                                </thead>
                                               
                                            </table>
                                    
                                            <div class="col-sm-12 col-md-12">                                             
                                        </div>
                                        </div>
                                    </div>
                        

                                </div>
                               
                            </div> 
                        </div> 
                        @endcan
                        <!-- End Row -->

                         <!-- Modal -->
               


                        <div class="modal  fade" id="smallmodal" tabindex="-1" role="dialog">
                            <div class="modal-dialog modal-sm" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Delete</h5>
                                        <button class="btn-close text-danger" data-bs-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">×</span>
                                            </button>
                                    </div>
                                    <div class="modal-body">
                                        <p>Do you want to delete the Doctors ?</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button class="btn custom-btn-warning" data-bs-dismiss="modal">Close</button>
                                        <button onclick="delete_item()" class="btn custom-btn-danger">Delete</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- #########################View Modal################################### --}}
<div class="modal fade show" id="largemodal" tabindex="-1" role="dialog" aria-modal="true" style="display: none;">
            <div class="modal-dialog modal-lg " role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" style="font-weight: bold;" id="view_modal_title">Doctor Details</h5>
                        <button class="btn-close text-danger" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                    </div>
                    <div class="modal-body"  id="view_modal_body">
                        
                    </div>
                    <div class="modal-footer">
                        <button class="btn custom-btn-warning" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
            {{-- #########################End Of View Modal############################ --}}
                        
                        
                        
                        
                        

            @endsection
              @section('scripts')  
{{-- ################################Jquery Datatable########################### --}}
   {{-- <script src="{{asset('assets/jquery-datatable/jquery.min.js')}}"></script> --}}
   <link rel="stylesheet" type="text/css" href="{{asset('assets/jquery-datatable/jquery.dataTables.css?v3')}}">
   <script src="{{asset('assets/jquery-datatable/jquery.dataTables.js')}}"></script>
 {{-- ########################################################################## --}}


<script>
    function append_features_fn(){
        var appedcount = $("#appendcount").val();
        var appedcount = parseInt(appedcount)+1;
        $("#appendcount").val(appedcount);
        $("#append_features_div").append('<div class="col-xl-5 mb-3 remove_new_'+appedcount+' remove_all_serv"><label for="validationTooltip01">More Details*</label><textarea data-parsley-required-message="Features Required" type="text" class="form-control" name="more_details[]" value="" required></textarea></div><div class="col-xl-5 mb-3 remove_new_'+appedcount+' remove_all_serv"><label for="validationTooltip01">More Details Arabic*</label><textarea data-parsley-required-message="Features Arabic Required" type="text" class="form-control" name="more_details_ar[]" value="" required></textarea></div><div class="col-xl-2 mb-3 remove_new_'+appedcount+' remove_all_serv"><button style="margin-top: 28px;" onclick="remove_features_fn('+appedcount+')" type="button" class="btn btn-danger">x</button></div>');
    }
    function remove_features_fn(remove_id){
        $(".remove_new_"+remove_id).remove();
    }
</script>

        <script>
    var token = $("meta[name=csrf-token]").attr("content");  
    var datatable_name="table_datatable";
    $('#table_datatable').DataTable({
        "responsive": true,
       "serverSide": true,
       "ordering": true,
       "searching": true,
       "bLengthChange": true,
       "info":false,
       "bSort": true,
       "order": [
           [0, 'desc']
       ],
       "columnDefs": [{
               "targets": [0,4],
               "orderable": true
           },
           {"className": "text-center", "targets": [0,3,4]},
           {"className": "text-left", "targets": []}
           
       ],
       "displayLength":10,
       "ajax": {
           "url":  "/admin/service_datatable",
           "type": "post",
           "data": function (data) {
                data._token = token;
              
               return data;
  
           }
       }, "AutoWidth": true,
       "columns": [
                  {"data": "service_id", "name": "service_id"},
                  {"data": "service_name", "name": "service_name"},
                  {"data": "category_name", "name": "category_name"},
                  {"data": "features_title", "name": "features_title"},
                  {"data": "service_id", "name": "service_id"},
                  {"data": "name", "name": "name"},
                  {"data": "service_id", "name": "service_id"},
                   ],
      
      "fnCreatedRow": function (nRow, aData, iDataIndex) {
          var info = this.dataTable().api().page.info();
          var page = info.page;
          var length = info.length;
          var index = (page * length + (iDataIndex + 1));
          var action="";

          var image='<a href="/uploads/services/'+aData.section_image+'" target="_blank"><img style="width:102px;" src="/uploads/services/'+aData.section_image+'"></a>';
          
            var action=action+'&nbsp;<button title="View"  onclick=View('+aData.service_id+') id="bEdit" type="button" class="btn btn-sm custom-btn-success"><span class="fe fe-eye"> </span></button>';
            //Edit Action
            @can('doctors-edit')
            var action=action+'&nbsp;<button title="Edit"  onclick=edit('+aData.service_id+') id="bEdit" type="button" class="btn btn-sm custom-btn-info"><span class="fe fe-edit"> </span></button>';
            @endcan
            //Delete Action
            @can('doctors-delete')
            var action=action+'&nbsp;<button title="Delete" onclick="delete_modal('+aData.service_id+')" id="bDel" type="button" class="btn  btn-sm custom-btn-danger"><span class="fe fe-trash-2"> </span></button>';
            @endcan
            $('td:eq(0)', nRow).html(index);
            $('td:eq(4)', nRow).html(image);
            $('td:eq(6)', nRow).html(action);
 }
 });

       // #################### Edit Section ############################
                function edit(id){
                $.ajax({
                    type: 'POST',
                    data: {"_token": token,"id": id},
                    url: '/admin/edit_service',
                    success: function (result) {
                        console.log(result);
                        $('#news_id').val(result.service_id);
                        $('#department').val(result.department);
                        $('#doctor_name').val(result.service_name);
                        $('#doctor_name_ar').val(result.service_name_ar);
                        $('#doctor_details').val(result.section_description);
                        $('#doctor_details_ar').val(result.section_description_ar);
                        $('#languages').val(result.features_title);
                        $('#languages_ar').val(result.features_title_ar);
                        var feaures_string = result.features;
                        var features_array = result.features.split("||,,||");
                        var features_ar_array = result.features_ar.split("||,,||");
                        var arraycount = features_array.length;

                        $("#appendcount").val(arraycount);
                        for (var i = 0; i < arraycount; i++)
                        {
                            if(i==0){
                                $("#more_details").val(features_array[i]);
                                $("#more_details_ar").val(features_ar_array[i]);
                            }
                            else{
                                $("#append_features_div").append('<div class="col-xl-5 mb-3 remove_new_'+i+' remove_all_serv"><label for="validationTooltip01">More Details*</label><textarea data-parsley-required-message="Features Required" type="text" class="form-control" name="more_details[]" required>'+features_array[i]+'</textarea></div><div class="col-xl-5 mb-3 remove_new_'+i+' remove_all_serv"><label for="validationTooltip01">More Details Arabic*</label><textarea data-parsley-required-message="Features Arabic Required" type="text" class="form-control" name="more_details_ar[]" value="" required>'+features_ar_array[i]+'</textarea></div><div class="col-xl-2 mb-3 remove_new_'+i+' remove_all_serv"><button style="margin-top: 28px;" onclick="remove_features_fn('+i+')" type="button" class="btn btn-danger">x</button></div>');
                            }
                        }
                        $('#create_btn').hide();
                        $('#update_btn').show();
                        $("#image").attr("required", false);
                        $('#back-to-top').click();
                        
                        }
                })
                }
      // #################### End Of Edit Section ####################


                function View(id){
                    $.ajax({
                        type: 'POST',
                        data: {"_token": token,"id": id},
                        url: '/admin/view_service',
                        success: function (result) {    
                           $('#view_modal_body').html(result);
                           $('#largemodal').modal('show');
                        }
                    })
                }


     // #################### Delete Section ##########################
                    function delete_modal(id){
                    $('#news_id').val(id);
                    $('#smallmodal').modal('show');
                    }
                    function delete_item(){
                    var id=$('#news_id').val();
                    $.ajax({
                        type: 'POST',
                        data: {"_token": token,"id": id},
                        url: '/admin/delete_service',
                        success: function (result) {
                        $('#smallmodal').modal('hide');
                        toast(result,datatable_name);
                        }
                    })
                    }
     // #################### End Of Delete Section ##################


        </script>
        @endsection