@extends('admin.layouts.app')
@section('title')
    {{ __('create') }}
@endsection
@section('content')
    <div class="content">
        <div class="container-fluid">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title line-height-36">{{ __('create') }}</h3>
                                <a href="{{ route('address.index') }}"
                                    class="btn bg-primary float-right d-flex align-items-center justify-content-center">
                                    <i class="fas fa-arrow-left"></i>&nbsp; {{ __('back') }}
                                </a>
                            </div>
                            <div class="row pt-3 pb-4">
                                <div class="col-md-6 offset-md-3">
                                    <form class="form-horizontal" action="{{ route('address.store') }}"
                                        method="POST" enctype="multipart/form-data">
                                        @csrf

                                        <div class="form-group row">
                                            <label class="col-sm-3 col-form-label">
                                                {{ __('country') }}
                                                <small class="text-danger">*</small>
                                            </label>
                                            <div class="col-sm-9">
                                                    <select name="country_id"
                                                    class="form-control select2bs4 {{ error('country_id') }}"
                                                    id="country_id">
                                                    <option value="" class="d-none">
                                                        {{ __('select_country') }}
                                                    </option>
                                                    @foreach ($countries as $country)
                                                        <option {{ $country->id == old('country_id') ? 'selected' : '' }}
                                                            value="{{ $country->id }}">
                                                            {{ $country->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                @error('country_id')
                                                <span class="invalid-feedback d-block"
                                                    role="alert"><strong>{{ $message }}</strong>
                                                </span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label class="col-sm-3 col-form-label">
                                                {{ __('page') }}
                                                {{-- <small class="text-danger">*</small> --}}
                                            </label>
                                            <div class="col-sm-9">
                                                    <select name="page_id"
                                                    class="form-control select2bs4 {{ error('page_id') }}"
                                                    id="page_id">
                                                    <option value="" class="d-none">
                                                        {{ __('select') }} {{ __('page') }}
                                                    </option>
                                                    @foreach ($pages as $page)
                                                        <option {{ $page->id == old('page_id') ? 'selected' : '' }}
                                                            value="{{ $page->id }}">  
                                                            {{ $page->title }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                @error('page_id')
                                                <span class="invalid-feedback d-block"
                                                    role="alert"><strong>{{ $message }}</strong>
                                                </span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label class="col-sm-3 col-form-label">Office Name</label>
                                            <div class="col-sm-9">
                                                <input value="{{ old('office_name') }}" name="office_name" type="text" class="form-control @error('office_name') is-invalid @enderror" placeholder="Enter Office Name">
                                                @error('office_name')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>                                           
                                        </div>

                                        <div class="form-group row">
                                            <label class="col-sm-3 col-form-label">{{ __('state') }}/{{ __('city') }}
                                                {{-- <small class="text-danger">*</small> --}}
                                            </label>
                                            <div class="col-sm-4">
                                                <input value="{{ old('state') }}" name="state" type="text"
                                                    class="form-control @error('state') is-invalid @enderror"
                                                    placeholder="{{ __('enter') }} {{ __('state') }} {{ __('name') }}">
                                                @error('state')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            <div class="col-sm-5">
                                                <input value="{{ old('city') }}" name="city" type="text"
                                                    class="form-control @error('city') is-invalid @enderror"
                                                    placeholder="{{ __('enter') }} {{ __('city') }} {{ __('name') }}">
                                                @error('city')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>


                                        <div class="form-group row">
                                            <label class="col-sm-3 col-form-label">{{ __('address') }} {{ __('lat') }}/{{ __('long') }}
                                                {{-- <small class="text-danger">*</small> --}}
                                            </label>
                                            <div class="col-sm-4">
                                                <input value="{{ old('lat') }}" name="lat" type="number" step="any"
                                                    class="form-control @error('lat') is-invalid @enderror"
                                                    placeholder="{{ __('enter') }} {{ __('lat') }}">
                                                @error('lat')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            <div class="col-sm-5">
                                                <input value="{{ old('long') }}" name="long" type="number" step="any"
                                                    class="form-control @error('long') is-invalid @enderror"
                                                    placeholder="{{ __('enter') }} {{ __('long') }}">
                                                @error('long')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>


                                        <div class="form-group row">
                                            <label class="col-sm-3 col-form-label">{{ __('zip_Code') }}/{{ __('phone') }}
                                                {{-- <small class="text-danger">*</small> --}}
                                            </label>
                                            <div class="col-sm-4">
                                                <input value="{{ old('zip_Code') }}" name="zip_Code" type="number"
                                                    class="form-control @error('zip_Code') is-invalid @enderror"
                                                    placeholder="{{ __('enter') }} {{ __('zip_Code') }}">
                                                @error('zip_Code')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            <div class="col-sm-5">
                                                <input value="{{ old('phone') }}" name="phone" type="number"
                                                    class="form-control @error('phone') is-invalid @enderror"
                                                    placeholder="{{ __('enter') }} {{ __('phone') }}">
                                                @error('phone')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-sm-3 col-form-label">{{ __('address') }}<small
                                                    class="text-danger">*</small></label>
                                            <div class="col-sm-9">
                                                <textarea id="editor2" type="text" class="form-control" name="address"
                                                    placeholder="{{ __('enter') }} {{ __('address') }}... ">{{ old('address') }}</textarea>
                                                @error('address')
                                                    <span class="text-danger font-size-13">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                        
                                        <div class="form-group row">
                                            <label class="col-sm-3 col-form-label">
                                                {{ __('local_areas') }}
                                                {{-- <small class="text-danger">*</small> --}}
                                            </label>
                                            <div class="col-sm-9">
                                                <input value="{{ old('local_areas') }}" name="local_areas" type="text"  id="tag-input1"
                                                    class="form-control {{ $errors->has('local_areas') ? 'is-invalid ' : '' }}"
                                                    placeholder="{{ __('enter') }} {{ __('local_areas') }}">
                                                @error('local_areas')
                                                    <span class="invalid-feedback"
                                                        role="alert"><strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                              
                                            </div>
                                        </div>

                                        <div class="form-group row mb-15">
                                            <label class="col-sm-3 form-label">{{ __('images') }}</label>
                                            <div class="col-sm-9">
                                                <input name="office_image" type="file" data-show-errors="true" data-width="50%"
                                                data-default-file="" class="dropify" />
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label class="col-sm-3 col-form-label">Map Url
                                                {{-- <small class="text-danger">*</small> --}}
                                            </label>
                                            <div class="col-sm-9">
                                                <input value="" name="mapurl" type="text"
                                                    class="form-control @error('mapurl') is-invalid @enderror"
                                                    placeholder="Map Url">
                                                @error('mapurl')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                      
                                      
                                        <div class="form-group row">
                                            <div class="offset-sm-3 col-sm-4">
                                                <button type="submit" class="btn btn-success">
                                                    <i class="fas fa-plus"></i>
                                                    &nbsp; {{ __('create') }}
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('style')
    <!-- Custom Link -->
    <link rel="stylesheet" href="{{ asset('backend/plugins/select2/css/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('backend/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
    <style>
        .ck-editor__editable_inline {
            min-height: 300px;
        }

        .select2-results__option[aria-selected=true] {
            display: none;
        }

        .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
            color: #fff;
            border: 1px solid #fff;
            background: #007bff;
            border-radius: 30px;
        }

        .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
            color: #fff;
        }

        body {
    font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

  .tags-input-wrapper {
    background: transparent;
    padding: 10px;
    border-radius: 4px;
    max-width: 100%;
    border: 1px solid #ccc;
  }

  .tags-input-wrapper input {
    border: none;
    background: transparent;
    outline: none;
    width: 140px;
    margin-left: 8px;
  }

  .tags-input-wrapper .tag {
    display: inline-block;
    background-color: #007bff;
    color: white;
    border-radius: 40px;
    padding: 0px 3px 0px 7px;
    margin-right: 5px;
    margin-bottom: 5px;
    /* box-shadow: 0 5px 15px -2px rgba(250, 14, 126, .7); */
  }

  .tags-input-wrapper .tag a {
    margin: 0 7px 3px;
    display: inline-block;
    cursor: pointer;
  }
    </style>
    {{-- Flat Icon Css Link --}}
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/flagicon/dist/css/flag-icon.min.css" />
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/flagicon/dist/css/bootstrap-iconpicker.min.css" />
    {{-- Image upload and Preview --}}
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/dropify/css/dropify.min.css">
@endsection
@section('script')
    <script src="{{ asset('backend/plugins/select2/js/select2.full.min.js') }}"></script>
    <script type="text/javascript"
        src="{{ asset('backend') }}/plugins/flagicon/dist/js/bootstrap-iconpicker.bundle.min.js"></script>
    <!-- Custom Script -->

    <script>
        //Initialize Select2 Elements
        $('.select2bs4').select2({
            theme: 'bootstrap4'
        })
    </script>
    {{-- Image upload and Preview --}}
    <script src="{{ asset('backend') }}/plugins/dropify/js/dropify.min.js"></script>
    <script>
        $('.dropify').dropify();

        $('#target').iconpicker({
            align: 'left', // Only in div tag
            arrowClass: 'btn-danger',
            arrowPrevIconClass: 'fas fa-angle-left',
            arrowNextIconClass: 'fas fa-angle-right',
            cols: 16,
            footer: true,
            header: true,
            icon: '',
            iconset: 'flagicon',
            labelHeader: '{0} of {1} pages',
            labelFooter: '{0} - {1} of {2} icons',
            placement: 'bottom', // Only in button tag
            rows: 6,
            search: true,
            searchText: 'Search',
            selectedClass: 'btn-success',
            unselectedClass: ''
        });
        $('#target').on('change', function(e) {
            $('#icon').val(e.icon)
        });
        // dropify
        var drEvent = $('.dropify').dropify();
        drEvent.on('dropify.error.fileSize', function(event, element) {
            alert('Filesize error message!');
        });
        drEvent.on('dropify.error.imageFormat', function(event, element) {
            alert('Image format error message!');
        });
        $('.search-control').val('');

  
    </script>

<script>
    (function() {
      "use strict";
  
      // Plugin Constructor
      var TagsInput = function(opts) {
        this.options = Object.assign(TagsInput.defaults, opts);
        this.init();
      };
  
      // Initialize the plugin
      TagsInput.prototype.init = function(opts) {
        this.options = opts ? Object.assign(this.options, opts) : this.options;
  
        if (this.initialized)
          this.destroy();
  
        if (!(this.orignal_input = document.getElementById(this.options.selector))) {
          console.error("tags-input couldn't find an element with the specified ID");
          return this;
        }
  
        this.arr = [];
        this.wrapper = document.createElement('div');
        this.input = document.createElement('input');
        init(this);
        initEvents(this);
  
        this.initialized = true;
        return this;
      };
  
      // Add Tags
      TagsInput.prototype.addTag = function(string) {
        if (this.anyErrors(string))
          return;
  
        this.arr.push(string);
        var tagInput = this;
  
        var tag = document.createElement('span');
        tag.className = this.options.tagClass;
        tag.innerText = string;
  
        var closeIcon = document.createElement('a');
        closeIcon.innerHTML = '&times;';
  
        // delete the tag when icon is clicked
        closeIcon.addEventListener('click', function(e) {
          e.preventDefault();
          var tag = this.parentNode;
  
          for (var i = 0; i < tagInput.wrapper.childNodes.length; i++) {
            if (tagInput.wrapper.childNodes[i] == tag)
              tagInput.deleteTag(tag, i);
          }
        });
  
        tag.appendChild(closeIcon);
        this.wrapper.insertBefore(tag, this.input);
        this.orignal_input.value = this.arr.join(',');
  
        return this;
      };
  
      // Delete Tags
      TagsInput.prototype.deleteTag = function(tag, i) {
        tag.remove();
        this.arr.splice(i, 1);
        this.orignal_input.value = this.arr.join(',');
        return this;
      };
  
      // Make sure input string has no errors with the plugin
      TagsInput.prototype.anyErrors = function(string) {
        if (this.options.max != null && this.arr.length >= this.options.max) {
          console.log('max tags limit reached');
          return true;
        }
  
        if (!this.options.duplicate && this.arr.indexOf(string) != -1) {
          console.log('duplicate found "' + string + '"');
          return true;
        }
  
        return false;
      };
  
      // Add tags programmatically
      TagsInput.prototype.addData = function(array) {
        var plugin = this;
  
        array.forEach(function(string) {
          plugin.addTag(string);
        });
        return this;
      };
  
      // Get the Input String
      TagsInput.prototype.getInputString = function() {
        return this.arr.join(',');
      };
  
      // destroy the plugin
      TagsInput.prototype.destroy = function() {
        this.orignal_input.removeAttribute('hidden');
  
        delete this.orignal_input;
        var self = this;
  
        Object.keys(this).forEach(function(key) {
          if (self[key] instanceof HTMLElement)
            self[key].remove();
  
          if (key != 'options')
            delete self[key];
        });
  
        this.initialized = false;
      };
  
      // Private function to initialize the tag input plugin
      function init(tags) {
        tags.wrapper.append(tags.input);
        tags.wrapper.classList.add(tags.options.wrapperClass);
        tags.orignal_input.setAttribute('hidden', 'true');
        tags.orignal_input.parentNode.insertBefore(tags.wrapper, tags.orignal_input);
      }
  
      // initialize the Events
      function initEvents(tags) {
        tags.wrapper.addEventListener('click', function() {
          tags.input.focus();
        });
  
        tags.input.addEventListener('keydown', function(e) {
          var str = tags.input.value.trim();
  
          if (!!(~[9, 13, 188].indexOf(e.keyCode))) {
            e.preventDefault();
            tags.input.value = "";
            if (str != "")
              tags.addTag(str);
          }
        });
      }
  
      // Set All the Default Values
      TagsInput.defaults = {
        selector: '',
        wrapperClass: 'tags-input-wrapper',
        tagClass: 'tag',
        max: null,
        duplicate: false
      };
  
      window.TagsInput = TagsInput;
    })();
  
    document.addEventListener('DOMContentLoaded', function() {
      var tagInput1 = new TagsInput({
        selector: 'tag-input1',
        duplicate: false,
        max: 100
      });
      tagInput1.addData(['PHP', 'JavaScript', 'CSS']);
    });
  </script>
@endsection