@extends('layouts/layoutMaster')

@section('title', $namePage)

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

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

<!-- Page Scripts -->
@section('page-script')
  <script src="{{ asset('tools/common.js') }}"></script>
  @vite(['resources/js/products/products-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>Products</span>
                            <div class="d-flex align-items-end mt-2">
                                <h3 class="mb-0 me-2">{{ $data['total'] }}</h3>
                                <small class="text-success">(100%)</small>
                            </div>
                            <small>Total products</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>Products Xrewards</span>
                            <div class="d-flex align-items-end mt-2">
                                <h3 class="mb-0 me-2">{{ $data['xrewards']['total'] }}</h3>
                                <small class="text-success">({{ $data['xrewards']['percentage'] }}%)</small>
                            </div>
                            <small>last update: {{ $data['xrewards']['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>Products Binbit</span>
                            <div class="d-flex align-items-end mt-2">
                                <h3 class="mb-0 me-2">{{ $data['binbitTotal']['total'] }}</h3>
                                <small class="text-success">({{ $data['binbitTotal']['percentage'] }}%)</small>
                            </div>
                            <small>Last insert: {{ $data['binbitTotal']['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>Products out of stock</span>
                            <div class="d-flex align-items-end mt-2">
                                <h3 class="mb-0 me-2">{{ $data['stockNo'] }}</h3>
                                <small class="text-danger"></small>
                            </div>
                            <small>Recent analytics</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="country">Country</th>
                        <th data-field="carrier">Carrier</th>
                        <th data-field="service">Service</th>
                        <th data-field="name">Name</th>
                        <th data-field="quantity">Quantity</th>
                        <th data-field="priceR">Price Rewards</th>
                        <th data-field="princeB">Price XP</th>
                        <th data-field="status">status</th>
                        <th data-field="actions">actions</th>
                    </tr>
                </thead>
                <tfoot>
                  <tr>
                    <th>Country</th>
                    <th>Carrier</th>
                    <th>Service</th>
                    <th>Name</th>
                    <th>Quantity</th>
                    <th>Price Rewards</th>
                    <th>Price XP</th>
                    <th>status</th>
                    <th>actions</th>
                  </tr>
                </tfoot>
            </table>
        </div>

    </div>

    <!-- MODAL EDIT -->
    <div class="modal fade" id="editModal" tabindex="-1" aria-hidden="true">
      <form method="POST" id="formEdit" action="" data-action="{{ route('productAddItem') }}" 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"></h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-sm-12 col-md-6 col-xl-6 mb-6 mt-2">
                <div class="row">
                  <div class="col mt-2">
                    <div class="form-floating form-floating-outline">
                      <input type="text" id="editName" class="form-control" name="name" placeholder="Enter Name">
                      <label for="nameLarge">Name</label>
                    </div>
                  </div>

                  <div class="col-12 mt-2">
                    <div class="form-floating form-floating-outline">
                      <input type="number" class="form-control" id="editQuantity" min="1" required placeholder="00000" name="quantity" aria-label="500">
                      <label for="quantity">Quantity</label>
                    </div>
                  </div>

                  <div class="col-12 mt-2">
                    <div class="form-floating form-floating-outline">
                      <input type="number" class="form-control" id="editPointsXP"  required min="1" placeholder="450" name="pointsXP" aria-label="Points XP">
                      <label for="pointsXP">Points XP</label>
                    </div>
                  </div>

                  <div class="col-12 mt-2">
                    <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 class="col-12 mt-2">
                    <label for="editFormFileVideo" class="form-label">Video</label>
                    <input class="form-control" type="file" id="editFormFileVideo" name="fileVideo" accept="video/mp4">
                  </div>
                </div>
              </div>

              <div class="col-sm-12 col-md-6 col-xl-6 mb-6 mt-2">
                <div class="card">
                  <div class="card-body">
                    <img class="card-img-top" id="editIMG" src="" alt="image product" />
                    <hr>
                    <ul class="list-group list-group-flush">
                      <div class="mb-3 mt-3">
                        <input type="file" name="file" id="editFile" accept=".png, .jpg, .jpeg" class="form-control">
                      </div>
                    </ul>
                  </div>
                </div>
              </div>
            </div>

            <div class="row g-4">
              <div class="col-12 mt-2">
                <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">Input</label>
                </div>
              </div>

              <div class="col-12">
                <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 g-4">
              <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 editDescriptionEditor" id="editDescriptionEditor"> </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="row mt-3">
              <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 mt-3">
              <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="editRedemptionInstructions" >
                    </div>
                  </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>

  <!-- MODAL VIDEO -->
    <div class="modal fade" id="seeVideo" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <!-- <iframe height="350" src="https://www.youtube.com/embed/EngW7tLk6R8"></iframe> -->
          <video class="w-100" poster="{{ config('enums.default.video') }}" id="plyr-video-player" playsinline controls>
            <source src="" type="video/mp4" id="sourceVideo" />
          </video>
        </div>
      </div>
    </div>
@endsection