@extends('layouts.admin')
@section('content')
<link href="{{ URL::asset('/css/treeview.css') }}" media="all" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="{{ URL::asset('plugins/tinymce4.1/tinymce.min.js') }}"></script>
<link href="{{ URL::asset('css/select2.css') }}" media="all" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="{{ URL::asset('js/select2.min.js') }}"></script>
<div class="pageheader">
    <div class="media">
        <div class="media-body">
            <h4>@lang('Manage Departments')</h4>
            <ul class="breadcrumb">
                <li><a href="{{ URL::to('admin/dashboard') }}"><i class="fa fa-home"></i> @lang('messages.Home')</a></li>
                <li>@lang('Departments')</li>
            </ul>
        </div>
    </div>
</div>

<div class="col-md-12" style="padding:5px 20px">
    <div class="row">
        <div class='col-md-3'>
            <p></p>
        </div>
<div class='card col-md-12' style="padding:40px;    min-height: 700px;">
    <div class="row">
        <div class="col-md-5">
            <div class='form-group'>
                <div class='control-label col-md-3'>
                    {{ Form::label('hospitals', trans('messages.Hospitals')) }}<span class='required asterisk' aria-required='true'>*</span>
                </div>
                <div class='col-md-9'>
                    <select id='hospitals' class='select2' name='hospitals'>
                        @if(!empty($hospitals))
                            <option value=''>@lang('messages.Select Hospitals')</option>
                            @foreach($hospitals as $hsp)
                                <option value='{{$hsp->id}}'>{{$hsp->name}}</option>
                            @endforeach
                        @else
                            <option value=''>@lang('messages.No Hospitals')</option>
                        @endif
                    </select>
                </div>
            </div>
        </div>

    <div class="col-md-7">
        <div class='form-group'>
            <div class='control-label col-md-3'>
                {{ Form::label('speciality', trans('Speciality')) }}<span class='required asterisk' aria-required='true'>*</span>
            </div>
            <div class='col-md-9'>
                <select id='speciality' class='select2'  name='speciality[]'>
                    <option value="">select Hospital first</option>
                </select>
            </div>
        </div>
    </div>
</div>




<div class="col-md-12">
    <table id="customer-table" class="table table-striped table-bordered responsive" style="margin-top:75px">
        <thead>
            <tr class="headings">
                <th colspan="3" style="    text-align: center;background-color: #f5fffa;border: 1px solid #d3e2dc;">Doctor sorting list of a department</th>
            </tr>
        <tr class="headings">
           
            <th>@lang('SORT Order')</th>
            <th>@lang('Doctor ID')</th>
            <th>@lang('Doctor Name')</th>
        </tr>
        </thead>
        <tbody id="tabledoctors">
        </tbody>
    </table>




<button class="btn btn-default" style="position: absolute;left :46%; min-width:100px" id="changeorder"> Change/Add the Order</button>

</div>











<div class='col-md-12' style="margin-top:60px" id="docorderselect">
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-8">
            <div class="row">
            <div class="col-md-10">
                <p> Please select doctors in desired order here </p>
                <select id='doctors' class='select2' multiple name='doctors[]'> </select> </div></div>
        </div>
    </div>
    <button id="submitbtn" class="btn btn-success submitbtn " style="position: relative;left :46%; min-width:170px;margin-top :50px"> Save Changes  </button>
    </div>




</div>

{{-- <div class="col-md-3 buttons_block">
    @if(IzoCommonHelper::hasPermission('category_management_add'))
    <div class="btn-group mr5">
        <a class="btn btn-primary tip" href="javascript:;" id="add_main_category" title="@lang('Add Main Department')">@lang('Add Main Department')</a>
    </div>
    @endif
</div> --}}
</div>
</div>
{{-- <div class="content" >
    <div  id="categorycontent">
  
    </div>
    <div  id="categorycontent1">
  
    </div>
</div> --}}
<div class="pt-3">&nbsp;</div>
<script type="text/javascript" src="{{ URL::asset('/js/treeview.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('/js/jquery.lazy.min.js') }}"></script>
<script type="text/javascript">
    // $(window).on('load', function () {
    //     tinymce.init({
    //         menubar: false, statusbar: true, plugins: [
    //             "advlist autolink lists link image charmap print preview hr anchor pagebreak code",
    //             "emoticons template paste textcolor colorpicker textpattern"
    //         ],
    //         toolbar1: "code | insertfile undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image preview | forecolor backcolor | fontsizeselect",
    //         height: '450px',
    //         selector: "textarea.content_english"
    //     });
    // });

