@extends('layouts/contentNavbarLayout')

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

@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">Category /</span> Create
</h4>

<div class="row">
  <div class="col-md-12">
    <ul class="nav nav-pills flex-column flex-md-row mb-3">
      @php
        $rol = @Session::has('admin')?'admin':'business';
      @endphp
      <li class="nav-item"><a class="nav-link" href="{{url('/'.$rol.'/category')}}"><i class="bx bx-user me-1"></i> List</a></li>
      <li class="nav-item"><a class="nav-link active" href="#">
        @if (!isset($category))
          <i class="bx bx-message-square-add me-1"></i> Add
        @else
          <i class="bx bx-message-square-edit me-1"></i> Update
        @endif
      </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 -->
      @if (!isset($category))
        <form id="" method="POST" action="{{ route('save-category') }}" enctype="multipart/form-data">
          @csrf

          <div class="card-body">
            <div class="row">
              <div class="mb-3 col-md-6">
                <label for="categoryName" class="form-label">Name</label>
                @include('content.special-field.field',
                [
                  'id'=> 'categoryName',
                  'type' => 'text',
                  'placeholder' => '',
                  'field' => 'categoryName',
                  'message' => isset($message)?$message:''
                ])
              </div>
              <div class="mb-3 col-md-6">
                <label for="categoryDescription" class="form-label">Description</label>
                @include('content.special-field.field',
                [
                  'id'=> 'categoryDescription',
                  'type' => 'text',
                  'placeholder' => '',
                  'field' => 'categoryDescription',
                  'message' => isset($message)?$message:''
                ])
              </div>
              <div class="mb-3 col-md-6">
                <label for="categoryIcon" class="form-label">Icon</label>
                <div class="input-group">
                  <span class="input-group-text" id="basic-addon"></span>
                  <!--<input class="form-control" for="icons" type="text" id="categoryIcon" name="categoryIcon" aria-describedby="basic-addon" />-->
                  @include('content.special-field.field',
                  [
                    'id'=> 'categoryIcon',
                    'type' => 'text',
                    'placeholder' => '',
                    'field' => 'categoryIcon',
                    'message' => isset($message)?$message:''
                  ])
                </div>
                <style>
                  .icons-element{
                    height: 36px; padding: 5px 10px; border-bottom: 1px solid #c7cdd4; display: flex; flex-wrap: wrap; align-content: center; cursor: pointer;
                  }
                  .icons-element:hover{
                    background-color: #696cff;
                    color: white;
                  }
                </style>
                <div class="form-control" id="icons" style="display: none; height: 210px; overflow-y: scroll; padding: unset;">
                  @foreach($icons as $i)
                    <div class="icons-element" value="{{$i['class']}}"><i class="{{$i['class']}}"></i>  {{$i['name']}}</div>
                  @endforeach
                </div>
              </div>
              <div class="mb-3 col-md-6">
                <label for="categoryColor" class="form-label">Color</label>
                @include('content.special-field.field',
                [
                  'id'=> 'categoryColor',
                  'type' => 'color',
                  'placeholder' => '',
                  'field' => 'categoryColor',
                  'message' => isset($message)?$message:''
                ])
              </div>
            </div>
            <div class="mt-2">
              <button type="submit" class="btn btn-primary me-2">Save changes</button>
              <a href="{{ url()->previous() }}" type="reset" class="btn btn-outline-secondary">Cancel</a>
            </div>
          </div>
        </form>
      @else
        <form id="" method="POST" action="{{ route('edit-category') }}" enctype="multipart/form-data">
          @csrf
          <div class="card-body">
            <div class="row">
              <input type="hidden" name="hash" value="{{$category->hash}}"/>
              <div class="mb-3 col-md-6">
                <label for="categoryName" class="form-label">Name</label>
                @include('content.special-field.field',
                [
                  'id'=> 'categoryName',
                  'type' => 'text',
                  'placeholder' => '',
                  'value' => $category->name,
                  'field' => 'categoryName',
                  'message' => isset($message)?$message:''
                ])
              </div>
              <div class="mb-3 col-md-6">
                <label for="categoryDescription" class="form-label">Description</label>
                @include('content.special-field.field',
                [
                  'id'=> 'categoryDescription',
                  'type' => 'text',
                  'placeholder' => '',
                  'value' => $category->description,
                  'field' => 'categoryDescription',
                  'message' => isset($message)?$message:''
                ])
              </div>
              <div class="mb-3 col-md-6">
                <label for="categoryIcon" class="form-label">Icon</label>
                <div class="input-group">
                  <span class="input-group-text" id="basic-addon"></span>
                  <!--<input type="text" class="form-control" placeholder="Username" aria-label="Username" >-->
                  @include('content.special-field.field',
                  [
                    'id'=> 'categoryIcon',
                    'type' => 'text',
                    'placeholder' => '',
                    'value' => $category->icon,
                    'field' => 'categoryIcon',
                    'message' => isset($message)?$message:''
                  ])
                </div>
                <style>
                  .icons-element{
                    height: 36px; padding: 5px 10px; border-bottom: 1px solid #c7cdd4; display: flex; flex-wrap: wrap; align-content: center; cursor: pointer;
                  }
                  .icons-element:hover{
                    background-color: #696cff;
                    color: white;
                  }
                </style>
                <div class="form-control" id="icons" style="display: none; height: 210px; overflow-y: scroll; padding: unset;">
                  @foreach($icons as $i)
                    <div class="icons-element" value="{{$i['class']}}"><i class="{{$i['class']}}"></i>  {{$i['name']}}</div>
                  @endforeach
                </div>
              </div>
              <div class="mb-3 col-md-6">
                <label for="categoryColor" class="form-label">Color</label>
                  @include('content.special-field.field',
                [
                  'id'=> 'categoryColor',
                  'type' => 'color',
                  'placeholder' => '',
                  'value' => $category->color,
                  'field' => 'categoryColor',
                  'message' => isset($message)?$message:''
                ])
              </div>
            </div>
            <div class="mt-2">
              <button type="submit" class="btn btn-primary me-2">Save changes</button>
              <a href="{{ url()->previous() }}" type="reset" class="btn btn-outline-secondary">Cancel</a>
            </div>
          </div>
        </form>
      @endif
      <!-- /Account -->
    </div>
  </div>
</div>

@endsection