@extends('app')

@section('extra-css')
    <link rel="stylesheet" href="{{URL::to('assets/plugins/smartwizard/css/smart_wizard.css')}}">
    <link rel="stylesheet" href="{{URL::to('assets/plugins/smartwizard/css/smart_wizard_theme_arrows.css')}}">
@endsection

@section('content-header')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            Edit Scheduler
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="#">HR</a></li>
            <li class="active">Edit Scheduler</li>
        </ol>
    </section>
@endsection

@section('content')

    <!-- Main content -->
    <section class="content">
        <!-- SELECT2 EXAMPLE -->
        <div class="box box-info">

            <div class="box-header with-border">
                <h3 class="box-title">
                    @can('schedule-view')
                        <a href="{{route('hr.schedule')}}" class="btn btn-info btn-md">
                            <i class="fa fa-hand-o-left"></i>&nbsp;
                            View Schedule
                        </a>
                    @endcan
                </h3>

            </div>
            <!-- /.box-header -->
            <div class="box-body">

                <div class="row">

                    <div class="col-md-12">

                        @canany(['schedule-edit','schedule-update'])
                            <form action="{{route('hr.update-schedule.post')}}" id="myForm" role="form"
                                  data-toggle="validator"
                                  method="post" accept-charset="utf-8" novalidate="true" enctype="multipart/form-data">
                                <!-- SmartWizard html -->

                                {{csrf_field()}}

                                <input type="hidden" value="{{$schedule->schedule_id}}" name="schedule_id">

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="designation" class="col-md-2">Designation:</label>
                                        <div class="col-md-10">
                                            {!! Form::select('user_id',
                                            $doctors
                                            ,$schedule->user_id, ['class'=>
                                            'form-control','placeholder'=>
                                            'Please Select Doctor']) !!}

                                            <div class="help-block with-errors"></div>
                                        </div>

                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="gender" class="col-md-2">Day:</label>
                                        <div class="col-md-10">
                                            {!! Form::select('schedule_date',
                                            [
                                            'Saturday'=>'Saturday',
                                            'Sunday'=>'Sunday',
                                            'Monday'=>'Monday',
                                            'Tuesday'=>'Tuesday',
                                            'Wednesday'=>'Wednesday',
                                            'Thursday'=>'Thursday',
                                            'Friday'=>'Friday',
                                            ]
                                            ,$schedule->schedule_date, ['class'=> 'form-control','placeholder'=>
                                            'Please Select Gender']) !!}
                                            <div class="help-block with-errors"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="designation" class="col-md-2">Schedule</label>
                                        <div class="col-md-10">
                                            <button type="button" onclick="addRowForTimePicker(); return false;"
                                                    class="btn btn-primary pull-left"
                                                    style="margin-right: 0px;">
                                                Add
                                            </button>
                                            <div class="help-block with-errors"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="designation" class="col-md-2"></label>
                                        <div class="col-md-10">
                                            <table class="table table-hover" id="firstTable">
                                                <tbody>
                                                <tr>
                                                    <th>Start Time</th>
                                                    <th>End Time</th>
                                                    <th>Visitor</th>
                                                    <th>-</th>
                                                </tr>
                                                                                                @foreach($schedule->scheduleslots as $slot)

                                                    <tr class="row_to_clone_first">


                                                        <td>
                                                            <input name="start_time[{{$i}}]" type="text"
                                                                   value="{{$slot->start_time}}"
                                                                   class="bootstrap-timepicker form-control timepicker"/>

                                                            <input type="hidden" name="schedule_slot_id[{{$i}}]"
                                                                   value="{{$slot->schedule_slot_id}}">
                                                        </td>

                                                        <td>
                                                            <input name="end_time[{{$i}}]" type="text"
                                                                   value="{{$slot->end_time}}"
                                                                   class="bootstrap-timepicker form-control timepicker"/>
                                                        </td>

                                                        <td>
                                                            <input name="visitor_limit[{{$i}}]" type="text"
                                                                   value="{{$slot->visitor_limit}}"
                                                                   class="form-control"/>
                                                        </td>

                                                        <td>
                                                            {{-- <button type="submit" onclick="deleteFirstRow(this); return false;">
                                                                <i class="fa fa-trash"></i>
                                                            </button> --}}
                                                            {{-- @canany(['schedule-edit','schedule-update'])
                                                                <a href="javascript:;" class="btn btn-success btn-xs"
                                                                style="@if($slot->status == 1) display: none; @endif"
                                                                onclick="updateStatus('active','schedule-slot',{{$slot->schedule_slot_id}})">
                                                                    <i class="fa fa-check-square-o" title="Active"></i>
                                                                </a>
                                                                <a href="javascript:;" class="btn btn-warning btn-xs"
                                                                style="@if($slot->status == 0) display: none; @endif"
                                                                onclick="updateStatus('inactive','schedule-slot',{{$slot->schedule_slot_id}})">
                                                                    <i class="fa fa-ban" title="Inactive"></i>
                                                                </a>
                                                                <a href="#"
                                                                    class="btn btn-info btn-xs" style="display: none" id="reference_{{$slot->schedule_slot_id}}">
                                                                     <i class="fa fa-edit" title="Edit"></i>
                                                                 </a>
                                                            @endcanany --}}
                                                        </td>

                                                        
                                                    </tr>

                                                @endforeach


                                                </tbody>
                                            </table>
                                            <div class="help-block with-errors"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <button type="submit" class="btn btn-info pull-right">Update</button>
                                </div>


                            </form>
                        @endcanany
                    </div>


                </div>
            </div>

        </div>

    </section>