$('#tree1').treed();
$(function() {
    $('.lazy').lazy({
        combined: true,
        delay: 5000
    });
});



        
// $('#doctors').select2();

$(document).ready(function() {
    $('#hospitals').select2();
    $('#speciality').select2();
    $('#doctors').select2();
    $('#all_images').hide();
    $('#docorderselect').hide();
    $('#content_english').hide();
    $("#doctors").on("select2:select", function (evt) {
                var element = evt.params.data.element;
  var $element = $(element);
  $element.detach();
  $(this).append($element);
  $(this).trigger("change");
});
    $('#hospitals').change(function (e) {
        e.preventDefault();
        var token, url, data;
        hospital_id = $(this).val();
        $("#speciality").select2('val', '');
        token = $('meta[name="csrf-token"]').attr('content');
        url = '{{url('admin/categories/hospital-specialities')}}';
        data = {hospital_id: hospital_id};
        if (hospital_id == '') {
            $('#speciality').empty();
            $('#speciality').append($("<option></option>").attr("value", "").text('Select Hospital First'));
            $('#speciality').val('').trigger("change");
            return false;
        }
        $.ajax({
            url: url,
            headers: {'X-CSRF-TOKEN': token},
            data: data,
            type: 'POST',
            datatype: 'json',
            success: function (resp) {
                $("#speciality").select2('val', '');
                $('#speciality').empty();
                $('#tabledoctors').hide();
                if (resp.http_code != 200) {
                    $('#speciality').append($("<option></option>").attr("value", "").text('No Specialities Found'));
                    $('#speciality').val('').trigger("change");
                } else {
                    $("#speciality").select2('val', '');
                    $('#speciality').append($("<option></option>").attr("value", "").text('Select Speciality'));
                    // $('#speciality').val('').trigger("change");
                    $.each(resp.data, function (key, value) {
                        $('#speciality').append($("<option></option>").attr("value", value['id']).text(value['name']));
                    });
                }
            }
        });
    });

//     $('#speciality').change(function (e) {
//   populatedoctorsinlist();
//       });
// changeorder

$('#speciality').change(function(){
    // populatedoctorsinlist();
    populatedoctors();
});



$("#changeorder").click(function(){
    speciality = $('#speciality').val();
    console.log(speciality);
    if (speciality == '') {

        alert("please select Speciality first");
        return;
    }
    $('#docorderselect').show();
    populatedoctorsinlist();
});


    // $('#speciality').change(function (e) {
        function populatedoctorsinlist() {
        // e.preventDefault();
        var token, url, data;
        speciality =$('#speciality').val();
        token = $('meta[name="csrf-token"]').attr('content');
        url = '{{url('admin/categories/specialities-doctor')}}';
        data = {speciality_id: speciality};
        if (speciality == '') {
            $('#doctors').empty();
            $('#doctors').append($("<option></option>").attr("value", "").text('Select Department First'));
            $('#doctors').val('').trigger("change");
            return false;
        }
        $.ajax({
            url: url,
            headers: {'X-CSRF-TOKEN': token},
            data: data,
            type: 'POST',
            datatype: 'json',
            success: function (resp) {
                $('#doctors').empty();
                if (resp.http_code != 200) {
                    $('#doctors').append($("<option></option>").attr("value", "").text('No Doctors Found'));
                    $('#doctors').val('').trigger("change");
                } else {

                    // $('#doctors').append($("<option></option>").attr("value", "").text('Select doctors'));
                    $('#doctors').val('').trigger("change");
                    $.each(resp.data, function (key, value) {
                        $('#doctors').append($("<option></option>").attr("value", value['doctor_id']).text(value['full_name']));
                    });
                }
            }
        });
    // });
    }


         $('#submitbtn').click(function (e) {

            e.preventDefault();
            var token, url, data;
            speciality = $('#speciality').val();
            doctorz = $('#doctors').val();
            if(speciality =="" || doctorz==""){
                alert("select speciality first")
            } 
            token = $('meta[name="csrf-token"]').attr('content');
            url = '{{url('admin/categories/update_doctor_sort')}}';
            data = {speciality_id: speciality ,doctors:doctorz};

            $.ajax({
                url: url,
                headers: {'X-CSRF-TOKEN': token},
                data: data,
                type: 'POST',
                datatype: 'json',
                success: function (resp) {
                    // $('#doctors').empty();
                    if (resp.http_code == 200) {
                        toastr.success(resp.message);
                        var loc = '{{ url('admin/categories/doctor_sort')}}';
                    $(location).attr('href', loc);
                    } 
                    else {
                        $('#speciality').trigger("change");
                        // populatedoctorsinlist();
                    //     // $('#doctors').append($("<option></option>").attr("value", "").text('Select doctors'));
                    //     $('#doctors').val('').trigger("change");
                    //     $.each(resp.data, function (key, value) {
                    //         $('#doctors').append($("<option></option>").attr("value", value['doctor_id']).text(value['full_name']));
                    //     });
                    }
                }
            });
            });



    // $('#category_form').submit(function(e) {
    //     e.preventDefault();
    //     $('#loader-wrapper').removeClass('loader');
    //     $("#btnSubmit").attr("disabled", true);
    //     $('#btnCancel').attr("disabled", true);
    //     $('#btnSubmit').button('loading');
    //     content_english = tinymce.get('content_english').getContent();
    //     var token, url, data;
    //     token = $('meta[name="csrf-token"]').attr('content');
    //     url = '{{url('admin/categories/update')}}';
    //     data = new FormData(this);
    //     data.append('description', content_english);
    //     $.ajax({
    //         url: url,
    //         headers: {
    //             'X-CSRF-TOKEN': token
    //         },
    //         data: data,
    //         processData: false,
    //         contentType: false,
    //         type: 'POST',
    //         datatype: 'json',
    //         success: function(resp) {
    //             $('#loader-wrapper').addClass('loader');
    //             $("#btnSubmit").attr("disabled", false);
    //             $('#btnCancel').attr("disabled", false);
    //             $('#btnSubmit').button('reset');
    //             if (resp.http_code == 400) {
    //                 err_msg = resp.message.replace(/, \\n /g, '<br>');
    //                 toastr.error(err_msg);
    //             } else if (resp.http_code == 200) {
    //                 toastr.success(resp.message);
    //                 var loc = '{{ url('admin/categories')}}';
    //                 $(location).attr('href', loc);
    //             } else if (resp.http_code == 401) {
    //                 toastr.warning(resp.message);
    //                 var login = '{{ url('admin/login')}}';
    //                 $(location).attr('href', login);
    //             } else if (resp.http_code == 500) {
    //                 toastr.warning(resp.message);
    //             }
    //         },
    //         error: function(err) {
    //             $("#btnSubmit").attr("disabled", false);
    //             $('#btnCancel').attr("disabled", false);
    //             $('#btnSubmit').button('reset');
    //         }
    //     });
    // });
   

});

