@extends('admin.layouts.default')

@section('header_styles')
    <link href="{{ asset('admin_assets/plugins/bootstrap-toggle/css/bootstrap-toggle.min.css') }}" rel="stylesheet">
    <style>
        .hide{
            display: none;
        }
    </style>
@endsection

@section('content')

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                    <div class="col-12">
                        <div class="card">
                            @if(session()->has('message'))
                                <div class="alert alert-success">
                                    {{ session()->get('message') }}
                                </div>
                            @endif

                            @if ($errors->any())
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                            <div class="card-header p-2">
                                <ul class="nav nav-pills">
                                    <li class="nav-item"><a class="nav-link active" href="#restaurants"
                                                            data-toggle="tab">Restaurant</a></li>
                                    <li class="nav-item"><a class="nav-link" href="#owners" data-toggle="tab">Onwer</a></li>

                                </ul>
                            </div><!-- /.card-header -->
                            <form method="post" action="#">
                                {{ csrf_field() }}
                            <div class="card-body">
                                <div class="tab-content">
                                    <div class="active tab-pane" id="restaurants">
                                        <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group row">
                                                <div class="col-sm-3">
                                                    <label for="exampleInputName">Name <span style="color:red">*</span></label>
                                                </div>
                                                <div class="col-sm-8">
                                                    <input type="text" name="name" tabindex="1" class="form-control" value="{{ old('name') }}" id="exampleInputName" placeholder="Restaurant Name" autocomplete="off">
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <div class="col-sm-3">
                                                    <label for="exampleInputAddress">Address <span style="color:red">*</span></label>
                                                </div>
                                                <div class="col-sm-8">
                                                    <input type="text" name="address" tabindex="5" class="form-control" value="{{ old('address') }}" id="exampleInputAddress" placeholder="Enter Address" autocomplete="off">
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <div class="col-sm-3">
                                                    <label>Country <span style="color:red">*</span></label>
                                                </div>
                                                <div class="col-sm-8">
                                                    <select class="form-control select2" tabindex="9" id="country" name="country" style="width: 100%;" autocomplete="off">
                                                        <option value="">Select Country</option>
                                                        @foreach($countries as $country)
                                                            <option value="{{ $country->id }}"
                                                            @if(old('country') == $country->id)
                                                                {{ 'selected=selected' }}
                                                                @endif
                                                            >{{ $country->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <div class="col-sm-3">
                                                    <label>City <span style="color:red">*</span></label>
                                                </div>
                                                <div class="col-sm-8">
                                                    <select class="form-control select2" tabindex="11" name="city" id="city" style="width: 100%;" autocomplete="off">
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <div class="col-sm-3">
                                                    <label for="exampleInputPCode">Postal Code <span style="color:red">*</span></label>
                                                </div>
                                                <div class="col-sm-8">
                                                    <input type="text" name="postal_code" tabindex="13" value="{{ old('phone') }}" class="form-control" id="exampleInputPCode" placeholder="Enter Postal Code" autocomplete="off">
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <div class="col-sm-3">
                                                    <label for="exampleInputLongitude">Longitude</label>
                                                </div>
                                                <div class="col-sm-8">
                                                    <input type="text" name="longitude" tabindex="15" class="form-control" value="{{ old('longitude') }}" id="exampleInputLongitude" placeholder="Enter Longitude" autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <div class="col-sm-3">
                                                    <label for="exampleInputLatitude">Latitude</label>
                                                </div>
                                                <div class="col-sm-8">
                                                    <input type="text" name="latitude" tabindex="17" class="form-control" value="{{ old('latitude') }}" id="exampleInputLatitude" placeholder="Enter Latitude" autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <div class="col-sm-3">
                                                    <label for="exampleInputTimezone">Timezone</label>
                                                </div>
                                                <div class="col-sm-8">
                                                    <input type="text" name="timezone" tabindex="19" class="form-control" value="{{ old('timezone') }}" id="exampleInputTimezone" placeholder="Enter Timezone" autocomplete="off">
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <div class="col-sm-4">
                                                    <label for="exampleInputTimezone">Reservation Status</label>
                                                </div>
                                                <div class="col-sm-8">
                                                    <input type="checkbox" name="reservation_status" value="0"
                                                           data-bootstrap-switch
                                                           data-off-color="danger" data-on-color="success">
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <div class="col-sm-4">
                                                    <label for="exampleInputTimezone">Status</label>
                                                </div>
                                                <div class="col-sm-8">
                                                    <input type="checkbox" name="status" value="0"
                                                           data-bootstrap-switch
                                                           data-off-color="danger" data-on-color="success">
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <div class="col-sm-4">
                                                    <label for="exampleInputTaxIncluded">Feedback Status</label>
                                                </div>
                                                <div class="col-sm-8">
                                                    <input type="checkbox" name="feedback_status" value="0"
                                                           data-bootstrap-switch
                                                           data-off-color="danger" data-on-color="success">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="form-group row">
                                                <div class="col-sm-4">
                                                    <label for="exampleInputEmail">Email <span style="color:red">*</span></label>
                                                </div>
                                                <div class="col-sm-8">
                                                    <input type="email" name="email" tabindex="4" class="form-control" value="{{ old('email') }}" id="exampleInputEmail" placeholder="Enter Email" autocomplete="off">
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <div class="col-sm-4">
                                                    <label for="exampleInputPhone">Phone <span style="color:red">*</span></label>
                                                </div>
                                                <div class="col-sm-8">
                                                    <input type="text" name="phone" tabindex="7" class="form-control"  value="{{ old('phone') }}" id="exampleInputPhone" placeholder="Enter Phone" autocomplete="off">
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <div class="col-sm-4">
                                                    <label>States <span style="color:red">*</span></label>
                                                </div>
                                                <div class="col-sm-8">
                                                    <select class="form-control select2" tabindex="10" id="state" name="state" style="width: 100%;" autocomplete="off">
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <div class="col-sm-4">
                                                    <label for="exampleInputFile">Logo</label>
                                                </div>
                                                <div class="col-sm-8">
                                                    <div class="input-group">
                                                        <div class="custom-file">
                                                            <input type="file" tabindex="6" class="custom-file-input" name="logo" id="exampleInputFile">
                                                            <label class="custom-file-label" for="exampleInputFile">Choose file</label>
                                                        </div>

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

                                            <div class="form-group row">
                                                <div class="col-sm-4">
                                                    <label for="exampleInputWebsite">Website</label>
                                                </div>
                                                <div class="col-sm-8">
                                                    <input type="text" name="website" tabindex="8" class="form-control" value="{{ old('website') }}" id="exampleInputWebsite" placeholder="Enter your Website" autocomplete="off">
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <div class="col-sm-4">
                                                    <label for="exampleInputSupportEmail">Support Email <span style="color:red">*</span></label>
                                                </div>
                                                <div class="col-sm-8">
                                                    <input type="email" name="support_email" tabindex="12" class="form-control" value="{{ old('support_email') }}" id="exampleInputSupportEmail" placeholder="Enter Your Support Email" autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <div class="col-sm-4">
                                                    <label for="exampleInputSupportMobile">Support Mobile <span style="color:red">*</span></label>
                                                </div>
                                                <div class="col-sm-8">
                                                    <input type="text" name="support_mobile" tabindex="14" class="form-control" value="{{ old('support_mobile') }}" id="exampleInputSupportMobile" placeholder="Enter Your Support Mobile" autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <div class="col-sm-4">
                                                    <label for="exampleInputNotiEmail">Online Notification Email <span style="color:red">*</span></label>
                                                </div>
                                                <div class="col-sm-8">
                                                    <input type="email" name="online_notification_email" tabindex="16" class="form-control" value="{{ old('online_notification_email') }}" id="exampleInputNotiEmail" placeholder="Enter Online Notification Email" autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <div class="col-sm-4">
                                                    <label for="exampleInputOfflineNotiEmail">Offline Notification Email <span style="color:red">*</span></label>
                                                </div>
                                                <div class="col-sm-8">
                                                    <input type="email" name="offline_notification_email" tabindex="18" class="form-control" value="{{ old('offline_notification_email') }}" id="exampleInputOfflineNotiEmail" placeholder="Enter Offline Notification Email" autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <div class="col-sm-3">
                                                    <label for="exampleInputTaxIncluded">Tax Included</label>
                                                </div>
                                                <div class="col-sm-8">
                                                    <input type="checkbox" class="form-control" id="tax_included" data-toggle="toggle">
                                                </div>
                                            </div>

                                            <div class="form-group row hide" id="tax_rate">
                                                <div class="col-sm-4">
                                                    <label for="exampleInputTaxRate">Tax Rate</label>
                                                </div>
                                                <div class="col-sm-8">
                                                    <input type="text" name="tax_rate" tabindex="2" class="form-control" value="{{ old('tax_rate') }}" id="exampleInputTaxRate" placeholder="Enter Tax Rate" autocomplete="off">
                                                </div>
                                            </div>

                                        </div>
                                        </div>
                                    </div>
                                    <!-- /.tab-pane -->
                                    <div class="tab-pane" id="owners">
                                        <div class="row">
                                            <div class="col-md-6">
                                        <div class="form-group row">
                                            <div class="col-sm-4">
                                            <label for="inputName">First Name <span
                                                    style="color:red">*</span></label>
                                            </div>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control" value="{{ old('first_name') }}" name="first_name" id="inputName"
                                                       placeholder="First Name">
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <div class="col-sm-4">
                                            <label for="inputEmail">Email <span
                                                    style="color:red">*</span></label>
                                            </div>
                                            <div class="col-sm-8">
                                                <input type="email" class="form-control" name="email" id="inputEmail"
                                                       value="{{ old('email') }}" placeholder="Email">
                                            </div>
                                        </div>
                                                <div class="form-group row">
                                                    <div class="col-sm-4">
                                                    <label for="inputEmail">Password</label>
                                                    </div>
                                                    <div class="col-sm-8">
                                                        <input type="text" class="form-control" value="{{ old('password') }}" name="password" id="inputEmail"
                                                               placeholder="Password">
                                                    </div>
                                                </div>

                                            <div class="form-group row">
                                                <div class="col-sm-4">
                                                <label for="exampleInputGender">Gender <span
                                                        style="color:red">*</span></label>
                                                </div>
                                                <div class="col-sm-8">
                                                    <select class="form-control" name="gender">
                                                        <option value="">Select Gender</option>
                                                        <option value="male"
                                                        @if(old('male') == 'male')
                                                            {{ 'selected=selected' }}
                                                            @endif
                                                        >Male</option>
                                                        <option value="female"
                                                        @if(old('female') == 'female')
                                                            {{ 'selected=selected' }}
                                                            @endif
                                                        >Female</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                            <div class="col-md-6">
                                                <div class="form-group row">
                                                    <div class="col-sm-4">
                                                    <label for="inputName">Last Name <span
                                                            style="color:red">*</span></label>
                                                    </div>
                                                    <div class="col-sm-8">
                                                        <input type="text" class="form-control" name="last_name" id="inputName"
                                                               value="{{ old('last_name') }}" placeholder="Last Name">
                                                    </div>
                                                </div>

                                                <div class="form-group row">
                                                    <div class="col-sm-4">
                                                    <label for="inputName">Username <span
                                                            style="color:red">*</span></label>
                                                    </div>
                                                    <div class="col-sm-8">
                                                        <input type="text" class="form-control" id="inputName" name="user_name"
                                                               value="{{ old('user_name') }}" placeholder="username">
                                                    </div>
                                                </div>

                                                <div class="form-group row">
                                                    <div class="col-sm-4">
                                                    <label for="inputName2">Phone <span
                                                            style="color:red">*</span></label>
                                                    </div>
                                                    <div class="col-sm-8">
                                                        <input type="text" class="form-control" name="phone" id="inputName2"
                                                               value="{{ old('phone') }}" placeholder="Phone">
                                                    </div>
                                                </div>

                                                <div class="form-group row">
                                                    <div class="col-sm-4">
                                                    <label for="inputExperience">Profile
                                                        Pic</label>
                                                    </div>
                                                    <div class="col-sm-8">
                                                        <input type="file" class="form-control" name="avatar">
                                                    </div>
                                                </div>

                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <div class="offset-sm-2 col-sm-10">
                                                <button type="submit" class="btn btn-danger">Submit</button>
                                            </div>
                                        </div>
                                    </div>
                                    </div>
                                </div>

                            </form>
                        </div>
                        <!-- /.nav-tabs-custom -->
                    </div>

                <!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
    </section>

@endsection

@section('footer_scripts')
    <script src="{{ asset('admin_assets/plugins/bootstrap-toggle/js/bootstrap-toggle.min.js') }}"></script>
    <!-- Select2 -->
    <script src="{{ asset('admin_assets/plugins/select2/js/select2.full.min.js') }}"></script>
    <!-- Bootstrap Switch -->
    <script src="{{ asset('admin_assets/plugins/bootstrap-switch/js/bootstrap-switch.min.js') }}"></script>
    <script>
        $(function () {
            $('.select2').select2()
        });

        $("input[data-bootstrap-switch]").each(function () {
            $(this).bootstrapSwitch('state', $(this).prop('checked'));
        });
    </script>
    <script>
        $(document).ready(function(){
            $("#country").change(function(){
                var id = $("#country").val();
                $.ajax({
                    url: '{{ URL::to('administrator/restaurants/states') }}',
                    type: 'POST',
                    data: {
                        'id': id,
                        '_token': '{{ csrf_token() }}'
                    },
                    success: function(html)
                    {
                        $("#state").html(html);
                    }
                });
            });
        });
    </script>

    <script>
        $(document).ready(function(){
            $("#state").change(function(){
                var id = $("#state").val();
                $.ajax({
                    url: '{{ URL::to('administrator/restaurants/cities') }}',
                    type: 'POST',
                    data: {
                        'id': id,
                        '_token': '{{ csrf_token() }}'
                    },
                    success: function(html)
                    {
                        $("#city").html(html);
                    }
                });
            });
        });
    </script>
    <script>
        $(document).ready(function(){
            $("#tax_included").change(function(){
                if(this.checked)
                {
                    $("#tax_rate").removeClass('hide');
                }else{
                    $("#tax_rate").addClass('hide');
                }
            });
        });
    </script>
@endsection