@extends('layouts.main-layout')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="{{asset('js/admin.js')}}"></script>

@section('title')
Create Accommodation | Dashboard
@endsection
@section('css')
    <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
    <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">
    <style>

        /**
 * FilePond Custom Styles
 */
        .filepond--drop-label {
            color: #4c4e53;
        }

        .filepond--label-action {
            text-decoration-color: #babdc0;
            margin-left: 20px;
        }

        .filepond--panel-root {
            border-radius: 2em;
            background-color: #edf0f4;
            height: 1em;
        }

        .filepond--item-panel {
            background-color: #595e68;
        }

        .filepond--drip-blob {
            background-color: #7f8a9a;
        }

        .filepond--item{
            width: 200px;
            display: inline-block;
            height: 200px !important;
        }


        .btn-file {
            position: relative;
            background: #2196F3;
            overflow: hidden;
        }

        .btn-file input[type=file] {
            position: absolute;
            top: 0;
            right: 0;
            min-width: 100%;
            min-height: 100%;
            font-size: 100px;
            text-align: right;
            filter: alpha(opacity=0);
            opacity: 0;
            outline: none;
            background: white;
            cursor: inherit;
            display: block;
        }

        .imageThumb {
            max-height: 75px;
            border: 2px solid;
            padding: 1px;
            cursor: pointer;
        }
        .pip {
            display: inline-block;
            margin: 10px 10px 0 0;
        }
        .remove {
            display: block;
            background: #444;
            border: 1px solid black;
            color: white;
            text-align: center;
            cursor: pointer;
        }
        .remove:hover {
            background: white;
            color: grey;
        }

        .nav-item{
            cursor: none;
        }
        .tab-pane{
            cursor:none;
        }
        .nav-link{
            cursor:none;
        }
    </style>
@endsection

@section('content')


												<!--begin::Svg Icon | path: icons/duotune/ecommerce/ecm002.svg-->


											<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
						<!--begin::Post-->
						<div class="post d-flex flex-column-fluid" id="kt_post">
							<!--begin::Container-->
							<div id="kt_content_container" class="container-xxl">
								<!--begin::Row-->

								<!--end::Row-->
								<!--begin::Tables Widget 9-->

								<!--end::Tables Widget 9-->
								<!--begin::Tables Widget 10-->

								<!--end::Tables Widget 10-->

								<!--begin::Tables Widget 12-->

								<!--end::Tables Widget 12-->
								<!--begin::Tables Widget 13-->
								<div class="card mb-5 mb-xl-8">

								      @if(session()->has('message'))
                                    <p class="alert alert-success">{{ session('message') }}</p>
                                    @endif

                                    @if(session()->has('message1'))
                                    <p class="alert alert-danger">{{ session('message1') }}</p>
                                    @endif


                                    @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

									<!--begin::Header-->
									<div class="card-header border-0 pt-5">
										<h3 class="card-title align-items-start flex-column">
											<span class="card-label fw-bolder fs-3 mb-1">Create Accommodation</span>

										</h3>

									</div>


									<div class="card-body">
									    <form id="acc-create-form" action="{{route('admin.accommodations.store')}}" method="post" autocomplete="off" enctype="multipart/form-data">
                @csrf
									   <!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active " id="home-tab" data-toggle="tab" href="#form1" role="tab" aria-controls="home" aria-selected="true">General Information</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#form2" role="tab" aria-controls="profile" aria-selected="false">Hotel Information</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#form3" role="tab" aria-controls="messages" aria-selected="false">Location Information</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#form4" role="tab" aria-controls="settings" aria-selected="false">Hotel Description</a>
  </li>
</ul>


<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="form1" role="tabpanel" aria-labelledby="home-tab">
    <div class="progress mt-5">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="25" style="width: 25%;">25%</div>
</div>
      @include('admin.accommodations.create-form-steps.step-1')</div>
  <div class="tab-pane" id="form2" role="tabpanel" aria-labelledby="profile-tab">
     <div class="progress mt-5">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" aria-valuenow="50" aria-valuemin="25" aria-valuemax="50" style="width: 50%">50%</div>