@endsection

@section('extra-js')
    <script src="{{URL::to('assets/plugins/validator/validator.min.js')}}"></script>
    <script src="{{URL::to('assets/plugins/smartwizard/js/jquery.smartWizard.js')}}"></script>
    <script src="{{URL::to('assets/dist/js/addrow-v2.js')}}"></script>
@endsection

@section('script')
    <script type="text/javascript">
        $(document).ready(function () {

            var btnFinish = $('<button></button>').text('Finish')
                .addClass('btn btn-info')
                .on('click', function () {
                    if (!$(this).hasClass('disabled')) {
                        var elmForm = $("#myForm");
                        if (elmForm) {
                            elmForm.validator('validate');
                            var elmErr = elmForm.find('.has-error');
                            if (elmErr && elmErr.length > 0) {
                                alert('Oops we still have error in the form');
                                return false;
                            } else {
                                alert('Great! we are ready to submit form');
                                elmForm.submit();
                                return false;
                            }
                        }
                    }
                });
            var btnCancel = $('<button></button>').text('Cancel')
                .addClass('btn btn-danger')
                .on('click', function () {
                    $('#smartwizard').smartWizard("reset");
                    $('#myForm').find("input, textarea").val("");
                });
            // Smart Wizard
            $('#smartwizard').smartWizard({
                selected: 0,
                theme: 'dots',
                transitionEffect: 'fade',
                toolbarSettings: {
                    toolbarPosition: 'bottom',
                    toolbarButtonPosition: 'right',
                    toolbarExtraButtons: [btnFinish, btnCancel]
                },
                anchorSettings: {
                    markDoneStep: true, // add done css
                    markAllPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
                    removeDoneStepOnNavigateBack: true, // While navigate back done step after active step will be cleared
                    enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
                }
            });

            $("#smartwizard").on("leaveStep", function (e, anchorObject, stepNumber, stepDirection) {
                var elmForm = $("#form-step-" + stepNumber);
                // stepDirection === 'forward' :- this condition allows to do the form validation
                // only on forward navigation, that makes easy navigation on backwards still do the validation when going next
                if (stepDirection === 'forward' && elmForm) {
                    elmForm.validator('validate');
                    var elmErr = elmForm.children('.has-error');
                    if (elmErr && elmErr.length > 0) {
                        // Form validation failed
                        return false;
                    }
                }
                return true;
            });

            $("#smartwizard").on("showStep", function (e, anchorObject, stepNumber, stepDirection) {
                // Enable finish button only on last step
                if (stepNumber == 3) {
                    $('.btn-finish').removeClass('disabled');
                } else {
                    $('.btn-finish').addClass('disabled');
                }
            });

            //Date picker
            $('.datepicker').datepicker({
                autoclose: true
            });

        });

        function updateStatus(action, url, id) {
            var reference = $("#reference_" + id);
            if (action == 'delete') {
                if (!confirm('Do you want to Delete ?')) {
                    return false;
                }
            }
            var baseUrl = "{{URL::to('/hr/')}}";

            $.ajax({
                url: baseUrl + '/update-' + url + '-status/' + action + '/' + id,
                method: "GET",
                dataType: 'json',
                success: function (data) {
                    if (data.success == true) {
                        if (action == 'active') {
                            // reference.
                            reference.prev().show().prev().hide();
                            reference.parent().prev().children().next().show().prev().hide();
                        } else if (action == 'inactive') {
                            reference.prev().hide().prev().show();
                            reference.parent().prev().children().next().hide().prev().show();
                        }

                        $('.box-body-second').show();
                        $('.messageBodySuccess').slideDown(1000).delay(3000).slideUp(1000).children().next().html(data.message);
                    } else {
                        $('.box-body-second').show();
                        $('.messageBodyError').slideDown(1000).delay(3000).slideUp(1000).children().next().html(data.message);
                    }
                },
                error: function (data) {
                    $('.box-body-second').show();
                    $('.messageBodyError').slideDown(1000).delay(3000).slideUp(1000).children().next().html(data.message);
                }
            });
        }


        function PrescriptionFeeAction() {
            if (document.getElementById('allow_fee').checked) {
                document.getElementById('prescription_fee').style.display = 'block';
            } else {
                document.getElementById('prescription_fee').style.display = 'none';
            }
        }


        function doctorCommision() {
            document.getElementById('comission_fee').style.display = 'block';
        }

    </script>

@endsection