@extends('adminlte::page')

@section('title', 'Marcas')

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

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Marcas</h3>
                </div>
                <div class="col-sm mt-3 px-4">
                    <a href="{{ Route('addBrand') }}" class="btn btn-success px-4">
                        Agregar nueva Marca
                    </a>
                </div>
                <div class="d-flex row mt-3 p-3">
                    <div class="col-8">
                        {{ $brands->links() }}
                    </div>
                    <div class="col-4">
                        <form action="{{ Route('searchBrands') }}" method="GET">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-10">
                                        <input class="form-control" type="text" placeholder="Buscar marca..."
                                            name="query">
                                    </div>
                                    <div class="col-2">
                                        <button class="btn custom-hover-button" type="submit"><i
                                                class="bi bi-search"></i></button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="card-body">
                    <div class="">
                        <table class="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th style="width: 40%;">Nombre</th>
                                    <th style="width: 40%;">Slug</th>
                                    <th style="width: 5%">Abreviatura</th>
                                    <th style="width: 20%; align-items:center;">Logotipo</th>
                                    <th style="width: 5%;">Cantidad</th>
                                </tr>
                            </thead>
                            <tbody>
                                {{-- Actions --}}
                                @forelse($brands as $brand)
                                    <tr data-widget="expandable-table" aria-expanded="false" class="row-loading">
                                        <td>{{ $brand->display_name }}</td>
                                        <td>{{ $brand->slug }}</td>
                                        <td>{{ $brand->abbreviation }}</td>
                                        <td class="text-center">
                                            @if (!$brand->image_logo)
                                                <p class="text-danger">Necesita una imagen para mostrarse en la vista de las
                                                    marcas</p>
                                            @else
                                                <img src="{{ Asset('uploads/brands/' . $brand->image_logo) }}"
                                                    class="img-fluid rounded align-middle border" alt="Sin imagen"
                                                    width="50%" height="50%">
                                            @endif
                                        </td>
                                        <td>{{ $brand->stock }}</td>
                                    </tr>
                                    <tr class="expandable-body row-loading">
                                        <td colspan="5" disabled>
                                            <div class="d-flex mx-auto justify-content-between">
                                                <p class="mt-1">Ultima modificación: {{ $brand->updated_at }}</p>
                                                <div class="row p-1">
                                                    <a href="{{ Route('modBrand', $brand->slug) }}"
                                                        class="btn btn-warning m-1">Modificar</a>

                                                    <a href="" class="btn btn-danger dropBrand m-1"
                                                        data-brand-id="{{ $brand->id }}"
                                                        data-brand-name="{{ $brand->display_name }}">Borrar</a>

                                                    <form id="dropBrand_{{ $brand->id }}"
                                                        action="{{ route('dropBrand', $brand->id) }}" method="POST">
                                                        @csrf
                                                        @method('DELETE')
                                                    </form>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td class="bg-secondary" colspan="5" align="center">Sin Marcas, agrege una nueva
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="container d-flex justify-content-center">
                    {{ $brands->links() }}
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @vite('resources/js/brands/listBrands.js')
@endsection