</div>
       @include('admin.accommodations.create-form-steps.step-2')</div>
  <div class="tab-pane" id="form3" role="tabpanel" aria-labelledby="messages-tab">
    <div class="progress mt-5">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" aria-valuenow="75" aria-valuemin="50" aria-valuemax="75" style="width: 75%">75%</div>
</div>
      @include('admin.accommodations.create-form-steps.step-3')</div>
  <div class="tab-pane" id="form4" role="tabpanel" aria-labelledby="settings-tab">
      <div class="progress mt-5">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" aria-valuenow="100" aria-valuemin="75" aria-valuemax="100" style="width: 100%">complete</div>
</div>
      @include('admin.accommodations.create-form-steps.step-4')</div>
</div>




									</div>

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

									@endsection

@section('js')



    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCFOaKnzwZPMo6ukg1sfhLXxY50bA83Qdo&callback=initMap&libraries=places">
        </script>
    <script src="https://unpkg.com/filepond/dist/filepond.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
    <script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.min.js"></script>
    <script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>
    <script src="https://unpkg.com/filepond-plugin-file-encode/dist/filepond-plugin-file-encode.min.js"></script>

    <script>
        $(document).ready(function(){
            //get the tabs instance so we can change tabs with prev/next buttons.

            var tabs = M.Tabs.getInstance(getEl('.tabs'));

            $('.tab-trigger').click(function(e){
                e.preventDefault();
                var tab = e.target.getAttribute('data-target');
                tabs.select(tab);
                window.scrollTo(0,0);
            });

            //we will get cities for specified country with ajax.
            $('#country').change(function(e){
                var id = $(this).find(":selected").val();
                getCities(id,getEl('#city'),'');
            });

            //set the image preview when file input's state
            //has changed.
            $('#accommodation_logo').change(function(e){
                readURL(this);
            });
        });


            @if(old('country'))
                getCities({{old('country')}},getEl('#city'),'');
            @endif

        });


        /**
         * Image preview with FileReader.
         *
         * @param {*} input file input element
         */
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $('#logo_preview').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }
        }

        var map;

        /**
         * Callback used in google maps api.
         */
        function initMap() {
            var lat = $('#latitude');
            var lng = $('#longitude');

            lat.val('-34.397');
            lng.val('150.644');
            M.updateTextFields();

            var myLatlng = {lat: -34.397, lng: 150.644};

            map = new google.maps.Map(document.getElementById('map'), {
                center: myLatlng,
                zoom: 8
            });

            var marker = new google.maps.Marker({
                position: myLatlng,
                draggable: true,
                map: map,
                title: 'Click to zoom'
            });

            marker.addListener('dragend',function(){
                lat.val(marker.getPosition().lat());
                lng.val(marker.getPosition().lng());
                M.updateTextFields();
            });
        }

        FilePond.registerPlugin(
            FilePondPluginImagePreview,
            FilePondPluginFileValidateSize,
            FilePondPluginFileValidateType,
            FilePondPluginFileEncode,
        );

        const inputElement = document.querySelector('#accommodation_images');
        const pond = FilePond.create( inputElement , {
            acceptedFileTypes: ['image/jpeg'],
            labelIdle: 'ACCOMMODATION IMAGES <span class="filepond--label-action">Browse</span>',
            fileValidateTypeDetectType: (source, type) => new Promise((resolve, reject) => {
                resolve(type);
            }),
            imageValidateSizeMinWidth: '1300',
            imageValidateSizeMinHeight: '1300',
            imageValidateSizeLabelImageSizeTooSmall: 'Image is too small',
            imageValidateSizeLabelExpectedMinSize: 'Minimum size is 1300 × 1300'
        });
    </script>
@endsection





					<!--Tabs JS-->

    <script>
   $(document).ready(function(){

//             $('#myTab a').on('click', function (e) {
//   e.preventDefault()
//   $(this).tab('show')
// });


$('#myTab a[href="#form1"]').tab('show') // Select first tab

   });

    //we will get cities for specified country with ajax.

            $('#country').change(function(e){
                var id = $(this).find(":selected").val();
                getCities(id,getEl('#city'),'');

            });
       </script>