@extends('layouts.partials.master')

@section('title', 'Produtos')

@push('styles')
    <link href="{{asset('assets/css/forms.css')}}" rel="stylesheet" type="text/css">
    <link href="{{asset('assets/css/section-marker.css')}}" rel="stylesheet" type="text/css">
    <link href="{{asset('assets/css/tables.css')}}" rel="stylesheet" type="text/css">
    <link href="{{asset('assets/css/tabs.css')}}" rel="stylesheet" type="text/css">
    <link href="{{asset('assets/css/cards.css')}}" rel="stylesheet" type="text/css">
    <link href="{{asset('assets/css/badges.css')}}" rel="stylesheet" type="text/css">
@endpush

@section('content')
    <nav aria-label="breadcrumb">
        {!! $breadcrumbs !!}
    </nav>

    <div class="d-flex justify-content-between align-items-center my-4">
        @include('layouts.components.section-title', ['title' => 'Gerir Preçários'])
        <a href="{{ url('prd-products') }}" class="btn btn-sm btn-primary">Voltar <i class="fa-light fa-left-from-line"></i></a>
    </div>

    @include('layouts.components.alerts')

    <ul class="nav nav-tabs custom-tabs" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link" href="{{ route('prd_products.edit', $product->uuid) }}" role="tab" aria-controls="product" aria-selected="false">
                <i class="fas fa-box fa-fw me-2"></i>Produtos
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" href="{{ route('prd_products_attributes.index', $product['uuid']) }}" role="tab" aria-controls="attributes" aria-selected="false">
                <i class="fas fa-tags fa-fw me-2"></i>Atributos
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" data-bs-toggle="tab" href="#variants" role="tab" aria-controls="variants" aria-selected="true">
                <i class="fas fa-layer-group fa-fw me-2"></i>Preçários
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{{ route('prd_product_images.index', $product['uuid']) }}" role="tab" aria-controls="images" aria-selected="false">
                <i class="fas fa-image fa-fw me-2"></i>Imagens
            </a>
        </li>
    </ul>

    <div class="tab-content mt-0">
        <div class="tab-pane fade" id="product" role="tabpanel" aria-labelledby="product-tab">
            <!-- Conteúdo da aba de Produtos -->
        </div>
        <div class="tab-pane fade" id="attributes" role="tabpanel" aria-labelledby="attributes-tab">
            <!-- Conteúdo da aba de Atributos -->
        </div>
        <div class="tab-pane fade show active" id="variants" role="tabpanel" aria-labelledby="variants-tab">
            <form action="{{ route('prd_product_variants.store', ['product' => $product['uuid']]) }}" method="POST" name="base-price" class="mb-4">
                @csrf
                @method('POST')
                <div class="card py-4 px-4">
                    <input type="hidden" name="default" value="default">
                    <input type="hidden" name="uuid" value="{{ $defaultVariant['uuid'] ?? null }}">
                    @include('layouts.components.section-marker', ['section_name' => 'Produto', 'mt' => 'mt-0'])
                    <h5 class="text-primary mt-2">{{ $product['name'] }}</h5>

                    @include('layouts.components.section-marker', ['section_name' => 'Preço Base', 'mt' => 'mt-3'])

                    <div class="row mb-3">
                        <div class="col-3">
                            <div class="form-group">
                                <label for="sku">SKU</label>
                                <input type="text" class="form-control" id="sku" name="sku" value="{{ old('sku', $defaultVariant['sku'] ?? '') }}" maxlength="64">
                                @if ($errors->has('sku'))
                                    <div class="error handle-error">{{ $errors->first('sku') }}</div>
                                @endif
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group">
                                <label for="price">Preço<span class="handle-error">*</span></label>
                                <input type="number" min="0" step="0.01" class="form-control currency-input" id="price" name="price" value="{{ old('price', $defaultVariant['price'] ?? '') }}" required>
                                @if ($errors->has('price'))
                                    <div class="error handle-error">{{ $errors->first('price') }}</div>
                                @endif
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group">
                                <label for="discount_price">Desconto<span class="handle-error">*</span></label>
                                <input type="number" min="0" step="0.01" class="form-control" id="discount_price" name="discount_price" value="{{ old('discount_price', $defaultVariant['discount_price'] ?? 0) }}" required>
                                @if ($errors->has('discount_price'))
                                    <div class="error handle-error">{{ $errors->first('discount_price') }}</div>
                                @endif
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group">
                                <label for="quantity">Quantidade<span class="handle-error">*</span></label>
                                <input type="number" class="form-control" id="quantity" name="quantity" value="{{ old('quantity', $defaultVariant['quantity'] ?? '') }}" required>
                                @if ($errors->has('quantity'))
                                    <div class="error handle-error">{{ $errors->first('quantity') }}</div>
                                @endif
                            </div>
                        </div>
                        
                    </div>
                    <div class="row mb-3">
                            <div class="col-3" id="promo-date-container" style="display: {{ old('discount_price', $defaultVariant['discount_price'] ?? 0) ? 'block' : 'none' }}">
                            <div class="form-group">
                                <label for="promo_limit_date">Fim da Promoção<span class="handle-error">*</span></label>
                                <input type="date" class="form-control" id="promo_limit_date" name="promo_limit_date"
                                    value="{{ old('promo_limit_date', $defaultVariant['promo_limit_date'] ?? '') }}">
                                @if ($errors)
                                @foreach ($errors as $error)
                                    
                                <div class="error handle-error">{{ $error }}</div>
                                @endforeach
                                @endif
                            </div>
                        </div>
                        <div class="col text-end mt-4">
                            <button type="submit" class="btn btn-sm btn-primary">Gravar <i class="fa-light fa-floppy-disk"></i></button>
                        </div>
                    </div>
                </div>
            </form>

            @if($product['has_variants'] && count($attributes) > 0 && !empty($defaultVariant))
                <form action="{{ route('prd_product_variants.storeVariants', ['product' => $product['uuid']]) }}" method="POST" name="variants">
                    @csrf
                    @method('POST')
                    <div class="card py-4 px-4">
                        @include('layouts.components.section-marker', ['section_name' => 'Variantes', 'mt' => 'mt-0'])
                        <div class="row mb-3">
                            @foreach($attributes as $attribute)
                                <div class="col col-auto ">
                                    <div class="form-group">
                                        <label for="attribute_{{ $attribute->id }}" class="col-form-label">{{ $attribute->name }}</label>
                                        <select name="attribute_values[]" id="attribute_{{ $attribute->id }}" class="form-control">
                                            <option value="">Selecione</option>
                                            @foreach($attribute->values as $value)
                                                <option value="{{ $value->id }}" {{ in_array($value->id, old('attribute_values', [])) ? 'selected' : '' }}>
                                                    {{ $value->value }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            @endforeach
                            @if ($errors->has('attribute_values'))
                                <div class="error handle-error">{{ $errors->first('attribute_values') }}</div>
                            @endif
                        </div>
                        <div class="row mb-3">
                            <div class="col-3">
                                <div class="form-group">
                                    <label for="sku_v">SKU</label>
                                    <input type="text" class="form-control" id="sku_v" name="sku_v" value="{{ old('sku_v') }}" maxlength="64">
                                    @if ($errors->has('sku_v'))
                                        <div class="error handle-error">{{ $errors->first('sku_v') }}</div>
                                    @endif
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="form-group">
                                    <label for="price_v">Preço<span class="handle-error">*</span></label>
                                    <input type="number" min="0" step="0.01" class="form-control" id="currency" name="price_v" value="{{ old('price_v') }}" required>
                                    @if ($errors->has('price_v'))
                                        <div class="error handle-error">{{ $errors->first('price_v') }}</div>
                                    @endif
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="form-group">
                                    <label for="discount_price_v">Desconto<span class="handle-error">*</span></label>
                                    <input type="number" min="0" step="0.01" class="form-control price-input" id="discount_price_v" name="discount_price_v" value="{{ old('discount_price_v') ?? 0 }}" required>
                                    @if ($errors->has('discount_price_v'))
                                        <div class="error handle-error">{{ $errors->first('discount_price_v') }}</div>
                                    @endif
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="form-group">
                                    <label for="quantity_v">Quantidade<span class="handle-error">*</span></label>
                                    <input type="number" class="form-control" id="quantity_v" name="quantity_v" value="{{ old('quantity_v') }}" required>
                                    @if ($errors->has('quantity_v'))
                                        <div class="error handle-error">{{ $errors->first('quantity_v') }}</div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-3" id="promo-date-container-v" style="display: {{ old('discount_price_v', $defaultVariant['discount_price_v'] ?? 0) ? 'block' : 'none' }}">
                            <div class="form-group">
                                <label for="promo_limit_date_v">Fim da Promoção<span class="handle-error">*</span></label>
                                <input type="date" class="form-control" id="promo_limit_date_v" name="promo_limit_date_v"
                                    value="{{ old('promo_limit_date_v', $defaultVariant['promo_limit_date_v'] ?? '') }}">
                                @if ($errors->has('promo_limit_date_v'))
                                    <div class="error handle-error">{{ $errors->first('promo_limit_date_v') }}</div>
                                @endif
                            </div>
                        </div>
                        <div class="col text-end mt-4">
                            <button type="submit" class="btn btn-sm btn-primary">Adicionar <i class="fa-light fa-plus"></i></button>
                        </div>
                    </div>
                    </div>
                </form>
            @endif

            @if(count($variants) > 0)
                <hr>
                <div class="d-flex flex-column gap-4 mb-2">
                    <div class="row g-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="table-responsive">
                                    <table class="table table-borderless fs-12">
                                        <thead>
                                            <tr>
                                                <th class="text-center">ID</th>
                                                <th class="text-center">Atributo</th>
                                                <th class="text-center">SKU</th>
                                                <th class="text-center">Preço</th>
                                                <th class="text-center">Desconto</th>
                                                <th class="text-center">Quantidade</th>
                                                <th class="text-end">Ações</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($variants as $variant)
                                                <tr>
                                                    <td class="text-center text-muted">{{ $variant->id }}</td>
                                                    <td class="text-left">
                                                        @foreach ($variant->attributeValues as $attributeValue)
                                                            {{ $attributeValue->attributeValue->value }}{{ !$loop->last ? ', ' : '' }}
                                                        @endforeach
                                                    </td>
                                                    <td class="text-left">{{ $variant->sku }}</td>
                                                    <td class="text-end">{{ $variant->price }}</td>
                                                    <td class="text-end">{{ $variant->discount_price }}</td>
                                                    <td class="text-end">{{ $variant->quantity }}</td>
                                                    <td class="text-end">
                                                        <div class="table-options">
                                                            <form action="{{ route('prd_product_variants.destroy', $variant->uuid) }}" id="destroy-{{ $variant->uuid }}" method="POST" style="display:inline;">
                                                                @csrf
                                                                @method('DELETE')
                                                                <button type="button" data-tooltip="tooltip" title="Excluír" data-bs-toggle="modal" data-bs-target="#confirmModal" data-bs-form-id="destroy-{{ $variant->uuid }}">
                                                                    <i class="fa-light fa-trash"></i>
                                                                </button>
                                                            </form>
                                                        </div>
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="7" class="text-center text-muted">
                                                        <p class="m-0 mt-2 d-flex align-items-center justify-content-center">{{ __('translations.no_results') }}</p>
                                                    </td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
        <div class="tab-pane fade" id="images" role="tabpanel" aria-labelledby="images-tab">
            <!-- Conteúdo da aba de Imagens -->
        </div>
    </div>
    @include('layouts.components.confirmation-modal')
@endsection
@push('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            function setupPromo(discountId, containerId, dateId) {
                const discount = document.getElementById(discountId);
                const container = document.getElementById(containerId);
                const dateInput = document.getElementById(dateId);

                if (!discount || !container || !dateInput) return;

                function show() {
                    container.style.display = "block";
                    dateInput.required = true;
                }

                function hide() {
                    container.style.display = "none";
                    dateInput.required = false;
                    dateInput.value = "";
                }

                function toggleByDiscount() {
                    const d = parseFloat(discount.value || '0');
                    if (d > 0) {
                        show();
                    } else {
                        hide();
                    }
                }


                discount.addEventListener("input", toggleByDiscount);
                toggleByDiscount();
            }

            setupPromo("discount_price", "promo-date-container", "promo_limit_date");
            setupPromo("discount_price_v", "promo-date-container-v", "promo_limit_date_v");
        });
    </script>

@endpush