function populatedoctors() {
    $('#tabledoctors').hide();
            var token, url, data;
                token = $('meta[name="csrf-token"]').attr('content');
        speciality = $('#speciality').val();
        url2 = '{{url('admin/categories/doctor-specialities')}}';
        data2 = {speciality_id: speciality};
        $.ajax({
            url: url2,
            headers: {'X-CSRF-TOKEN': token},
            data: data2,
            type: 'POST',
            datatype: 'json',
            success: function (resp) {
                $('#doctors').empty();
                $('#tabledoctors').empty();
                console.log(resp);
                console.log(resp.data);
                if (resp.http_code == 200) {
                    $('#tabledoctors').show();
                    var html = '';
                    if(resp.data.length >=1){
                    for (var i = 0; i < resp.data.length; i++){
                                var j = i+1;
                    html += '<tr><td>'+j+'</td><td>'+resp.data[i].id+'</td> <td>'+resp.data[i].full_name+'</td> </tr>';    
                }
                        $('#tabledoctors').append(html);
                    }else{
                    abc = '<tr><td colspan="3">NO Doctor sorting Found</td> </tr>';
                    $('#tabledoctors').empty();
                    $('#tabledoctors').append(abc);
                    $('#speciality').trigger("change");
                    // populatedoctorsinlist();

                }
                }  else {
                    $('#tabledoctors').show();
                    abc = '<tr><td colspan="3">NO Doctor sorting Found</td> </tr>';
                    $('#tabledoctors').empty();
                    $('#tabledoctors').append(abc);
                }
            }
        });

}


// $("#hospitals").change(function(){

// var hospitals = $('#hospitals').val();
// var abc = '{{ url('admin/categories/branch') }}';
// var url = abc+'/'+hospitals;
//                 $(location).attr('href', url);
// });


</script>
@endsection