@extends('layouts/contentNavbarLayout')

@section('title', 'Tables - Basic Tables')

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

<div class="row">
    <div class="col-md-12">
    <ul class="nav nav-pills flex-column flex-md-row mb-3">
      @php
        $session = @Session::has('admin')?'admin':'business';
      @endphp
      <li class="nav-item"><a class="nav-link active" href="#"><i class="bx bx-user me-1"></i> List</a></li>
      <li class="nav-item"><a class="nav-link" href="{{url('/'.$session.'/create-coupon')}}"><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>
</div>
@include('content.notification.notification')
<!-- Basic Bootstrap Table -->
<div class="card">
  <form action="">
    <div class="container mb-4 mt-3">
        <div class="row">

            <div class="col-md-3">
              <label for="title" class="form-label">Title</label>
              <input class="form-control" type="text" value="{{\Request::get('title')}}" name="title" id="title"/>
            </div>
            <div class="col-md-3">
              <label for="startDate" class="form-label">Start Date</label>
              <input class="form-control" type="date" value="{{\Request::get('startDate')}}" name="startDate" id="startDate"/>
            </div>
            <div class="col-md-3">
              <label for="endDate" class="form-label">End Date</label>
              <input class="form-control" type="date" value="{{\Request::get('endDate')}}" name="endDate" id="endDate"/>
            </div>
            @if (Session::get('rol') == 'admin')
              <div class="col-md-3">
                <label for="nameBusiness" class="form-label">Business</label>
                <input class="form-control" type="text" value="{{\Request::get('nameBusiness')}}" name="nameBusiness" id="nameBusiness"/>
              </div>
            @endif
            @if (Session::get('rol') == 'admin')
            <div class="col-md-3">
              <label for="nameDomain" class="form-label">Website</label>
              <input class="form-control" type="text" value="{{\Request::get('nameDomain')}}" name="nameDomain" id="nameDomain"/>
            </div>
            @else
              @if ( sizeof($domain) > 1 )
              <div class="col-md-3">
                <label for="nameDomain" class="form-label">Website</label>
                <input class="form-control" type="text" value="{{\Request::get('nameDomain')}}" name="nameDomain" id="nameDomain"/>
              </div>
              @endif
            @endif
            <div class="col-md-3">
              <label for="nameDomain" class="form-label">Quantity</label>
              <div class="input-group">
                <input type="text" value="{{\Request::get('minQuantity')}}" name="minQuantity" id="minQuantity" class="form-control">
                <select name="minSymbolQuantity" id="minSymbolQuantity" class="btn btn-outline-primary dropdown-toggle show" type="button" data-bs-toggle="dropdown" aria-expanded="true">
                  <option {{ \Request::get('minSymbolQuantity') == '>=' ? 'selected' : '' }} value=">="><=</option>
                  <option {{ \Request::get('minSymbolQuantity') == '>' ? 'selected' : '' }} value=">"><</option>
                </select>
                <select name="maxSymbolQuantity" id="maxSymbolQuantity" class="btn btn-outline-primary dropdown-toggle show" type="button" data-bs-toggle="dropdown" aria-expanded="true" style="border-radius: unset !important">
                  <option {{ \Request::get('maxSymbolQuantity') == '<=' ? 'selected' : '' }} value="<="><=</option>
                  <option {{ \Request::get('maxSymbolQuantity') == '<' ? 'selected' : '' }} value="<"><</option>
                </select>
                <input type="text" value="{{\Request::get('maxQuantity')}}" name="maxQuantity" id="maxQuantity" class="form-control">
              </div>
            </div>
            <div class="col-md-3">
              <label for="state" class="form-label">State</label>
              <select class="form-select" value="{{\Request::get('state')}}" name="state" id="state">
                <option value="">Select</option>
                <option {{ \Request::get('state') == 'inactive' ? 'selected' : '' }} value="inactive">Inactive</option>
                <option {{ \Request::get('state') == 'active' ? 'selected' : '' }} value="active">Active</option>
                <option {{ \Request::get('state') == 'draft' ? 'selected' : '' }} value="draft">Draft</option>
                <option {{ \Request::get('state') == 'approved' ? 'selected' : '' }} value="approved">Approved</option>
              </select>
            </div>
            <div class="col-md-3">
                <label for="type" class="form-label">Type</label>
                <div class="col">
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" name="price" type="checkbox" id="price" value="true"
                    @if ( \Request::get('price') )
                      checked
                    @endif>
                    <label class="form-check-label" for="price">Price</label>
                  </div>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" name="percent" type="checkbox" id="percent" value="true"
                    @if ( \Request::get('percent') )
                      checked
                    @endif>
                    <label class="form-check-label" for="percent">Percent</label>
                  </div>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" name="promo" type="checkbox" id="promo" value="true"
                    @if ( \Request::get('promo') )
                      checked
                    @endif>
                    <label class="form-check-label" for="promo">Promo</label>
                  </div>
                </div>
            </div>

        </div>
        <div class="row justify-content-end">
          <div class="col-3 mt-3 d-flex justify-content-end">
            <input type="submit" class="btn btn-primary me-2" value="Filter">
          </div>
        </div>
    </div>
  </form>
  <!--<hr class="my-2">-->
  <div class="card-body">
    <div class="table-responsive text-nowrap">
      <table class="table">
        <thead>
          <tr>
            <th>@sortablelink('title', 'Title')</th>
            <th>@sortablelink('startDate', 'Start Date')</th>
            <th>@sortablelink('endDate', 'End Date')</th>
            <th>@sortablelink('state', 'State')</th>
            <th>@sortablelink('typeValue', 'Type')</th>
            <th>P. Before</th>
            <th>P. After</th>
            <th>Percent</th>
            <th>@sortablelink('quantity', 'Quantity')</th>
            <th>Image</th>
            @if (Session::get('rol') == 'admin')<th>Business</th>@endif
            @if (Session::get('rol') == 'admin')
            <th>Website</th>
            @else
              @if ( sizeof($domain) > 1 )
                <th>Website</th>
              @endif
            @endif
            <th>Actions</th>
          </tr>
        </thead>
        <tbody class="table-border-bottom-0">
          @if(count($data)>0)
            @foreach ($data as $d)
              <tr>
                <td>{{$d->title}}</td>
                <td>{{$d->startDate}}</td>
                <td>{{$d->endDate}}</td>
                @if ($session == 'admin')
                  <td>
                    <a for="#updateState-{{$d->id}}" id="updaterState-{{$d->id}}" style="cursor: pointer;" class="changeStateButton">
                      <span class="badge bg-label-primary me-1">
                        {{$d->state}}
                      </span>
                    </a>
                    <select data-id="{{ $d->id }}" for="#updaterState-{{$d->id}}" id="updateState-{{$d->id}}" class="btn btn-primary updateStateSelector" style="display: none">
                      <option {{ $d->state == 'draft' ? 'selected' : '' }} value="draft">Draft</option>
                      <option {{ $d->state == 'review' ? 'selected' : '' }} value="review">Review</option>
                      <option {{ $d->state == 'disapproved' ? 'selected' : '' }} value="disapproved">Disapproved</option>
                      <option {{ $d->state == 'approved' ? 'selected' : '' }} value="approved">Approved</option>
                    </select>
                  </td>
                @else
                  <td><span class="badge bg-label-primary me-1">{{$d->state}}</span></td>
                @endif
                <td>{{$d->typeValue}}</td>
                <td>{{ $d->priceBefore == null ? '-' : $d->priceBefore }}</td>
                <td>{{ $d->priceAfter == null ? '-' : $d->priceAfter }}</td>
                <td>
                  {{ $d->percent == null ? '-' : $d->percent }}
                </td>
                <td>{{$d->quantity}}</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">
                      <img src="{{ $d->image }}" alt="Avatar" class="rounded-circle">
                    </li>
                  </ul>
                </td>
                @if (Session::get('rol') == 'admin')<td>{{$d->business}}</td>@endif
                @if (Session::get('rol') == 'admin')
                <td>{{$d->domain}}</td>
                @else
                  @if ( sizeof($domain) > 1 )
                    <td>{{$d->domain}}</td>
                  @endif
                @endif
                <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="/{{$session}}/update-coupon/{{$d->hash}}"><i class="bx bx-edit-alt me-1"></i> Edit</a>
                      <a class="dropdown-item" href="{{ url('/delete/co/'.$d->hash) }}"><i class="bx bx-trash me-1"></i> Delete</a>
                    </div>
                  </div>
                </td>
              </tr>
            @endforeach
          @else
            {{ "No hay nada" }}
          @endif
        </tbody>
      </table>
      <div class="container"><div class="col-12" id="paginator">{!! $data->appends(request()->query())->render() !!}</div></div>
    </div>
  </div>

