@extends('admin.layout')

@section('content')
    <div class="container-fluid" ng-controller="addServiceOptionController">
        @if(session('success_message'))
            <div class="alert alert-success" role="alert">
                {{session('success_message')}}
            </div>
        @endif

        <div class="row">
            <div class="col-md-12">
                <!-- DATA TABLE -->
                <div class="card">
                    <form class="form-horizontal" action="save-service-option" method="post" name="tutorialForm">
                        {{ csrf_field() }}
                        <div class="card-header">
                            <strong>Thêm gói dịch vụ</strong>
                        </div>
                        <div class="card-body card-block">
                            <div class="row form-group">
                                <div class="col col-md-3">
                                    <label for="text-input" class=" form-control-label">Tên gói<em class="red-color">*</em></label>
                                </div>
                                <div class="col-12 col-md-9">
                                    <input type="text" name="name" placeholder="VD: Gói 2 tháng" value="{{old('name')}}" class="form-control @if($errors->has('name'))is-invalid @endif">
                                    @if($errors->has('name'))
                                    <span class="red-color">{{$errors->first('name')}}</span>
                                    @endif
                                </div>
                            </div>

                            <div class="row form-group">
                                <div class="col col-md-3">
                                    <label for="text-input" class=" form-control-label">Mô tả<em class="red-color">*</em></label>
                                </div>
                                <div class="col-12 col-md-9">
                                    <textarea type="text" name="description" placeholder="VD: Bao gồm các mũi tiêm..." class="form-control @if($errors->has('name'))is-invalid @endif">@if(old('description')){{old('description')}}@endif</textarea>
                                    @if($errors->has('description'))
                                        <span class="red-color">{{$errors->first('description')}}</span>
                                    @endif
                                </div>
                            </div>

                            <div class="row form-group">
                                <div class="col col-md-3">
                                    <label for="text-input" class=" form-control-label">Giá <em class="red-color">*</em></label>
                                </div>
                                <div class="col-12 col-md-9">
                                    <input type="number" name="price" placeholder="Giá của gói" value="{{old('price')}}" class="form-control @if($errors->has('price'))is-invalid @endif">
                                    @if($errors->has('price'))
                                        <span class="red-color">{{$errors->first('price')}}</span>
                                    @endif
                                </div>
                            </div>

                            <div class="row form-group">
                                <div class="col col-md-3">
                                    <label for="text-input" class=" form-control-label">Số lượng <em class="red-color">*</em></label>
                                </div>
                                <div class="col-12 col-md-9">
                                    <input type="number" name="quantity" placeholder="Số lượng hàng tồn"
                                           value="{{old('quantity')}}" class="form-control @if($errors->has('quantity'))is-invalid @endif">
                                    @if($errors->has('quantity'))
                                        <span class="red-color">{{$errors->first('quantity')}}</span>
                                    @endif
                                </div>
                            </div>

                            <div class="row form-group">
                                <div class="col col-md-3">
                                    <label for="text-input" class=" form-control-label">Trung tâm<em class="red-color">*</em></label>
                                </div>
                                <div class="col-12 col-md-9">
                                    <select name="service_id" class="form-control"
                                            @if(old('service_id')) ng-init="fetchParentOptions({{old('service_id')}})" @endif
                                            onchange="angular.element(this).scope().fetchParentOptions(event)">
                                        <option value="0" disabled selected>Chọn dịch vụ</option>
                                        @foreach($services as $service)
                                            <option value="{{$service->id}}" @if(old('service_id') && old('service_id') == $service->id) selected @endif>
                                                {{$service->name}}
                                            </option>
                                        @endforeach
                                    </select>
                                    @if($errors->has('service_id'))
                                        <span class="red-color">{{$errors->first('service_id')}}</span>
                                    @endif
                                </div>
                            </div>

                            <div class="row form-group">
                                <div class="col col-md-3">
                                    <label for="text-input" class=" form-control-label">Gói vacxin cha<em class="red-color"></em></label>
                                </div>
                                <div class="col-12 col-md-9" id="parent-select">
                                    <select name="parent" class="form-control" onchange="onSelectParent(event)">
                                        <option value="0" @if(!old('parent'))selected @endif>Không có</option>
                                        <option ng-repeat="option in parentOptions"
                                                ng-value="option.id"
                                                @if(old('parent')) ng-selected="option.id == {{old('parent')}}" @endif
                                        >
                                            {<>option.name<>}
                                        </option>
                                    </select>
                                    {{--<span style="color: #bcb54c">Để trống nếu đây là gói gốc.</span>--}}
                                </div>
                                <script>
                                    function onSelectParent(e) {
                                        var value = e.target.value;
                                        var notifyElement = document.getElementById('input-notify-offset');
                                        if (value == 0) {
                                            notifyElement.removeAttribute('style');
                                        } else {
                                            notifyElement.style.display = 'none';
                                        }
                                    }
                                </script>
                            </div>

                            <div class="row form-group" id="input-notify-offset">
                                <div class="col col-md-3">
                                    <label for="text-input" class=" form-control-label">Số ngày chờ tiêm nhắc lại<em class="red-color">*</em></label>
                                </div>
                                <div class="col-12 col-md-9">
                                    <input type="number" min="0" name="notify_offset" placeholder="" value="{{old('notify_offset')}}" class="form-control @if($errors->has('notify_offset'))is-invalid @endif">
                                    @if(!$errors->has('notify_offset'))
                                        @if(!\Session::has('message_notify_offset'))
                                            <span style="color: #bcb54c">Mỗi trung tâm sẽ có một gói có ngày tiêm nhắc lại bằng 0, tức gói tiêm đầu tiên. Các gói tiêm khác sẽ được thực hiện sau một số ngày nhất định <b>so với gói đầu tiên</b></span>
                                            <br>
                                            <span class="red-color">Số ngày tiêm nhắc lại của các gói tiêm thuộc cùng trung tâm <b>không được trùng lặp</b>.</span>
                                        @else
                                            <span class="red-color">{{\Session::get('message_notify_offset')}}</span>
                                        @endif
                                    @elseif($errors->has('notify_offset'))
                                        <span class="red-color">{{$errors->first('notify_offset')}}</span>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="card-footer text-right">
                            <button type="submit" class="btn btn-primary btn-sm">
                                <i class="fa fa-dot-circle-o"></i> Submit
                            </button>
                            <button type="reset" class="btn btn-danger btn-sm">
                                <i class="fa fa-ban"></i> Reset
                            </button>
                        </div>
                    </form>
                </div>
                <!-- END DATA TABLE -->
            </div>
        </div>

    </div>
@endsection