@extends('layouts.partials.master')

@section('title', 'Catálogo da promoção')

@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/tabs.css')}}" rel="stylesheet" type="text/css">
    <link href="{{asset('assets/css/tables.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' => 'Catálogo da promoção'])
        <a href="{{ url('mkt-promotions') }}" class="btn btn-sm btn-primary">Voltar <i class="fa-light fa-left-from-line"></i></a>
    </div>
    <ul class="nav nav-tabs custom-tabs" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link {{ Route::is('mkt_promotions.catalog.categories') ? 'active' : '' }}"
            href="{{ route('mkt_promotions.catalog.categories', $promotion->uuid) }}">
                <i class="fas fa-box fa-fw me-2"></i>Categorias
            </a>
        </li>
        <li class="nav-item" role="presentation">
            @if ($unlock['categories'])
                <a class="nav-link {{ Route::is('mkt_promotions.catalog.merchants') ? 'active' : '' }}"
                href="{{ route('mkt_promotions.catalog.merchants', $promotion->uuid) }}">
                    <i class="fas fa-tags fa-fw me-2"></i>Comerciantes
                </a>
            @else
                <a class="nav-link disabled" tabindex="-1">
                    <i class="fas fa-tags fa-fw me-2"></i>Comerciantes
                </a>
            @endif
        </li>
        <li class="nav-item" role="presentation">
            @if ($unlock['merchants'])
                <a class="nav-link {{ Route::is('mkt_promotions.catalog.products') ? 'active' : '' }}"
                href="{{ route('mkt_promotions.catalog.products', $promotion->uuid) }}">
                    <i class="fas fa-layer-group fa-fw me-2"></i>Produtos
                </a>
            @else
                <a class="nav-link disabled" tabindex="-1">
                    <i class="fas fa-layer-group fa-fw me-2"></i>Produtos
                </a>
            @endif
        </li>
    </ul>
    @include('layouts.components.alerts')
    <div class="tab-content mt-0" id="catalogTabContent">
        <div class="tab-pane fade" id="categorias" role="tabpanel" aria-labelledby="categorias-tab">
            <!-- Conteúdo da aba de categorias -->
        </div>
        <div class="tab-pane fade show active" id="comerciantes" role="tabpanel" aria-labelledby="comerciantes-tab">
        <form action="{{ route('mkt_promotions.storeCatalogMerchants', $promotion->uuid) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('POST')
                <label for="merchants" class="mb-4">Lojistas Disponíveis para a Promoção:</label>
                <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>
                                            <th class="text-left fit"></th>
                                            <th class="text-left">Nome</th>
                                            <th class="text-left">Estados</th>
                                            <th class="text-left">Aderência</th>
                                            <th class="text-left fit">Ver</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($merchants as $store)
                                                <tr>
                                                    <td class="text-left text-muted">
                                                        <input
                                                            type="checkbox"
                                                            name="merchants[]"
                                                            value="{{ $store->id }}"
                                                            id="store-{{ $store->id }}"
                                                            class="form-check-input"
                                                            {{$store->status !== 'active' ? 'disabled' : ''}}
                                                            {{ in_array($store->id, old('store', $promotion->merchants->pluck('id')->toArray() ?? [])) ? 'checked' : '' }}>
                                                    </td>
                                                    <td class="text-left">{{ $store->commercial_name }}</td>
                                                    <td class="text-left">
                                                        @include('layouts.components.status', ['status' => $store->status])
                                                    </td>
                                                    <td class="text-left">
                                                        @php
                                                            $merchantPivot = $promotion->merchants->firstWhere('id', $store->id);
                                                        @endphp
                                                        @if($merchantPivot)
                                                            <select name="adherence_status[{{ $store->id }}]" class="form-select">
                                                                <option value="accepted" {{ $merchantPivot->pivot->status == 'accepted' ? 'selected' : '' }}>Confirmado</option>
                                                                <option value="rejected" {{ $merchantPivot->pivot->status == 'rejected' ? 'selected' : '' }}>Rejeitado</option>
                                                                <option value="pending" {{ $merchantPivot->pivot->status == 'pending' ? 'selected' : '' }}>Pendente</option>
                                                            </select>
                                                        @else
                                                            <span>Não adere</span>
                                                        @endif
                                                    </td>
                                                    <td class="text-left">
                                                        <div class="table-options">
                                                            <a href="{{ route('str_stores.edit', ['uuid' => $store->uuid]) }}" data-tooltip="tooltip" title="Editar">
                                                                <i class="fa-light fa-eye"></i>
                                                            </a>
                                                        </div>
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="11" 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>
                <div class="row my-4">
                    <div class="col-12 text-end">
                        <button type="submit" class="btn btn-sm btn-primary">Gravar <i class="fa-light fa-floppy-disk"></i></button>
                    </div>
                </div>
            </form>
        </div>
        <div class="tab-pane fade" id="produtos" role="tabpanel" aria-labelledby="produtos-tab">
            <!-- Conteúdo da aba de Preçarios -->
        </div>
    </div>
@endsection