</div>

<script>
  $(document).ready(function(){

    function UpdateStateAjax(id, state) {
      $.ajax({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        type: 'post',
        data: { id: id, state: state },
        url: '/UpdateState',
        success: function (data) {
          if(data.success){
            $(`#updaterState-${id} span`).html(state);
            $("#title").html("Success");
            $("#message").html(data.message);
            let toastPlacementExample = document.querySelector('.toast-clickyourcity-notify'),
            selectedType = 'bg-success';
            toastPlacementExample.classList.add(selectedType);
            //console.log(toastPlacementExample);
            DOMTokenList.prototype.add.apply(toastPlacementExample.classList, ['bottom', 'end', 'right']);
            toastPlacement = new bootstrap.Toast(toastPlacementExample);
            toastPlacement.show();
          }else{
            $("#title").html("Error");
            $("#message").html(data.message);
            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();
          }
        },
        error: function(error){}
      });
    }

    $(".changeStateButton").on('click', function(e){
      let id = $(e.currentTarget).attr("for");
      let display = $(id).css("display");
      if(display == "none"){
        $(id).css("display", "block");
        $(e.currentTarget).css("display", "none");
      }else{
        $(id).css("display", "none");
        $(e.currentTarget).css("display", "block");
      }
    });

    $(".updateStateSelector").on('change', function(e){
      let id = $(e.currentTarget).attr("for");
      let display = $(id).css("display");
      let state = $(e.currentTarget).val();
      let dataid = $(e.currentTarget).attr("data-id");
      if(display == "none"){
        $(id).css("display", "block");
        $(e.currentTarget).css("display", "none");
      }else{
        $(id).css("display", "none");
        $(e.currentTarget).css("display", "block");
      }
      UpdateStateAjax(dataid, state);

    });

  });
</script>

<!--/ Basic Bootstrap Table -->

@endsection