{{-- Extends layout --}}
@extends('layout.default')

@section('styles')

    <!--begin::Page Custom Styles(used by this page)-->
		

	<!--end::Page Custom Styles-->
@endsection

{{-- Content --}}
@section('content')

    <!--begin::Card-->
    <div class="card card-custom card-stretch gutter-b">
        @if (session('status'))

            {{-- Success Alert --}}
            <div class="alert alert-custom alert-notice alert-light-danger fade show gutter-b" role="alert">
                <div class="alert-icon"><i class="flaticon2-check-mark"></i></div>
                <div class="alert-text">{{session('status')}}</div>
                <div class="alert-close">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true"><i class="ki ki-close"></i></span>
                    </button>
                </div>
            </div>

        @endif

        <div class="card-header">
            <div class="card-title">
                <h3 class="card-label">Create New Locaation</h3>
            </div>
        </div>
        
        <!--begin::Form-->
        <form method="POST" action="{{route('location.store')}}" id="uppy_form" enctype="multipart/form-data">
            @csrf
            <div class="card-body">
                
                <!--begin::Outlet Name-->
                <div class="form-group row">
                    <label class="col-form-label text-right col-lg-4 col-sm-12">Lcoation Name</label>
                    <div class="col-lg-8 col-md-9 col-sm-12">
                        <input type="text" class="form-control" name="name" placeholder="Example- Region"/>
                    </div>
                </div>

                <!--begin::location Type-->
                <div class="form-group row">
                    <label class="col-form-label text-right col-lg-4 col-sm-12">Location Type</label>
                    <div class="col-lg-8 col-md-9 col-sm-12">
                        <select class="form-control" name="category">
                            <option selected hidden disabled>Select a type</option>
                            @foreach ($locationCategories as $locationCategory)
                            <option value="{{$locationCategory->Id}}">{{$locationCategory->Name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <!--begin::location parent-->
                <div class="form-group row">
                    <label class="col-form-label text-right col-lg-4 col-sm-12">Location Parent</label>
                    <div class="col-lg-8 col-md-9 col-sm-12">
                        <select class="form-control" name="parent">
                            <option selected hidden disabled>Select a type</option>
                            @foreach ($locations as $location)
                            <option value="{{$location->Id}}">{{$location->Name}}</option>
                            @endforeach
                            
                        </select>
                    </div>
                </div>

                <div class="form-group row">            
                    <label class="col-form-label text-right col-lg-4 col-sm-12"></label>
                    <div class="col-lg-8 col-md-9 col-sm-12">
                        <div class="checkbox-inline">
                            <label class="checkbox">
                                <input type="checkbox" name="isActive"/>
                                <span></span>
                                Is Active
                            </label>
                        </div>
                    </div>
                </div>
                

                <div class="form-group row">
                    <label class="col-form-label text-right col-lg-4 col-sm-12">Remarks <span class="text-muted">(Optional)</span>:</label>
                    
                    <div class="col-lg-8 col-md-9 col-sm-12">
                        <textarea class="form-control form-control-solid" name='remarks' rows="3"></textarea>
                        <span class="form-text text-muted">Write down comment if necessary</span>
                    </div>
                </div>

                {{-- <div class="form-group row">
                    <label class="col-lg-3 col-form-label text-lg-right">Upload Excel:</label>
                    <div class="col-lg-4">
                        <div class="uppy" id="kt_uppy_3">
                            <div id="uppy_drag" class="uppy-drag" style="height: 200px !important"></div>
                            <div class="uppy-informer"></div>
                            <div class="uppy-progress"></div>
                            <div class="uppy-thumbnails"></div>
                        </div>
                        <span class="form-text text-muted">Max file size is 1MB and max number of files is 5.</span>
                    </div>
                </div> --}}

            </div>

            <div class="card-footer pt-0 border-0">
                <div class="row">
                    <div class="col-lg-4"></div>
                    <div class="col-lg-6">
                        <button type="submit" class="btn btn-primary">Submit</button>
                        <button type="reset" class="btn btn-secondary ml-3" data-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </div>
        </form>
        <!--end::Form-->

    </div>
    <!--end::Card-->

@endsection

{{-- Scripts Section --}}
@section('scripts')



    <!--begin::Page Scripts(used by this page)-->
    {{-- <script src="js/pages/crud/forms/widgets/bootstrap-datepicker.js"></script> --}}
    <script src="{{ asset("js/pages/crud/forms/widgets/bootstrap-datepicker.js") }}"></script>
    <script src="{{ asset("plugins/custom/uppy/uppy.bundle.js") }}"></script>
    {{-- <script src="{{ asset("js/pages/crud/file-upload/uppy.js") }}"></script> --}}

    {{-- <script>
        const Uppy = require('@uppy/core');
        const XHRUpload = require('@uppy/xhr-upload');
        const Dashboard = require('@uppy/dashboard');

        const uppy = new Uppy()
            .use(Dashboard,{
                target: '#uppy_drag'
            })
    </script> --}}
	<!--end::Page Scripts-->
@endsection