@extends('layouts/contentNavbarLayout')

@section('title', 'Create Document')

@section('page-script')
<script src="{{asset('assets/js/pages-account-settings-account.js')}}"></script>
<script src="{{asset('assets/js/ui-toasts.js')}}"></script>
@endsection

@section('content')
<h4 class="py-3 mb-4">
  <span class="text-muted fw-light">Document /</span> Create
</h4>

<div class="row">
  <div class="col-md-12">
    <ul class="nav nav-pills flex-column flex-md-row mb-3">
      <li class="nav-item"><a class="nav-link" href="{{url('/quipakana/documents')}}"><i class="bx bx-user me-1"></i> List</a></li>
      <li class="nav-item"><a class="nav-link" href="{{url('/quipakana/document/add')}}"><i class="bx bx-message-square-add me-1"></i> Add Document</a></li>
      <li class="nav-item"><a class="nav-link active" href="#"><i class="bx bx-message-square-add me-1"></i> Add Multiple Documents</a></li>
      <!--<li class="nav-item"><a class="nav-link" href="{{url('pages/account-settings-connections')}}"><i class="bx bx-link-alt me-1"></i> Connections</a></li>-->
    </ul>
    <div class="card mb-4">
      <h5 class="card-header">Profile Details</h5>
      <!-- Account -->
      <form id="" method="POST" action="{{ route('save-coupon') }}" enctype="multipart/form-data">
        @csrf
        <!--<div class="card-body">
          @if (\Session::has('error'))
            <div class="alert alert-danger alert-dismissible" role="alert">
              {{\Session::get('error')}}
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
              </button>
            </div>
            @include('content.notification.notification', ['msg' => \Session::get('error')])
            <script>
              $(document).ready(function(){
                let toastPlacementExample = document.querySelector('.toast-clickyourcity-notify'),
                selectedType = 'bg-danger';
                toastPlacementExample.classList.add(selectedType);
                //console.log(toastPlacementExample);
                DOMTokenList.prototype.add.apply(toastPlacementExample.classList, ['bottom', 'end', 'right']);
                toastPlacement = new bootstrap.Toast(toastPlacementExample);
                toastPlacement.show();
              });
            </script>

          @endif
          @if (sizeof($errors->all()))

            @include('content.notification.notification')
            <script>
              $(document).ready(function(){
                let toastPlacementExample = document.querySelector('.toast-clickyourcity-notify'),
                selectedType = 'bg-danger';
                toastPlacementExample.classList.add(selectedType);
                //console.log(toastPlacementExample);
                DOMTokenList.prototype.add.apply(toastPlacementExample.classList, ['bottom', 'end', 'right']);
                toastPlacement = new bootstrap.Toast(toastPlacementExample);
                toastPlacement.show();
              });
            </script>
          @endif
          <div class="d-flex align-items-start align-items-sm-center gap-4">
            <img src="{{asset('assets/img/backgrounds/18.jpg')}}" alt="user-avatar" class="d-block rounded" height="100" width="100" id="uploadedAvatar" />
            <div class="button-wrapper">
              <label for="upload" class="btn btn-primary me-2 mb-4" tabindex="0">
                <span class="d-none d-sm-block">Upload new photo</span>
                <i class="bx bx-upload d-block d-sm-none"></i>
                <input type="file" id="upload" name="imageCoupon" class="account-file-input" hidden accept="image/png, image/jpeg" />
              </label>
              <button type="button" class="btn btn-outline-secondary account-image-reset mb-4">
                <i class="bx bx-reset d-block d-sm-none"></i>
                <span class="d-none d-sm-block">Reset</span>
              </button>

              <p class="text-muted mb-0">Allowed JPG, GIF or PNG. Max size of 800K</p>
            </div>
          </div>
        </div>-->
        <!--<hr class="my-0">-->
        <div class="card-body">
          <div class="row">
            <div class="mb-3 col-md-12">
              <label for="couponTitle" class="form-label">File</label>
              <input value="@if (\Session::has('inputs')){{\Session::get('inputs')['title']}}@endif"
                class="@error('title') is-invalid @enderror form-control" type="file" id="couponTitle" name="title" multiple placeholder="File" autofocus />
                @error('title')
                  <div class="alert alert-danger">{{$message}}</div>
                @enderror
            </div>
            <!--<div class="mb-3 col-md-6">
              <label for="couponDiscount" class="form-label">File name</label>
              <input class="form-control" type="text" placeholder="Fill if u want to change the file name" name="couponDiscount" id="couponDiscount" />
            </div>
            <div class="mb-3 col-md-6">
                <label for="couponPhone" class="form-label">Category</label>
                <select id="couponPhone" name="couponPhone" class="form-select">
                    <option>--Select--</option>
                    <option value="9545932741">Docs</option>
                    <option value="9546054785">Signs</option>
                </select>
            </div>
            <div class="mb-3 col-md-6">
                <label for="couponPhone" class="form-label">Owner</label>
                <select id="couponPhone" name="couponPhone" class="form-select">
                    <option>--Select--</option>
                    <option value="9545932741">gian.palomino@quipakana.com - Gian Carlo - Engeneer</option>
                    <option value="9545932741">cristian.more@quipakana.com - Cristian More - Engeneer</option>
                    <option value="9546054785">jack.stanton@quipakana.com - Jack Stanton - PM</option>
                    <option value="9812545740">jackeline.shon@quipakana.com - Jackeline Shon - Secretary</option>
                  <option value="9812545740">max.jhonson@quipakana.com - Max Jhonson - CEO</option>
                </select>
            </div>-->
            <!--<div class="mb-3 col-md-6">
              <label for="couponEndDate" class="form-label">End Date</label>
              <input class="form-control" type="date" id="couponEndDate" name="endDate" value="" autofocus />
            </div>
            <div class="mb-3 col-md-6 value-cyc price">
              <label for="couponPriceBefore" class="form-label">Price Before</label>
              <input class="form-control" type="number" name="couponPriceBefore" id="couponPriceBefore" value="99.99" />
            </div>
            <div class="mb-3 col-md-6 value-cyc percent" style="display: none">
              <label for="couponDiscount" class="form-label">Discount</label>
              <input class="form-control" type="text" name="couponDiscount" id="couponDiscount" value="40" />
            </div>
            <div class="mb-3 col-md-6">
                <label for="couponPhone" class="form-label">Phone</label>
                <select id="couponPhone" name="couponPhone" class="form-select">
                    <option>--Select--</option>
                    <option value="9545932741">954 593 2741</option>
                    <option value="9546054785">954 605 4785</option>
                    <option value="9812545740">981 254 5740</option>
                </select>
            </div>
            <div class="mb-3 col-md-6 value-cyc price">
              <label for="couponPriceAfter" class="form-label">Price After</label>
              <input class="form-control" type="number" name="couponPriceAfter" id="couponPriceAfter" value="49.99" />
            </div>
            <div class="mb-3 col-md-6">
              <label for="couponEmail" class="form-label">E-mail</label>
              <input class="form-control" type="text" id="couponEmail" name="couponEmail" value="john.doe@example.com" placeholder="john.doe@example.com" />
            </div>
            <div class="mb-3 col-md-6 value-cyc promo" style="display: none">
              <label for="couponCondition" class="form-label">Condition</label>
              <input class="form-control" type="text" id="couponCondition" name="couponCondition" value="Only fridays" placeholder="Only fridays" />
            </div>
            <div class="mb-3 col-md-6">
              <label for="couponTotal" class="form-label">Total Coupons</label>
              <input class="form-control" type="number" id="couponTotal" name="couponTotal" value="50" placeholder="50" />
            </div>-->
            <!--<div class="mb-3 col-md-6">
                <label for="idDomain" class="form-label">Domain</label>
                <input class="form-control" type="text" id="idDomain" name="idDomain" />
            </div>
            <div class="mb-3 col-md-12">
                <label for="couponDescription" class="form-label">Description</label>
                <textarea class="form-control" name="couponDescription" id="couponDescription" rows="3"></textarea>
            </div>-->
          </div>
          <div class="mt-2">
            <button type="submit" class="btn btn-primary me-2">Save</button>
            <a href="{{ url()->previous() }}" type="reset" class="btn btn-outline-secondary">Cancel</a>
          </div>
        </div>
      </form>
      <!-- /Account -->
    </div>

    <div class="card">
      <div class="table-responsive text-nowrap">
        <table class="table">
          <thead>
            <tr>
              <th>Name</th>
              <th>Category</th>
              <th>Owner</th>
              <!--<th>Price Before</th>
              <th>Price After</th>
              <th>Percent</th>
              <th>Quantity</th>
              <th>Image</th>
              <th>State</th>-->
            </tr>
          </thead>
          <tbody class="table-border-bottom-0">
            <tr>
              <td>Invoice_Open_plaza_February-16.pdf</td>
              <td>
                <select id="couponPhone" name="couponPhone" class="form-select">
                    <option>--Select--</option>
                    <option selected value="9545932741">Docs</option>
                    <option value="9546054785">Signs</option>
                </select>
              </td>
              <td>
                <select id="couponPhone" name="couponPhone" class="form-select">
                    <option>--Select--</option>
                    <option value="9545932741">gian.palomino@quipakana.com - Gian Carlo - Engeneer</option>
                    <option value="9545932741">cristian.more@quipakana.com - Cristian More - Engeneer</option>
                    <option value="9546054785">jack.stanton@quipakana.com - Jack Stanton - PM</option>
                    <option selected value="9812545740">jackeline.shon@quipakana.com - Jackeline Shon - Secretary</option>
                  <option value="9812545740">max.jhonson@quipakana.com - Max Jhonson - CEO</option>
                </select>
              </td>
            </tr>
            <tr>
              <td>Invoice_Open_plaza_February-17.pdf</td>
              <td>
                <select id="couponPhone" name="couponPhone" class="form-select">
                    <option>--Select--</option>
                    <option value="9545932741">Docs</option>
                    <option value="9546054785">Signs</option>
                </select>
              </td>
              <td>
                <select id="couponPhone" name="couponPhone" class="form-select">
                    <option>--Select--</option>
                    <option value="9545932741">gian.palomino@quipakana.com - Gian Carlo - Engeneer</option>
                    <option value="9545932741">cristian.more@quipakana.com - Cristian More - Engeneer</option>
                    <option value="9546054785">jack.stanton@quipakana.com - Jack Stanton - PM</option>
                    <option value="9812545740">jackeline.shon@quipakana.com - Jackeline Shon - Secretary</option>
                  <option value="9812545740">max.jhonson@quipakana.com - Max Jhonson - CEO</option>
                </select>
              </td>
            </tr>
            <tr>
              <td>Invoice_Open_plaza_February-18.pdf</td>
              <td>
                <select id="couponPhone" name="couponPhone" class="form-select">
                    <option>--Select--</option>
                    <option value="9545932741">Docs</option>
                    <option value="9546054785">Signs</option>
                </select>
              </td>
              <td>
                <select id="couponPhone" name="couponPhone" class="form-select">
                    <option>--Select--</option>
                    <option value="9545932741">gian.palomino@quipakana.com - Gian Carlo - Engeneer</option>
                    <option value="9545932741">cristian.more@quipakana.com - Cristian More - Engeneer</option>
                    <option value="9546054785">jack.stanton@quipakana.com - Jack Stanton - PM</option>
                    <option value="9812545740">jackeline.shon@quipakana.com - Jackeline Shon - Secretary</option>
                  <option value="9812545740">max.jhonson@quipakana.com - Max Jhonson - CEO</option>
                </select>
              </td>
            </tr>

            <!--
            <tr>
              <td><i class="bx bxl-angular bx-sm text-danger me-3"></i> <span class="fw-medium">Angular Project</span></td>
              <td>Albert Cook</td>
              <td>
                <ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
                  <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
                    <img src="{{asset('assets/img/avatars/5.png')}}" alt="Avatar" class="rounded-circle">
                  </li>
                  <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
                    <img src="{{asset('assets/img/avatars/6.png')}}" alt="Avatar" class="rounded-circle">
                  </li>
                  <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
                    <img src="{{asset('assets/img/avatars/7.png')}}" alt="Avatar" class="rounded-circle">
                  </li>
                </ul>
              </td>
              <td><span class="badge bg-label-primary me-1">Active</span></td>
              <td>
                <div class="dropdown">
                  <button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i> Edit</a>
                    <a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i> Delete</a>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td><i class="bx bxl-react bx-sm text-info me-3"></i> <span class="fw-medium">React Project</span></td>
              <td>Barry Hunter</td>
              <td>
                <ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
                  <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
                    <img src="{{asset('assets/img/avatars/5.png')}}" alt="Avatar" class="rounded-circle">
                  </li>
                  <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
                    <img src="{{asset('assets/img/avatars/6.png')}}" alt="Avatar" class="rounded-circle">
                  </li>
                  <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
                    <img src="{{asset('assets/img/avatars/7.png')}}" alt="Avatar" class="rounded-circle">
                  </li>
                </ul>
              </td>
              <td><span class="badge bg-label-success me-1">Completed</span></td>
              <td>
                <div class="dropdown">
                  <button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-2"></i> Edit</a>
                    <a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-2"></i> Delete</a>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td><i class="bx bxl-vuejs bx-sm text-success me-3"></i> <span class="fw-medium">VueJs Project</span></td>
              <td>Trevor Baker</td>
              <td>
                <ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
                  <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
                    <img src="{{asset('assets/img/avatars/5.png')}}" alt="Avatar" class="rounded-circle">
                  </li>
                  <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
                    <img src="{{asset('assets/img/avatars/6.png')}}" alt="Avatar" class="rounded-circle">
                  </li>
                  <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
                    <img src="{{asset('assets/img/avatars/7.png')}}" alt="Avatar" class="rounded-circle">
                  </li>
                </ul>
              </td>
              <td><span class="badge bg-label-info me-1">Scheduled</span></td>
              <td>
                <div class="dropdown">
                  <button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-2"></i> Edit</a>
                    <a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-2"></i> Delete</a>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td><i class="bx bxl-bootstrap bx-sm text-primary me-3"></i> <span class="fw-medium">Bootstrap Project</span></td>
              <td>Jerry Milton</td>
              <td>
                <ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
                  <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
                    <img src="{{asset('assets/img/avatars/5.png')}}" alt="Avatar" class="rounded-circle">
                  </li>
                  <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
                    <img src="{{asset('assets/img/avatars/6.png')}}" alt="Avatar" class="rounded-circle">
                  </li>
                  <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
                    <img src="{{asset('assets/img/avatars/7.png')}}" alt="Avatar" class="rounded-circle">
                  </li>
                </ul>
              </td>
              <td><span class="badge bg-label-warning me-1">Pending</span></td>
              <td>
                <div class="dropdown">
                  <button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-2"></i> Edit</a>
                    <a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-2"></i> Delete</a>
                  </div>
                </div>
              </td>
            </tr>
            -->
          </tbody>
        </table>
      </div>
      <!--<div class="card-body">
        <div class="row">
          <div class="col-lg-12 align-center">
            <div class="demo-inline-spacing">
               Basic Pagination
              <nav aria-label="Page navigation">
                <ul class="pagination" style="justify-content: center;">
                  <li class="page-item first">
                    <a class="page-link" href="javascript:void(0);"><i class="tf-icon bx bx-chevrons-left"></i></a>
                  </li>
                  <li class="page-item prev">
                    <a class="page-link" href="javascript:void(0);"><i class="tf-icon bx bx-chevron-left"></i></a>
                  </li>
                  <li class="page-item active">
                    <a class="page-link" href="javascript:void(0);">1</a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="javascript:void(0);">2</a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="javascript:void(0);">3</a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="javascript:void(0);">4</a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="javascript:void(0);">5</a>
                  </li>
                  <li class="page-item next">
                    <a class="page-link" href="javascript:void(0);"><i class="tf-icon bx bx-chevron-right"></i></a>
                  </li>
                  <li class="page-item last">
                    <a class="page-link" href="javascript:void(0);"><i class="tf-icon bx bx-chevrons-right"></i></a>
                  </li>
                </ul>
              </nav>
              / Basic Pagination
            </div>
          </div>
        </div>
      </div>-->
    </div>
  </div>
</div>
<script>
    $(document).ready(function(){

        $("input[name='couponType']").change(function(e){
            let clase = $(e.currentTarget).val();
            $(".value-cyc").css("display", "none");
            $("."+clase).css("display", "block");
        });

    });
</script>
@endsection