@extends('layouts.main')

@push('styles')
    <link href="{{ asset('elite/bower_components/select2/select2.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('elite/bower_components/icheck/skins/all.css') }}" rel="stylesheet">
@endpush

@section('content')
<div class="row bg-title">
    <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
        <h4 class="page-title">{{ __('clinics.add_clinic') }}</h4>
    </div>
    <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
        <ol class="breadcrumb">
            <li><a href="{{ route('home') }}">{{ __('clinics.dashboard') }}</a></li>
            <li><a href="/clinics/index">{{ __('clinics.clinics') }}</a></li>
            <li class="active">{{ __('clinics.create') }}</li>
        </ol>
    </div>
</div>

<div class="row">
    <div class="col-sm-12">
        @include('clinical_data::clinics.menu')
    </div>
</div>

<div class="row">
    <div class="col-sm-12">
        <!--Flash messages at the top -->
        @include('flash::message')
        <div class="white-box">
            @if (session()->has('streamline_setup'))
                <h3><font color="blue">{{ __('clinics.streamline_setup') }}</font></h3>
                <div class="row">
                    <div class="col-sm-4">
                        {{ Form::open(['route' => 'clinics.store']) }}
                        <div class="form-group" id="optionsList">
                            {{ Form::label('name', __('clinics.clinic_name')) }}
                            {{ Form::text('name', '', ['class' => 'form-control']) }}
                            <div class="help-block with-errors"></div>
                        </div>
                        <a href="#" id="addOption">{{ __('clinics.add_another') }}</a><br><br>
                    </div>
                    <div class="col-sm-4" style="background: #eceeef;">
                        <h4>{{ __('clinics.select_any_from_list') }}</h4>
                        @for($i=0; $i < count($clinics); $i++)
                            <div class="form-group">
                                {{ Form::checkbox('selected_clinics[]', $i, false) }} {{ $clinics[$i]["name"] }} &nbsp;&nbsp;
                            </div>
                        @endfor
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            {{ Form::label('available',__('clinics.is_clinic_available'), ["class"=>'col-md-12']) }}
                            &nbsp;&nbsp;{{ __('clinics.yes') }} {{ Form::radio('available', 1, false, ['class' => 'check form-control', 'data-radio'=>'iradio_flat-green']) }}
                            &nbsp;&nbsp;{{ __('clinics.no') }} {{ Form::radio('available', 0, false, ['class' => 'check form-control', 'data-radio'=>'iradio_flat-green']) }}
                            <div class="help-block with-errors"></div>
                        </div> 
                    </div>
                </div>
                {{ Form::button(__('clinics.next'), ['type'=>'submit','class'=>'btn btn-success waves-effect waves-light m-r-10 next']) }}
                {{ Form::button(__('clinics.skip'),['type'=>'submit','name' => 'skip', 'class'=>'btn btn-default waves-effect waves-light m-r-10']) }}
                {{ Form::close() }}
            @else
                {{ Form::open(['route' => 'clinics.store', 'data-toggle' => 'validator']) }}
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                {{ Form::label('name', __('clinics.clinic_name')) }}
                                {{ Form::text('name', '', ['class' => 'form-control compulsory', 'required']) }}
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                {{ Form::label('clinic_type', __('clinics.clinic_type')) }}
                                {{ Form::select('clinic_type', $clinic_types, 'general', ['class' => 'form-control compulsory', 'required', 'id' => 'clinic_type']) }}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                {{ Form::label('available',__('clinics.is_clinic_available'), ["class"=>'col-md-12']) }}
                                &nbsp;&nbsp;{{ __('clinics.yes') }} {{ Form::radio('available', 1, false, ['class' => 'check form-control', 'data-radio'=>'iradio_flat-green']) }}
                                &nbsp;&nbsp;{{ __('clinics.no') }} {{ Form::radio('available', 0, false, ['class' => 'check form-control', 'data-radio'=>'iradio_flat-green']) }}
                                <div class="help-block with-errors"></div>
                            </div>   
                        </div>
                    </div>

                    {{ Form::button(__('clinics.submit'),['type'=>'submit','class'=>'btn btn-success waves-effect waves-light m-r-10 submit-btn']) }}
                    {{ Form::button(__('clinics.cancel'),['type'=>'reset','class'=>'btn btn-default waves-effect waves-light']) }}
                {{ Form::close() }}
            @endif
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('elite/js/validator.js') }}"></script>
<script src="{{ asset('elite/bower_components/select2/select2.min.js') }}"></script>
<!-- icheck -->
<script src="{{ asset('elite/bower_components/icheck/icheck.min.js') }}"></script>
<script src="{{ asset('elite/bower_components/icheck/icheck.init.js') }}"></script>
<script type="text/javascript">
    $('#clinic_type').select2();

    $(function() {
        $("#addOption").click(function(e) {
            e.preventDefault();
            $("#optionsList").append("<br>");
            $("#optionsList").append("<input type='text' name='other_clinics[]' placeholder='' class='form-control' />");
        });

        $(".next,.submit-btn").click(function (e) { // make sure that all compulsory fields have been filled out
            var empty_compulsory_fields = [];
            $(".compulsory").each(function () {
                if ($(this).val() == "") {
                    var textname = $(this).attr('name');
                    $(this).focus();
                    empty_compulsory_fields.push(textname);
                    $(this).css('border','1px solid #F08080');
                }
            });
            /* check if the array containing empty compulsory fields is not empty then return false */
            if (empty_compulsory_fields.length != 0) {
                alert("<?php echo __('clinics.fill_all_fields'); ?>");
                console.log(empty_compulsory_fields);
                e.preventDefault();
                return false;
            }
        });
    });
</script>
@endpush