@extends('layouts/layoutMaster')

@section('title', $namePage)

@section('vendor-style')
  @vite([
    'resources/assets/vendor/libs/quill/typography.scss',
    'resources/assets/vendor/libs/quill/katex.scss',
    'resources/assets/vendor/libs/quill/editor.scss',
    'resources/assets/vendor/libs/bootstrap-select/bootstrap-select.scss',
    'resources/assets/vendor/libs/animate-css/animate.scss',
    'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss',
    'resources/assets/vendor/libs/dropzone/dropzone.scss'
  ])
@endsection

@section('vendor-script')
  @vite([
    'resources/assets/vendor/libs/quill/katex.js',
    'resources/assets/vendor/libs/quill/quill.js',
    'resources/assets/vendor/libs/jquery-repeater/jquery-repeater.js',
    'resources/assets/vendor/libs/bootstrap-select/bootstrap-select.js',
    'resources/assets/vendor/libs/sweetalert2/sweetalert2.js',
    'resources/assets/vendor/libs/dropzone/dropzone.js'
  ])
@endsection

@section('page-script')
  <script src="{{ asset('tools/common.js') }}"></script>
  @vite([
    'resources/js/carriers/carrier-add.js',
  ])
@endsection

@section('content')
  <div class="app-ecommerce">
    <form method="POST" id="form-insert" action="{{ route('carrierAddItem') }}" accept-charset="utf-8" enctype="multipart/form-data">
      @csrf
      <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-6 row-gap-4">
        <div class="d-flex flex-column justify-content-center">
          <h4 class="mb-1">Add a new Carrier</h4>
          <p class="mb-0">countries, carries and services are consumed from the core</p>
        </div>
        <div class="d-flex align-content-center flex-wrap gap-4">
          <button type="reset" class="btn btn-outline-secondary">Discard</button>
          <button type="submit" class="btn btn-outline-primary">Save draft</button>
        </div>
      </div>

      <div class="row">
        <div class="col-12 col-lg-4">
          <div class="card mb-6">
            <div class="card-header">
              <h5 class="card-title mb-0">Configuration</h5>
            </div>
            <div class="card-body">
              <div class="form-floating form-floating-outline mb-5">
                <select id="country" name="country" class="selectpicker w-100" data-style="btn-default" required>
                  <option disabled selected>Select Country</option>
                  @foreach($data['country'] as $country)
                    <option value="{{ $country['iso_cc_id'] }}" data-json="{{ json_encode($country) }}">{{ $country['name_country'] }} </option>
                  @endforeach
                </select>
              </div>

              <div class="form-floating form-floating-outline mb-5">
                <select id="carrier" name="carrier" class="selectpicker w-100" data-style="btn-default" required>
                  <option disabled selected>Select Carrier</option>
                </select>
              </div>

              <div class="form-floating form-floating-outline mb-5">
                <select id="selectpickerMultiple" name="services" class="selectpicker w-100" data-style="btn-default" multiple data-tick-icon="ri-check-line text-white">
                  <option disabled>Select Services</option>
                </select>
              </div>

              <div class="d-flex justify-content-between align-items-center border-top pt-4">
                <p class="mb-0">I want the product to be active from its creation</p>
                <div class="w-25 d-flex justify-content-end">
                  <div class="form-check form-switch me-n3 mb-0">
                    <input type="checkbox" class="form-check-input" checked name="active"/>
                  </div>
                </div>
              </div>

              <div class="d-flex justify-content-between align-items-center border-top pt-4">
                <p class="mb-0">Show second section 1</p>
                <div class="w-25 d-flex justify-content-end">
                  <div class="form-check form-switch me-n3 mb-0">
                    <input type="checkbox" class="form-check-input" checked name="showSection1"/>
                  </div>
                </div>
              </div>

              <div class="form-floating form-floating-outline mb-5 border-top pt-4">
                <p class="mb-0">Section 1 is:</p>
                <div class="form-check">
                  <input name="isCarrousel1" class="form-check-input " type="radio" value="T" id="isCarrousel1"  />
                  <label class="form-check-label" for="isCarrousel1">
                    Text
                  </label>
                </div>

                <div class="form-check">
                  <input name="isCarrousel1" class="form-check-input" type="radio" value="C" id="isCarrousel1" checked />
                  <label class="form-check-label" for="isCarrousel1">
                    Carrousel
                  </label>
                </div>
              </div>

              <div class="d-flex justify-content-between align-items-center border-top pt-4">
                <p class="mb-0">Show second section 2</p>
                <div class="w-25 d-flex justify-content-end">
                  <div class="form-check form-switch me-n3 mb-0">
                    <input type="checkbox" class="form-check-input" checked name="showSection2"/>
                  </div>
                </div>
              </div>

              <div class="form-floating form-floating-outline mb-5 border-top pt-4">
                <p class="mb-0">Section 2 is:</p>
                <div class="form-check">
                  <input name="isCarrousel2" class="form-check-input " type="radio" value="T" id="isCarrousel2"  />
                  <label class="form-check-label" for="isCarrousel2">
                    Text
                  </label>
                </div>

                <div class="form-check">
                  <input name="isCarrousel2" class="form-check-input" type="radio" value="C" id="isCarrousel2" checked />
                  <label class="form-check-label" for="isCarrousel2">
                    Carrousel
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-12 col-lg-8">
            <div class="card mb-6">
              <div class="card-header">
                <h5 class="card-tile mb-0">Carrier information</h5>
              </div>
              <div class="card-body">
                <div class="row mb-5 gx-5" id="sectionText1">
                  <div class="col">
                    <div>
                      <p class="mb-1">Text 1</p>
                      <div class="form-control p-0 pt-1">
                        <div class="border-0 pb-1 titleEditor1" id="titleEditor1"> </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row mb-5 gx-5" id="sectionCarrousel1">
                  <div class="col">
                    <h5>Carrousel</h5>
                    <div class="dropzone needsclick" id="dropzoneMulti1">
                      <div class="dz-message needsclick">
                        Drop files here or click to upload
                        <span class="note needsclick">(This is just a demo dropzone. Selected files are <span class="fw-medium">not</span> actually uploaded.)</span>
                      </div>
                      <div class="fallback">
                        <input name="file1" type="file" />
                      </div>
                    </div>
                  </div>
                </div>

                <div class="row mb-5 gx-5" id="sectionText2">
                  <div class="col">
                    <div>
                      <p class="mb-1">Text 2</p>
                      <div class="form-control p-0 pt-1">
                        <div class="comment-editor border-0 pb-1" id="subtitleEditor2" >
                        </div>

                      </div>
                    </div>
                  </div>
                </div>
                <div class="row mb-5 gx-5" id="sectionCarrousel2">
                  <div class="col">
                    <h5>Carrousel</h5>
                    <div class="dropzone needsclick" id="dropzoneMulti2">
                      <div class="dz-message needsclick">
                        Drop files here or click to upload
                        <span class="note needsclick">(This is just a demo dropzone. Selected files are <span class="fw-medium">not</span> actually uploaded.)</span>
                      </div>
                      <div class="fallback">
                        <input name="file1" type="file" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
        </div>
      </div>
    </form>
  </div>
@endsection