@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <h1>Dashboard</h1>
@endsection

@section('content')
    <h1>Opciones para mercadotecnia</h1>

    <div class="container">
        <div class="row">
            {{-- Coupons section --}}
            <div class="col-lg-6 col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title text-bold">Cupones</h5>
                        <p class="card-text mb-2 text-body-secondary">
                            Crea o mira los cupones que estan en vigencia
                        </p>
                        <div class="buttons-group">
                            <button class="btn btn-success" id="newCoupon">Crear nuevo cupón</button>
                            <button class="btn btn-info" id="listCoupons">Ver cupones</button>
                        </div>
                    </div>
                    <div class="card-footer">
                        {{-- Ni idea que poner --}}
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Make coupons --}}
    <div class="modal fade" id="newCouponModal" tabindex="-1" role="dialog" aria-labelledby="newCouponModal"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-success" id="newCouponTitle">Nuevo cupón</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Cerrar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form autocomplete="off" id="unlinkForm" action="{{ Route('makeCoupon') }}" method="post">
                        @csrf

                        <div class="form-group">
                            <label for="usersSelect">Usuario Destinado</label>
                            <div class="row">
                                <div class="col-8">
                                    <select name="userSelect" id="userSelect" class="select2 form-control mt-1"
                                        style="width: 100%">
                                        <option value="noUser">Seleccione uno</option>
                                        @foreach ($users as $user)
                                            <option value="{{ $user->id }}">{{ $user->display_name }}
                                                ({{ $user->email }})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-4">
                                    <label for="noUser">Sin usuario</label>
                                    <input type="checkbox" class="mt-2" name="noUser" id="noUser">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="coupon">Cupón</label>
                            <input class="form-control" type="text" name="coupon" id="coupon" minlength="5"
                                maxlength="6" placeholder="Ingrese el cupón o presione el boton de abajo." required>
                        </div>
                        <div class="form-group">
                            <label for="randomCoupon">Generar automaticamente</label>
                            <input type="checkbox" name="randomCoupon" id="randomCoupon">
                        </div>

                        {{-- Se selecciona en donde se podra usar el cupón --}}
                        <div class="form-group" id="choiseWhere">
                            <div class="row">
                                <label for="whereCanUse">En que apartado se usara el cupón?</label>
                                <div class="col-8">
                                    <select name="whereCanUse" id="whereCanUse" class="form-control">
                                        <option value="" disabled selected>Selecciona una</option>
                                        <option value="product">En un producto</option>
                                        <option value="brand">En una marca</option>
                                        <option value="Category">En una categoria</option>
                                    </select>
                                </div>
                                <div class="col-4">
                                    <label for="noSection">En todos</label>
                                    <input type="checkbox" name="noSection" id="noSection">
                                </div>
                            </div>
                        </div>

                        <div class="form-group" id="choiseProduct" style="display: none;">
                            <label for="productChoised">Selecciona un producto:</label>
                            <select name="productChoised" id="productChoised" class="select2 form-control"
                                style="width: 100%">
                                <option value="">Selecciona uno*</option>
                                @foreach ($products as $product)
                                    <option value="{{ $product->id }}">{{ $product->display_name }}
                                        ({{ $product->model }})
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group" id="choiseInstance" style="display: none;">
                            <label for="instanceChoised">Selecciona la existencia que aplicara este producto:</label>
                            <select name="instanceChoised" id="instanceChoised" class="select2 form-control"
                                style="width: 100%">
                                <option value="">Selecciona uno*</option>
                            </select>
                        </div>

                        <div class="form-group" id="choiseBrand" style="display: none;">
                            <label for="brandChoised">Selecciona una marca:</label>
                            <select name="brandChoised" id="brandChoised" class="select2 form-control"
                                style="width: 100%">
                                <option value="">Selecciona uno*</option>
                                @foreach ($brands as $brand)
                                    <option value="{{ $brand->id }}">{{ $brand->display_name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group" id="choiseCategory" style="display: none;">
                            <label for="categoryChoised">Selecciona una categoría:</label>
                            <select name="categoryChoised" id="categoryChoised" class="select2 form-control"
                                style="width: 100%">
                                <option value="">Selecciona uno*</option>
                                @foreach ($categories as $category)
                                    <option value="{{ $category->id }}">{{ $category->display_name }}</option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Checar que tipo de cupón es
                        * no se si sea necesario agregar esta funcionalidad, creo que lo mas
                        *optimo es dejar solo porcentaje --}}
                        <div class="form-group">
                            <p class="text-bold">Seleccione una opcion para el cupón</p>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="typeCoupon" id="percentageCoupon" value="percentage"
                                    required checked>
                                <label class="form-check-label" for="percentageCoupon">
                                    Cupón por porcentaje
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="typeCoupon" id="discountCoupon" value="discount"
                                    required>
                                <label class="form-check-label" for="discountCoupon">
                                    Cupón por precio
                                </label>
                            </div>
                        </div>

                        <div class="form-group" id="percentageChoised">
                            <label for="percentageDiscount">Porcentaje a descontar</label>
                            <input type="number" name="percentageDiscount" id="percentageDiscount" class="form-control"
                                placeholder="Ingresa el procentaje a descontar">
                            <small>Si se deja en blanco el porcentaje será de 15% de descuento</small>
                        </div>

                        <div class="form-group" id="priceChoised" style="display: none;">
                            <label for="priceDiscount">Precio en oferta (por el cupón)</label>
                            <input type="number" name="priceDiscount" id="priceDiscount" class="form-control"
                                placeholder="Ingresa el precio en oferta">
                            <small>Si se deja en blanco el precio para descontar son $100</small>
                        </div>
                        <div class="form-group">
                            <label for="allProducts">Limite de uso:</label>
                            <input type="number" class="form-control" name="usesLimit" id="usesLimit" value="1"
                                placeholder="Ingrese un limite" required>
                            <small>Cuantos usos va a tener el cupón</small>
                        </div>

                        <div class="form-group">
                            <label for="allProducts">En compras minimas:</label>
                            <div class="row">
                                <div class="col-8">
                                    <input type="number" class="form-control" name="minCost" id="minCost"
                                        placeholder="$500" min="0">
                                </div>
                                <div class="col-4">
                                    <label for="noRestrictionCost">Sin restricción</label>
                                    <input type="checkbox" class="mt-2" name="noRestrictionCost"
                                        id="noRestrictionCost">
                                </div>
                            </div>
                            <small>Si se deja vacio, el valor por defecto es en compras mayores a $500</small>
                        </div>

                        <div class="form-group mt-2">
                            <label for="noDate">Uso individual</label>
                            <input type="checkbox" class="mt-2" name="onlyUse" id="onlyUse"><br>
                            <small>Marca esta casilla si el cupon no se puede usar en conjunto a otros cupones</small>
                        </div>

                        <div class="form-group">
                            <label for="allProducts">Fecha de expiración:</label>
                            <div class="row">
                                <div class="col-8">
                                    <input type="date" class="form-control" name="dateOffertEnd" id="dateOffertEnd">
                                </div>
                                <div class="col-4">
                                    <label for="noDate">Sin fecha</label>
                                    <input type="checkbox" class="mt-2" name="noDate" id="noDate">
                                </div>
                            </div>
                        </div>


                        <div class="modal-footer">
                            <button type="submit" class="btn btn-warning" id="submitCoupon">Crear cupón</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Show all offerts --}}
    <div class="modal fade" id="showCouponsModal" tabindex="-1" role="dialog" aria-labelledby="showOfferts"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-info">Todos los cupones</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Cerrar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Cupón</th>
                                <th>Descuento de:</th>
                                <th>Limite de uso:</th>
                                <th>En compras minimas:</th>
                                <th>Unico uso</th>
                                <th>Aplica en:</th>
                                <th>Tiempo de expiración</th>
                                <th>*</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($coupons as $coupon)
                                <tr>
                                    <td>{{ $coupon->coupon }}</td>
                                    <td>
                                        @isset($coupon->percentage)
                                            <p> {{ $coupon->percentage }}% del precio</p>
                                        @endisset
                                        @isset($coupon->discount_price)
                                            <p> ${{ $coupon->discount_price }} MXN</p>
                                        @endisset
                                    </td>
                                    <td>{{ $coupon->uses_limit }} uso</td>
                                    <td>
                                        @if ($coupon->min_cost )
                                        ${{ $coupon->min_cost }} MXN
                                        @else
                                        <span class="text-info">Sin restricción de precio</span>
                                        @endif
                                    </td>
                                    <td>{{ $coupon->only_use == true ? 'SI' : 'NO' }}</td>
                                    <td>
                                        @isset($coupon->instance)
                                            <p>Producto: {{ $coupon->instance->product->display_name }} |
                                                {{ $coupon->instance->attributes->first()->display_name }} |
                                                {{ $coupon->instance->store->store_name }}</p>
                                        @endisset
                                        @isset($coupon->category)
                                            <p>Categoria: {{ $coupon->category->display_name }}</p>
                                        @endisset
                                        @isset($coupon->brand)
                                            <p>Marca: {{ $coupon->brand->display_name }}</p>
                                        @endisset
                                        @isset($coupon->user)
                                            <p>Usuario: {{ $coupon->user->display_name }}</p>
                                        @endisset
                                        @if (!$coupon->instance && !$coupon->category && !$coupon->brand && !$coupon->user)
                                            <p class="text-info">Sin restricción</p>
                                        @endif
                                    </td>
                                    @if ($coupon->exp_time)
                                        <td>{{ $coupon->exp_time }}</td>
                                    @else
                                        <td class="text-info">Hasta que se borre o se termine los usos del cupon</td>
                                    @endif
                                    <td>
                                        <a href="" class="btn btn-warning mod-coupon"
                                            data-coupon-id="{{ $coupon->id }}"><i class="fa fa-cog"></i></a>
                                        <a href="" class="btn btn-danger drop-coupon"
                                            data-coupon-id="{{ $coupon->id }}"><i class="fa fa-trash"></i></a>

                                        <form id="dropCoupon_{{ $coupon->id }}" action="{{ route('dropCoupon') }}"
                                            method="POST">
                                            @csrf
                                            @method('DELETE')
                                            <input type="hidden" name="couponId" value="{{ $coupon->id }}">
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    </div>
                </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @vite('resources/js/marketing/marketing.js')
@endsection