@extends('layouts.horizontal', ['withLoader' => true])

@section('css')
<link rel="stylesheet" href="{{ Helper::assets('assets/libs/smartwizard/smart_wizard.min.css') }}" type="text/css" />
<link href="{{ Helper::assets('assets/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/flatpickr/flatpickr.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <h5 class="header-title mb-3 mt-0">Create organisation</h5>
        <div class="card">
            <div class="card-body p-0">
                <form action="{{ route('school.create.save') }}" method="POST" class="create-school-form" enctype="multipart/form-data">
                    @csrf
                    <div id="smartwizard-default">
                        <ul>
                            <li><a href="#sw-default-step-1">Organisation details</a></li>
                            <li><a href="#sw-default-step-2">Account Type</a></li>
                            <li><a href="#sw-default-step-3">Curricula</a></li>
                        </ul>
                        <div class="steps-content py-4">
                            <div id="sw-default-step-1">
                                <div class="col-md-12">
                                    <h5 class="m-0 mb-4 font-size-16">About the organisation</h5>
                                    <div class="row mb-2">
                                        <div class="col-lg-6">
                                            <div class="form-group row">
                                                <label class="col-xl-4 col-form-label">Name of organisation</label>
                                                <div class="col-xl-7">
                                                    <input type="text" class="form-control input-validate" name="name" value="{{ old('name') }}">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label class="col-xl-4 col-form-label">Operation</label>
                                                <div class="col-xl-7">
                                                    <select class="form-control input-validate" data-plugin="customselect" name="operation" data-placeholder="">
                                                        <option value="" {{ old('operation') == "" ? 'selected' : '' }}>Select Operation</option>
                                                        <option value="0" {{ old('operation') == "0" ? 'selected' : '' }}>Private</option>
                                                        <option value="1" {{ old('operation') == "1" ? 'selected' : '' }}>Community</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6 text-center">
                                            <div class="form-group row align-items-center">
                                                <div class="offset-xl-1 col-md px-0 upload-image">
                                                    <div class="d-inline-block school-logo-box mr-md-4 mr-2 mb-3 mb-md-2">
                                                        <img src="{{ Helper::assets('assets/images/default-big-logo.png') }}" data-src="{{ Helper::assets('assets/images/default-big-logo.png') }}" class="img-fluid">
                                                    </div>
                                                    <button class="btn btn-pink mr-2 mb-2 btn-upload" type="button">Upload new logo</button>
                                                    <button class="btn btn-danger mb-2 btn-remove-image" type="button">Remove</button>
                                                    <input type="file" class=" input-validate" name="image" id="image">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row border-bottom mb-4"></div>
                                <div class="col-md-12 pt-2">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group row">
                                                <label class="col-xl-2 col-form-label">Address</label>
                                                <div class="col-xl-10">
                                                    <input type="text" class="form-control input-validate" name="address" value="{{ old('address') }}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="form-group row">
                                                <label class="col-xl-4 col-form-label">Country</label>
                                                <div class="col-xl-7">
                                                    <select class="form-control input-validate" data-plugin="customselect" name="country" id="country" data-placeholder="">
                                                        <option value="">Select Country</option>
                                                        @if(isset($countries) && !empty($countries))
                                                        @foreach ($countries as $country)
                                                        <option value="{{$country->_id}}||{{$country->name}}">{{$country->name}}</option>
                                                        @endforeach
                                                        @endif
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group row">
                                                <label class="offset-xl-1 col-xl-4 col-form-label">State</label>
                                                <div class="col-xl-7">
                                                    <select class="form-control input-validate" data-plugin="customselect"  name="state" id="state" data-placeholder="">
                                                        <option value="">Select State</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="form-group row">
                                                <label class="col-xl-4 col-form-label">City/Town</label>
                                                <div class="col-xl-7">
                                                    <input type="text" class="form-control input-validate" name="city" value="{{ old('city') }}" placeholder="">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group row">
                                                <label class="offset-xl-1 col-xl-4 col-form-label">Postal code</label>
                                                <div class="col-xl-7">
                                                    <input type="text" class="form-control input-validate" name="postalCode" value="{{ old('postalCode') }}" placeholder="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="form-group row">
                                                <label class="col-xl-4 col-form-label">Phone number</label>
                                                <div class="col-xl-7">
                                                    <input type="text" class="form-control input-validate" name="phone" value="{{ old('phone') }}" placeholder="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row border-bottom mb-4"></div>
                                <div class="col-md-12">
                                    <div class="row">
                                        <div class="col-12">
                                            <h5 class="font-size-18">Opening days and times</h5>
                                        </div>
                                        <div class="col-12 mt-3">
                                            <div class="row">
                                                @foreach(config('constant.collection_days') as $key => $day)
                                                <div class="col-auto">
                                                    <div class="checkbox big checkbox-pink mb-3">
                                                        <input type="checkbox" class="input-validate open-day" name="days[]" id="day{{$key}}" value="{{$key}}" data-error="days-error">
                                                        <label for="day{{$key}}" class="pt-2">
                                                            {{$day}}
                                                        </label>
                                                    </div>
                                                </div>
                                                @endforeach
                                            </div>
                                            <div class="days-error"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12 mt-3">
                                    <div class="row px-3">
                                        <ul class="nav nav-pills navtab-bg section-hidden nav-days" style="display:none">
                                            @foreach(config('constant.collection_days') as $key => $day)
                                            <li class="nav-item nav-item-{{$key}}" style="display:none">
                                                <a href="#tab{{$key}}" data-toggle="tab" aria-expanded="false" class="nav-link">
                                                    <span class="d-sm-block">{{$day}}</span>
                                                </a>
                                            </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                    <div class="tab-content section-hidden" style="display:none">
                                        @foreach(config('constant.collection_days') as $key => $day)
                                        <div class="tab-pane" id="tab{{$key}}">
                                            <div class="section-repeater" data-startingIndex="1">
                                                <div class="r-group">
                                                    <div class="row mb-2">
                                                        <label class="col-auto col-form-label font-weight-bold">Session <span class="srno number">1</span></label>
                                                        <div class="col-md-1 col-auto ml-auto order-md-3 order-1 input-group-append align-items-start justify-content-end" style="visibility:hidden;">
                                                            <span class="input-group-btn mt-md-3">
                                                                <a href="javascript:void(0);" class="text-danger r-btnRemove mt-1"><i class="uil uil-multiply"></i></a>
                                                            </span>
                                                        </div>
                                                        <div class="col-md order-md-2 order-3">
                                                            <div class="form-group row">
                                                                <label class="col-md-5 col-lg-4 col-form-label font-weight-medium">Opening time</label>
                                                                <div class="col-md-7 col-lg-7">
                                                                    <span class="flatpickr-arrow"></span>
                                                                    <input type="text" class="form-control not-validate flatpickr flatpickr-time fromTime" name="timings[{{$key}}][periods][0][fromTime]" value="" placeholder="" data-pattern="timings[{{$key}}][periods][++][fromTime]">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md order-md-2 order-3">
                                                            <div class="form-group row">
                                                                <label class="col-md-5 col-lg-4 col-form-label font-weight-medium">Closing time</label>
                                                                <div class="col-md-7 col-lg-7">
                                                                    <span class="flatpickr-arrow"></span>
                                                                    <input type="text" class="form-control not-validate flatpickr flatpickr-time toTime" name="timings[{{$key}}][periods][0][toTime]" value="" placeholder="" data-pattern="timings[{{$key}}][periods][++][toTime]">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="pt-3 btn-div">
                                                    <button type="button" class="btn btn-success r-btnAdd">Add</button>
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                            <div id="sw-default-step-2">
                                <div class="col-md-12">
                                    <h5 class="m-0 mb-4 font-size-16 d-none">Account Type</h5>
                                    <div class="row type-of-school">
                                        <div class="col-md-6 last-child">
                                            <div class="form-group row">
                                                <div class="col-lg-auto">
                                                    <div class="checkbox big checkbox-pink pt-lg-1">
                                                        <input type="checkbox" class=" input-validate" name="category" data-error="typeofschool-error" id="typeOfPreSchoolOther" value="0">
                                                        <label for="typeOfPreSchoolOther" class="pt-2">
                                                            Other
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-lg mt-2 ml-5 pl-4 mt-lg-0 ml-lg-0 pl-lg-0">
                                                    <input type="text" name="category_other" id="category_other" class="form-control input-validate">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="typeofschool-error"></div>
                                </div>
                            </div>
                            <div id="sw-default-step-3">
                                <div class="col-md-12">
                                    <h5 class="m-0 mb-4 font-size-16">Select any that applies or leave blank and select "Finish" to proceed</h5>
                                    <div class="row curricula-list">
                                    </div>
                                    <div class="curricula-error"></div>
                                    <div class="row mt-4">
                                        <div class="col-md-12">
                                            <div class="alert alert-pink" role="alert">
                                                Note: Curriculum Frameworks are automatically shown when creating child observations. These are based on the country you chose when setting up your account. We can also add new frameworks, curricula or show you how to add your own. Contact us to learn more.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script-bottom')
<script defer src="{{ Helper::assets('assets/libs/smartwizard/jquery.smartWizard.min.js') }}"></script>
<script defer src="{{ Helper::assets('assets/libs/validation/validate.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/moment/moment.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/flatpickr/flatpickr.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/select2/select2.min.js') }}"></script>
<script defer src="{{ Helper::assets('assets/js/pages/create-school.js') }}?v=1"></script>
<script>
    var get_state = "{{ route('state') }}";
    var get_curricula = "{{ route('curricula') }}";
</script>
@endsection