@extends('dashboard.layout.default')

@section('page_title',$page_title)

@section('content')
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">

          <div class="col-sm-6">
                <ol class="breadcrumb float-sm-left">
                    <li class="breadcrumb-item"><a href="{{Route('dashboard')}}">{{ __("pages.home") }}</a></li>
                    <li class="breadcrumb-item"><a href="{{Route('tours.index')}}">{{__('pages.tours')}}</a></li>
                    <li class="breadcrumb-item active">{{$page_title}}</li>
                </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
        @if(session()->has('success'))
            <div class="alert alert-success">
                {{ session()->get('success') }}
            </div>
        @endif
        @if($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <!-- form start -->
        <form method="POST" id="form" action="{{ Route('tours.store') }}" enctype="multipart/form-data">
          @csrf
            <div class="container-fluid">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">{{__('pages.basic_info')}}</h3>
                    </div>
                    <div class="card-body">

                                <div class="form-group">
                                    <label for="name">{{__('pages.name')}}</label>
                                    <input type="text" name="name" class="form-control" id="name"
                                        placeholder="{{__('pages.name')}}" value="{{ old('name') }}">
                                </div>

                                <div class="form-group">
                                    <label for="start_date">{{__('pages.start_date')}}</label>
                                    <input type="date" name="start_date" class="form-control" id="start_date"
                                        placeholder="{{__('pages.start_date')}}" value="{{ old('start_date') }}">
                                </div>

                                <div class="form-group">
                                    <label for="end_date">{{__('pages.end_date')}}</label>
                                    <input type="date" name="end_date" class="form-control" id="end_date"
                                        placeholder="{{__('pages.end_date')}}" value="{{ old('end_date') }}">
                                </div>

                                <div class="form-group">
                                    <label>{{__('pages.country')}}</label>
                                    <select class="form-control select2bs4" name="country_id" style="width: 100%;" required>
                                        <option value="">{{__('pages.choose')}} {{__('pages.country')}}</option>
                                        @foreach($countries as $country)
                                        <option value="{{  $country['id'] }}" {{ old('country_id') == $country['id']  ? "selected" : ""  }} >{{  $country['name'] }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                                
                                <div class="form-group">
                                    <label>{{__('pages.city')}}</label>
                                    <select class="form-control select2bs4" name="city_id[]" style="width: 100%;" required multiple>
                                        <option value="">{{__('pages.choose')}} {{__('pages.city')}}</option>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label for="price">{{__('pages.price')}}</label>
                                    <input type="number" name="price" class="form-control" id="price"
                                        placeholder="{{__('pages.price')}}" value="{{ old('price') }}">
                                </div>

                                
                                <div class="form-group">
                                    <label for="type">{{__('pages.type')}}</label>
                                    <select name="type" class="form-control" id="type">
                                        <option value="normal">{{ trans('pages.normal') }}</option>
                                        <option value="one_day">{{ trans('pages.one_day') }}</option>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label for="status">{{__('names.status')}}</label>
                                    <div class="input-group">
                                        <input type="checkbox" data-toggle="toggle" name="status" {{ old('status') ? "checked" : ""  }} data-onstyle="success" data-offstyle="danger" >
                                    </div>
                                </div>


                                <div id="actions" class="row">
                                    <div class="col-lg-6">
                                        <div class="btn-group w-100">
                                        <span class="btn btn-success col fileinput-button">
                                            <i class="fas fa-plus"></i>
                                            <span>Add files</span>
                                        </span>
                                        <button type = "button" class="btn btn-primary col start">
                                            <i class="fas fa-upload"></i>
                                            <span>Start upload</span>
                                        </button>
                                        <button type="reset" class="btn btn-warning col cancel">
                                            <i class="fas fa-times-circle"></i>
                                            <span>Cancel upload</span>
                                        </button>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 d-flex align-items-center">
                                        <div class="fileupload-process w-100">
                                            <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                                                <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="table table-striped files" id="previews">
                                        <div id="template" class="row mt-2">
                                            <div class="col-auto">
                                                <span class="preview"><img src="data:," alt="" data-dz-thumbnail /></span>
                                            </div>
                                            <div class="col d-flex align-items-center">
                                                <p class="mb-0">
                                                <span class="lead" data-dz-name></span>
                                                (<span data-dz-size></span>)
                                                </p>
                                                <strong class="error text-danger" data-dz-errormessage></strong>
                                            </div>
                                            <div class="col-4 d-flex align-items-center">
                                                <div class="progress progress-striped active w-100" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                                                <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
                                                </div>
                                            </div>
                                            <div class="col-auto d-flex align-items-center">
                                                <div class="btn-group">
                                                    <button type = "button"  class="btn btn-primary start">
                                                    <i class="fas fa-upload"></i>
                                                    <span>Start</span>
                                                    </button>
                                                    <button type = "button"  data-dz-remove class="btn btn-warning cancel">
                                                    <i class="fas fa-times-circle"></i>
                                                    <span>Cancel</span>
                                                    </button>
                                                    <button type = "button"  data-dz-remove class="btn btn-danger delete">
                                                    <i class="fas fa-trash"></i>
                                                    <span>Delete</span>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
 

                            
                        </div>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
                <div class="card card-info">
                    <div class="card-header">
                        <h3 class="card-title">{{__('pages.features')}}</h3>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="days">{{__('pages.days')}}</label>
                            <input type="number" name="days" class="form-control" id="days" min="1"
                                placeholder="{{__('pages.days')}}" value="{{ old('days') }}">
                        </div>

                        <div class="form-group">
                            <label for="max_people">{{__('pages.max_people')}}</label>
                            <input type="text" name="max_people" class="form-control" id="max_people" 
                                placeholder="{{__('pages.max_people')}}" value="{{ old('max_people') }}">
                        </div>

                        <div class="form-group">
                            <label for="min_age">{{__('pages.min_age')}}</label>
                            <input type="text" name="min_age" class="form-control" id="min_age"
                                placeholder="{{__('pages.min_age')}}" value="{{ old('min_age') }}">
                        </div>

                        <div class="form-group">
                            <label for="pick_up">{{__('pages.pick_up')}}</label>
                            <input type="text" name="pick_up" class="form-control" id="pick_up"
                                placeholder="{{__('pages.pick_up')}}" value="{{ old('pick_up') }}">
                        </div>

                        <div class="form-group">
                            <label for="languages">{{__('pages.languages')}}</label>
                            <input type="text" name="languages" class="form-control" id="languages"
                                placeholder="{{__('pages.languages')}}" value="{{ old('languages') }}">
                        </div>

                        {{-- 
                        <div class="form-group">
                            <label for="location_map">{{__('pages.location_map')}}</label>
                            <input type="text" name="location_map" class="form-control" id="location_map"
                                placeholder="{{__('pages.location_map')}}" value="{{ old('location_map') }}">
                        </div>
                        --}}

                        <div class="form-group">
                            <label for="cancellation_policy">{{__('pages.cancellation_policy')}}</label>
                            <input type="text" name="cancellation_policy" class="form-control" id="cancellation_policy"
                                placeholder="{{__('pages.cancellation_policy')}}" value="{{ old('cancellation_policy') }}">
                        </div>


                    </div>

                    <!-- /.card-body -->
                </div>
                <div class="card card-info">
                    <div class="card-header">
                        <h3 class="card-title">{{__('pages.content')}}</h3>
                    </div>
                    <!-- /.card-header -->

                    <div class="card-body">
                        <div class="form-group">
                    
                        <textarea name="description" class="summernote" rows=100>{{ old('description') }}</textarea>

                        </div>

                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
                <div class="card card-info">
                    <div class="card-header">
                        <h3 class="card-title">{{__('pages.what_to_expect')}}</h3>
                    </div>
                    <!-- /.card-header -->

                    <div class="card-body">
                        <div class="form-group">
                    
                        <textarea name="what_to_expect" class="summernote" rows=100>{{ old('what_to_expect') }}</textarea>

                        </div>

                    </div>
                    <!-- /.card-body -->
                </div>
                <div class="card card-info">
                    <div class="card-header">
                        <h3 class="card-title">{{__('pages.not_included')}}</h3>
                    </div>
                    <!-- /.card-header -->

                    <div class="card-body">
                        <div class="form-group">
                    
                        <textarea name="not_included" class="summernote" rows=100>{{ old('not_included') }}</textarea>

                        </div>

                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
                <div class="py-3 text-center">
                    <button type="submit" class="btn btn-primary">{{__('pages.submit')}}</button>
                </div>
            </div>
        </form>
    </div>
    <!-- /.card -->

    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

@endsection


@push('js_scripts')
    <script>
        $(document).ready(function() {
            $('.select2bs4').select2({
                theme: 'bootstrap4'
            });
        });

        $(document).on('change', 'select[name="country_id"]', function() {
            var country_id = $(this).val();
            if (country_id) {
                // disable all inputs 
                $('select,input').prop('disabled', true);
                $.ajax({
                    url: "{{ Route('get_cities') }}",
                    type: "GET",
                    data: {
                        country_id: country_id
                    },
                    success: function(data) {
                        $('select[name="city_id[]"]').empty();
                        $('select[name="city_id[]"]').append('<option value="">{{__('pages.choose')}} {{__('pages.city')}}</option>');
                        $.each(data, function(key, item) {
                            $('select[name="city_id[]"]').append('<option value="' + item.id + '">' + item.name +
                                '</option>');
                        });
                    },
                    complete: function() {
                        // enable all inputs 
                        $('select,input').prop('disabled', false);
                    }
                });
            } else {
                $('select[name="city_id[]"]').empty();
            }
        });

           // DropzoneJS Demo Code Start
    Dropzone.autoDiscover = false

    // Get the template HTML and remove it from the doumenthe template HTML and remove it from the doument
    var previewNode = document.querySelector("#template")
    previewNode.id = ""
    var previewTemplate = previewNode.parentNode.innerHTML
    previewNode.parentNode.removeChild(previewNode)

    var myDropzone = new Dropzone("form", { // Make the whole body a dropzone
    url: "{{ Route('gallery.store') }}", // Set the url
    method: 'POST',
    headers: {
        'X-CSRF-TOKEN': "{{ csrf_token() }}"
    },
    init: function() {
        this.on("success", function(file, response) {
            // Append the file name to a hidden input field
            if(response.gallery){
                $("form").append('<input type="hidden" name="file[]" value="' + response.gallery + '">');
            }
        });
    },
    thumbnailWidth: 80,
    thumbnailHeight: 80,
    parallelUploads: 20,
    previewTemplate: previewTemplate,
    autoQueue: false, // Make sure the files aren't queued until manually added
    previewsContainer: "#previews", // Define the container to display the previews
    clickable: ".fileinput-button" // Define the element that should be used as click trigger to select files.
    })

    myDropzone.on("addedfile", function(file) {
    // Hookup the start button
    file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file) }
        
    })

    // Update the total progress bar
    myDropzone.on("totaluploadprogress", function(progress) {
    document.querySelector("#total-progress .progress-bar").style.width = progress + "%"
    })

    myDropzone.on("sending", function(file) {
    // Show the total progress bar when upload starts
    document.querySelector("#total-progress").style.opacity = "1"
    // And disable the start button
    file.previewElement.querySelector(".start").setAttribute("disabled", "disabled")
    })

    // Hide the total progress bar when nothing's uploading anymore
    myDropzone.on("queuecomplete", function(progress) {
    document.querySelector("#total-progress").style.opacity = "0"
    })

    // Setup the buttons for all transfers
    // The "add files" button doesn't need to be setup because the config
    // `clickable` has already been specified.
    document.querySelector("#actions .start").onclick = function() {
    myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED))
    }
    document.querySelector("#actions .cancel").onclick = function() {
    myDropzone.removeAllFiles(true)
    }



    </script>
@endpush