@extends('app')

@section('extra-css')
    <link rel="stylesheet" href="{{asset('assets/bower_components/fullcalendar/dist/fullcalendar.min.css')}}">
    <style>
        .day-highlight {
            background-color: #2874a0 !important;
            color: red !important;
        }

        .fc-today {
            background: yellow !important;
            border: none !important;
            border-top: 1px solid #ddd !important;
            font-weight: bold;
        }
    </style>
@endsection

@section('content-header')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            Add Scheduler
        </h1>
        <ol class="breadcrumb">
            <li><a href="{{url('/')}}"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="#">Outdoor</a></li>
            <li class="active">Add Doctor Appointment</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">
                    <a href="{{route('get.doctor.appointment.list')}}" class="btn btn-info btn-md">
                        <i class="fa fa-hand-o-left"></i>&nbsp;
                        View Doctor Appointment
                    </a>
                </h3>

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

                @isset($appointment)
                    @include('common.confirmed-message')
                @endisset

                <form action="{{route('save.doctor.appointment')}}" id="myForm" role="form"
                      method="post" accept-charset="utf-8" enctype="multipart/form-data">
                    {{csrf_field()}}
                    <div class="row">
                        <div class="col-md-8 calendar-page-content">
                            <div id="calendar"></div>
                        </div>
                        <div class="col-md-4">
                            <div id="appointmentResponse">

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

                    <div class="row">
                        <div class="col-md-12 text-center" style="padding-top: 23px;">
                            <a class="btn btn-primary" data-toggle="modal" href="#modal"
                               onclick="loadModal('outdoor/view-doctor-list')">
                                <i class="fa fa-user-md"></i>
                                &nbsp; Doctor List
                            </a>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6" style="margin-top: 30px">
                            <div class="form-group">
                                <label for="designation" class="col-md-2">Select Department:</label>
                                <div class="col-md-10">
                                    {!! Form::select('department_id',
                                    $departments
                                    ,null, ['class'=>
                                    'form-control', 'id'=>'department_id', 'required', 'placeholder'=>
                                    'Please Select Department']) !!}

                                    <div class="help-block with-errors"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6" style="margin-top: 30px">
                            <div class="form-group">
                                <label for="designation" class="col-md-2">Select Doctor:</label>
                                <div class="col-md-10">
                                    {!! Form::select('user_id',
                                          $doctors
                                          ,null, ['class'=> 'form-control', 'required', 'placeholder'=>
                                          'Please Select Doctor', 'id'=>'user_id']) !!}
                                    <div class="help-block with-errors"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6" style="margin-top: 30px">
                            <label for="designation" class="col-md-2">Patient Name:</label>

                            <div class="col-md-10">
                                <input type="text" id="searchPatient" name="patient_name"
                                       class="form-control search-field" required
                                       placeholder="Search Patient name">
                                <input type="hidden" name="patient_id" id="patient_id">
                            </div>
                        </div>

                        <div class="col-md-6" style="margin-top: 30px">
                            <div id="service_content">
                                <label for="designation" class="col-md-2">Select Gender:</label>

                                <div class="col-md-10">
                                    {{ Form::label("Male", null, ['class' => 'control-label']) }}
                                    {{Form::radio('gender', '1', true)}}
                                    {{ Form::label("Female", null, ['class' => 'control-label']) }}
                                    {{Form::radio('gender', '2')}}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6" style="margin-top: 30px">
                            <label for="designation" class="col-md-2">Patient Age:</label>
                            <div class="col-md-10">
                                <input type="text" name="patient_age" id="patient_age"
                                       class="form-control" placeholder="Patient Age">
                            </div>
                        </div>
                        <div class="col-md-6" style="margin-top: 30px">
                            <label for="designation" class="col-md-2">Phone Number:</label>

                            <div class="col-md-10">
                                <input type="text" name="user_phone" id="user_phone"
                                       class="form-control"
                                       placeholder="Patient Phone Number">
                            </div>
                        </div>
                    </div>
                </form>


            </div>

        </div>

    </section>

@endsection

@section('extra-js')
    <script src="{{URL::to('assets/plugins/typeahead.bundle.js')}}"></script>
    <script src="{{asset('assets/bower_components/moment/moment.js')}}"></script>
    <script src="{{asset('assets/bower_components/fullcalendar/dist/fullcalendar.min.js')}}"></script>
@endsection

@section('script')

    <script>
        $(document).ready(function () {

            $('#calendar').fullCalendar({
                aspectRatio: 2.5,
                header: {
                    left: 'prev,next',
                    center: 'title'
                },
                defaultView: 'month',
                defaultDate: moment(new Date(), 'DD.MM.YYYY').format('YYYY-MM-DD'),
                selectable: true,
                selectOverlap: false,
                navLinks: false,
                selectHelper: true,
                dayClick: function (date, jsEvent, view) {
                    $(".day-highlight").removeClass("day-highlight");
                    $(this).addClass("day-highlight");
                    var doc_id = $('select[name=user_id]').val();
                    $('#appointmentResponse').removeClass("animated bounceInRight");
                    $('#appointmentResponse').addClass("animated bounceOutRight");
                    $("#appointmentResponse").empty();
                    $.ajax({
                        type: "GET",
                        data: {doctor_id: doc_id, schedule_date: date.format()},
                        url: "{{route('get.doctor.appointment.log')}}", //here we are calling our user controller and  method with the id
                        success: function (data) //we're calling the response json array 'categories'
                        {
                            $("#appointmentResponse").append(data.view);
                            $('#appointmentResponse').removeClass("animated bounceOutRight");
                            $('#appointmentResponse').addClass("animated bounceInRight");
                        }
                    });
                },
                select: function (start, end, allDay) {
//                    console.log(start);
                    if (start.add(1, 'days').date() != end.date()) {
                        $scope.eventCal.fullCalendar('unselect');
                    }
                },
                editable: false,
                eventLimit: true
            });

            var baseUrl = '