@extends('layouts.partials.master')

@section('title', 'Serviços - ' . $store->commercial_name)

@push('styles')
    <link href="{{asset('assets/css/forms.css')}}" rel="stylesheet" type="text/css">
    <link href="{{asset('assets/css/tables.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">
    <link href="{{asset('assets/css/sortable-list.css')}}" rel="stylesheet" type="text/css">
@endpush

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

    @include('layouts.components.section-title', ['title' => 'Serviços - ' . $store->commercial_name])

    @include('layouts.components.alerts')

    <div class="alert alert-info d-flex align-items-center gap-2 mt-4" role="alert">
        <i class="fa-light fa-circle-info"></i>
        <span>Apenas os serviços <strong>ativos</strong> são apresentados nesta página.</span>
    </div>

    <div class="card">
        <div class="d-flex align-items-center gap-3 py-4 px-4">
            <div class="form-check mb-0">
                <label class="form-check-label d-flex align-items-center gap-2">
                    <input class="form-check-input sort-by-name-checkbox" type="checkbox" checked>
                    Ordenar alfabeticamente
                </label>
            </div>
            <small class="text-muted drag-hint" style="display: none;">
                <i class="fa-light fa-grip-dots-vertical"></i> Arraste as linhas para reordenar
            </small>
        </div>

        <div class="d-flex flex-column gap-4 mb-2">
            <div class="row g-4">
                <div class="col-12">
                    <div class="table-responsive">
                        <table class="table table-borderless fs-12">
                            <thead>
                                <th style="width: 30px;"></th>
                                <th class="text-left">Nome</th>
                                <th class="text-left">Categoria</th>
                                <th class="text-left fit">Ações</th>
                            </thead>
                            <tbody class="sortable-body">
                                @forelse($services as $service)
                                    <tr data-uuid="{{ $service->uuid }}" data-name="{{ $service->name }}">
                                        <td class="text-left">
                                            <span class="drag-handle disabled" title="Arrastar para reordenar">
                                                <i class="fa-light fa-grip-dots-vertical"></i>
                                            </span>
                                        </td>
                                        <td class="text-left">{{ $service->name }}</td>
                                        <td class="text-left">{{ $service->category?->name ?? null }}</td>
                                        <td class="text-left">
                                            <div class="table-options">
                                                <a href="{{ route('srv_services.edit', $service->uuid) }}" data-tooltip="tooltip" title="Editar">
                                                    <i class="fa-light fa-pen-to-square"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center text-muted">
                                            <p class="m-0 mt-2 d-flex align-items-center justify-content-center">Esta loja não tem serviços ativos.</p>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <form action="{{ route('str_stores.reorder_services', $store->id) }}" method="POST">
        @csrf
        <input type="hidden" name="sort_alphabetically" class="sort-by-name-input" value="1">
        <div class="order-inputs"></div>
        <div class="text-end my-4">
            <button type="submit" class="btn btn-sm btn-primary">
                Gravar Ordem <i class="fa-light fa-floppy-disk"></i>
            </button>
        </div>
    </form>
@endsection

@push('scripts')
    @vite('resources/js/str_stores/services.js')
@endpush