@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/tagify/tagify.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/bootstrap-maxlength/bootstrap-maxlength.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/bootstrap-maxlength/bootstrap-maxlength.js',
    'resources/assets/vendor/libs/tagify/tagify.js',
  ])
@endsection

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

@section('content')
  <div class="app-ecommerce">
    <form method="POST" id="form-insert" action="{{ route('productAddItem') }}" 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 Product</h4>
          <p class="mb-0">The products created are from binbit</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-8">
            <div class="card mb-6">
              <div class="card-header">
                <h5 class="card-tile mb-0">Product information</h5>
              </div>
              <div class="card-body">
                <div class="row mb-5 gx-5">
                  <div class="col-12 col-lg-8">
                    <input type="text" class="form-control" id="name" required placeholder="Product title" name="name" aria-label="Product title">
                  </div>

                  <div class="col-12 col-lg-4">
                    <div class="form-check form-switch mb-2">
                      <label class="form-check-label" for="flexSwitchCheckDefault">Is Digital?</label>
                      <input class="form-check-input" type="checkbox" id="isDigital" name="isDigital">
                    </div>
                  </div>
                </div>








                <div class="col-12 mb-6">
                  <div class="form-floating form-floating-outline">
                    <input type="text" id="shortDescription" name="shortDescription" class="form-control bootstrap-maxlength-example" placeholder="Short Description" maxlength="200" />
                    <label for="bootstrap-maxlength-example1">Short Description</label>
                  </div>
                </div>

                <div class="row mb-5 gx-5">
                  <div class="col">
                    <div class="form-floating form-floating-outline">
                      <input type="number" class="form-control" id="quantity" min="1" required placeholder="00000" name="quantity" aria-label="500">
                      <label for="quantity">Quantity</label>
                    </div>
                  </div>
                  <div class="col">
                    <div class="form-floating form-floating-outline">
                      <input type="number" class="form-control" id="pointsXP"  required min="1" placeholder="450" name="pointsXP" aria-label="Points XP">
                      <label for="pointsXP">Points XP</label>
                    </div>
                  </div>
                </div>
                <div class="row mb-5 gx-5">
                  <div class="col">
                    <div class="form-floating form-floating-outline">
                      <input id="tags" class="form-control h-auto" name="tags" value="" />
                      <label for="tags">Tags</label>
                    </div>
                  </div>
                </div>
                <div class="row mb-5 gx-5">
                  <div class="col">
                    <div>
                      <p class="mb-1">Description (Optional)</p>
                      <div class="form-control p-0 pt-1">
                        <div class="border-0 pb-1 descriptionEditor" id="descriptionEditor"> </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="row mb-5 gx-5">
                  <div class="col">
                    <div>
                      <p class="mb-1">Specifications (Optional)</p>
                      <div class="form-control p-0 pt-1">
                        <div class="border-0 pb-1 specifications" id="specifications"> </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="row mb-5 gx-5">
                  <div class="col">
                    <div>
                      <p class="mb-1">Redemption Instructions</p>
                      <div class="form-control p-0 pt-1">
                        <div class="comment-editor border-0 pb-1" id="redemptionInstructions"> </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row mb-5 gx-5">
                  <div class="col">
                    <label for="formFile" class="form-label">Image</label>
                    <input class="form-control" type="file" id="formFile" name="file" accept="image/jpeg,image/png,image/gif">
                  </div>
                </div>

                <div class="row mb-5 gx-5">
                  <div class="col">
                    <label for="formFileVideo" class="form-label">Video</label>
                    <input class="form-control" type="file" id="formFileVideo" name="fileVideo" accept="video/mp4">
                  </div>
                </div>
              </div>
            </div>
            <!-- /Product Information -->

          </div>
          <!-- /Second column -->
          <!-- Second column -->
          <div class="col-12 col-lg-4">
            <!-- Pricing Card -->
            <div class="card mb-6">
              <div class="card-header">
                <h5 class="card-title mb-0">Configuration</h5>
              </div>
              <div class="card-body">
                <!-- Base Price -->
                <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>
                      @foreach($data['carriers'] as $carrier)
                        <option value="{{ $carrier->mccmnc }}">{{ convertString($carrier->name, 'uc') }}</option>
                      @endforeach
                    </select>
                </div>

                <!-- Discounted Price -->
                <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>

                <!-- Instock switch -->
                <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>
            </div>
            <!-- /Pricing Card -->

          </div>
          <!-- /Second column -->
      </div>
    </form>
  </div>

@endsection