@extends('layouts/contentNavbarLayout')

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

@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">Rol /</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/rols')}}"><i class="bx bx-user me-1"></i> List</a></li>
      <li class="nav-item"><a class="nav-link active" href="#"><i class="bx bx-message-square-add me-1"></i> Add</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-4">
              <label for="couponTitle" class="form-label">Name</label>
              <input value="@if (\Session::has('inputs')){{\Session::get('inputs')['title']}}@endif"
                class="@error('title') is-invalid @enderror form-control" type="text" id="couponTitle" name="title" placeholder="Docs" autofocus />
                @error('title')
                  <div class="alert alert-danger">{{$message}}</div>
                @enderror
            </div>
            <div class="mb-3 col-md-8">
              <label for="couponStartDate" class="form-label">Privileges</label>
              <div class="form-check form-switch mb-2">
                <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked="">
                <label class="form-check-label" for="flexSwitchCheckChecked">CRUD Docs</label>
              </div>
              <div class="form-check form-switch mb-2">
                <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked="">
                <label class="form-check-label" for="flexSwitchCheckChecked">CRUD Rols</label>
              </div>
              <div class="form-check form-switch mb-2">
                <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked="">
                <label class="form-check-label" for="flexSwitchCheckChecked">CRUD Users</label>
              </div>
              <div class="form-check form-switch mb-2">
                <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked="">
                <label class="form-check-label" for="flexSwitchCheckChecked">CRUD Categories</label>
              </div>
              <div class="form-check form-switch mb-2">
                <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked="">
                <label class="form-check-label" for="flexSwitchCheckChecked">CRUD Routes</label>
              </div>
              <div class="form-check form-switch mb-2">
                <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked="">
                <label class="form-check-label" for="flexSwitchCheckChecked">Notifications</label>
              </div>
              <div class="form-check form-switch mb-2">
                <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked="">
                <label class="form-check-label" for="flexSwitchCheckChecked">Sign docs</label>
              </div>
            </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">
      <h5 class="card-header">Delete Account</h5>
      <div class="card-body">
        <div class="mb-3 col-12 mb-0">
          <div class="alert alert-warning">
            <h6 class="alert-heading fw-medium mb-1">Are you sure you want to delete your account?</h6>
            <p class="mb-0">Once you delete your account, there is no going back. Please be certain.</p>
          </div>
        </div>
        <form id="formAccountDeactivation" onsubmit="return false">
          <div class="form-check mb-3">
            <input class="form-check-input" type="checkbox" name="accountActivation" id="accountActivation" />
            <label class="form-check-label" for="accountActivation">I confirm my account deactivation</label>
          </div>
          <button type="submit" class="btn btn-danger deactivate-account">Deactivate Account</button>
        </form>
      </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