@extends('layouts/layoutMaster')

@section('title', $namePage)

@section('vendor-style')
  @vite([
          'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
          'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
          'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss',
          '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/select2/select2.scss',
          'resources/assets/vendor/libs/@form-validation/form-validation.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/moment/moment.js',
          'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
          'resources/assets/vendor/libs/select2/select2.js',
          'resources/assets/vendor/libs/@form-validation/popular.js',
          'resources/assets/vendor/libs/@form-validation/bootstrap5.js',
          'resources/assets/vendor/libs/@form-validation/auto-focus.js',
          'resources/assets/vendor/libs/cleavejs/cleave.js',
          'resources/assets/vendor/libs/cleavejs/cleave-phone.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-list.js'])
@endsection

@section('content')
  <div class="row g-6 mb-6">
    <div class="col-sm-6 col-xl-3">
      <div class="card">
        <div class="card-body">
          <div class="d-flex align-items-start justify-content-between">
            <div class="content-left">
              <span>Carriers</span>
              <div class="d-flex align-items-end mt-2">
                <h3 class="mb-0 me-2">{{ $data['carriers']['total'] }}</h3>
                <small class="text-success">({{ $data['carriers']['subTotal'] }} countries)</small>
              </div>
              <small>last record: {{ $data['carriers']['date'] }} </small>
            </div>
            <span class="avatar">
                <span class="avatar-initial bg-label-success rounded">
                    <i class="ri-shopping-basket-line ri-26px"></i>
                </span>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-xl-3">
      <div class="card">
        <div class="card-body">
          <div class="d-flex align-items-start justify-content-between">
            <div class="content-left">
              <span>Services</span>
              <div class="d-flex align-items-end mt-2">
                <h3 class="mb-0 me-2">{{ $data['services']['total'] }}</h3>
                <small class="text-success">({{ $data['services']['subTotal'] }}%)</small>
              </div>
              <small>last update: {{ $data['services']['date'] }} </small>
            </div>
            <span class="avatar">
                            <span class="avatar-initial bg-label-primary rounded">
                                <i class="ri-shopping-basket-line ri-26px"></i>
                            </span>
                        </span>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-xl-3">
      <div class="card">
        <div class="card-body">
          <div class="d-flex align-items-start justify-content-between">
            <div class="content-left">
              <span>Carriers Active</span>
              <div class="d-flex align-items-end mt-2">
                <h3 class="mb-0 me-2">{{ $data['totalActive']['total'] }}</h3>
                <small class="text-success">({{ $data['totalActive']['percentage'] }}%)</small>
              </div>
              <small>-</small>
            </div>
            <span class="avatar">
                            <span class="avatar-initial bg-label-primary rounded">
                                <i class="ri-shopping-basket-line ri-26px"></i>
                            </span>
                        </span>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-xl-3">
      <div class="card">
        <div class="card-body">
          <div class="d-flex align-items-start justify-content-between">
            <div class="content-left">
              <span>Products out of stock</span>
              <div class="d-flex align-items-end mt-2">
                <h3 class="mb-0 me-2">{{ $data['totalDisabled']['total'] }}</h3>
                <small class="text-danger">({{ $data['totalDisabled']['percentage'] }}%)</small>
              </div>
              <small>-</small>
            </div>
            <span class="avatar">
                            <span class="avatar-initial bg-label-danger rounded">
                                <i class="ri-shopping-basket-line ri-26px"></i>
                            </span>
                        </span>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class="card">
    <div class="card-header pb-0">
      <h5 class="card-action-title mb-0">Search Filter</h5>
    </div>

    <div class="card-datatable table-responsive">
      <table class="table" id="tableList">
        <thead>
        <tr>
          <th data-field="mccmnc">MCCMNC</th>
          <th data-field="name">Name</th>
          <th data-field="country">Country</th>
          <th data-field="services">Services</th>
          <th data-field="type">Sections</th>
          <th data-field="status">status</th>
          <th data-field="actions">actions</th>
        </tr>
        </thead>
      </table>
    </div>

  </div>

  <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasAddUser" aria-labelledby="offcanvasAddUserLabel">
    <div class="offcanvas-header border-bottom">
      <h5 id="offcanvasAddUserLabel" class="offcanvas-title">Modify services</h5>
      <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body mx-0 flex-grow-0 h-100">
      <div class="card-body" id="servicesBody">
      </div>
    </div>
  </div>

  <div class="modal fade" id="editModal" tabindex="-1" aria-hidden="true">
    <form method="POST" id="formEdit" action="" data-action="#" accept-charset="utf-8" enctype="multipart/form-data">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="editModalTitle">Edit Carrier</h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>

          <div class="modal-body mt-4">
            <div class="d-flex justify-content-end mb-3">
              <div class="p-2 flex-fill ">
                <p class="mb-0">Show second section 1</p>
                <div class="w-25 d-flex">
                  <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="p-2 flex-fill ">
                <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>
            <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>

            <hr>

            <div class="d-flex justify-content-end mb-3">
              <div class="p-2 flex-fill ">
                <p class="mb-0">Show second section 2</p>
                <div class="w-25 d-flex">
                  <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="p-2 flex-fill ">
                <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 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 class="modal-footer">
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </form>
  </div>

@endsection