@extends('layouts.model')

@section('content')
    <div class="container-fluid">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div>
                <h4 class="mb-1">Manutenção de placas</h4>
                <small class="text-muted">
                    Cadastro, categorização e controle de placas ativas.
                </small>
            </div>

            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalNovaPlaca">
                <i class="fa fa-plus"></i>
                Nova placa
            </button>
        </div>

        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show">
                {{ session('success') }}

                <button type="button" class="close" data-dismiss="alert">
                    <span>&times;</span>
                </button>
            </div>
        @endif

        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show">
                {{ session('error') }}

                <button type="button" class="close" data-dismiss="alert">
                    <span>&times;</span>
                </button>
            </div>
        @endif

        @if ($errors->any())
            <div class="alert alert-danger">
                <strong>Verifique os dados informados:</strong>

                <ul class="mb-0 mt-2">
                    @foreach ($errors->all() as $erro)
                        <li>{{ $erro }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="row mb-3">
            <div class="col-md-3 mb-2">
                <div class="card border-left-primary h-100">
                    <div class="card-body py-3">
                        <small class="text-muted">Total</small>
                        <h4 class="mb-0">{{ $resumo['total'] }}</h4>
                    </div>
                </div>
            </div>

            <div class="col-md-3 mb-2">
                <div class="card border-left-success h-100">
                    <div class="card-body py-3">
                        <small class="text-muted">Ativas</small>
                        <h4 class="mb-0 text-success">
                            {{ $resumo['ativas'] }}
                        </h4>
                    </div>
                </div>
            </div>

            <div class="col-md-3 mb-2">
                <div class="card border-left-danger h-100">
                    <div class="card-body py-3">
                        <small class="text-muted">Inativas</small>
                        <h4 class="mb-0 text-danger">
                            {{ $resumo['inativas'] }}
                        </h4>
                    </div>
                </div>
            </div>

            <div class="col-md-3 mb-2">
                <div class="card border-left-warning h-100">
                    <div class="card-body py-3">
                        <small class="text-muted">Sem categoria</small>
                        <h4 class="mb-0 text-warning">
                            {{ $resumo['sem_categoria'] }}
                        </h4>
                    </div>
                </div>
            </div>
        </div>

        <div class="card shadow-sm mb-3">
            <div class="card-body">
                <form accept="{{ route('placas.index') }}" method="GET">
                    <div class="form-row align-items-end">
                        <div class="col-md-4 mb-2">
                            <label for="busca">Buscar placa</label>

                            <input type="text" name="busca" id="busca" class="form-control text-uppercase"
                                value="{{ $busca }}" placeholder="Ex.: AWU-2864">
                        </div>

                        <div class="col-md-3 mb-2">
                            <label for="categoria">Categoria</label>

                            <select name="categoria" id="categoria" class="form-control">
                                <option value="">Todas</option>

                                <option value="sem_categoria" {{ $categoria === 'sem_categoria' ? 'selected' : '' }}>
                                    Sem categoria
                                </option>

                                @foreach ($categorias as $valor => $descricao)
                                    <option value="{{ $valor }}" {{ $categoria === $valor ? 'selected' : '' }}>
                                        {{ $descricao }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-3 mb-2">
                            <label for="situacao">Situação</label>

                            <select name="situacao" id="situacao" class="form-control">
                                <option value="">Todas</option>

                                <option value="ativo" {{ $situacao === 'ativo' ? 'selected' : '' }}>
                                    Ativas
                                </option>

                                <option value="inativo" {{ $situacao === 'inativo' ? 'selected' : '' }}>
                                    Inativas
                                </option>
                            </select>
                        </div>

                        <div class="col-md-2 mb-2">
                            <button type="submit" class="btn btn-primary btn-block">
                                <i class="fa fa-search"></i>
                                Filtrar
                            </button>
                        </div>
                    </div>

                    <div class="mt-2">
                    </div>
                </form>
            </div>
        </div>

        <div class="card shadow-sm">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <strong>Placas cadastradas</strong>

                <small class="text-muted">
                    A categoria pode ser alterada diretamente na listagem.
                </small>
            </div>

            <div class="table-responsive">
                <table class="table table-hover table-striped mb-0">
                    <thead class="thead-light">
                        <tr>
                            <th style="width: 80px;">ID</th>
                            <th>Placa</th>
                            <th style="width: 260px;">Categoria</th>
                            <th style="width: 120px;">Situação</th>
                            <th class="text-right" style="width: 180px;">
                                Ações
                            </th>
                        </tr>
                    </thead>

                    <tbody>
                        @forelse($placas as $placa)
                            <tr class="{{ !$placa->ativo ? 'text-muted' : '' }}">
                                <td>{{ $placa->id }}</td>

                                <td>
                                    <strong>{{ $placa->placa }}</strong>

                                    @if (!$placa->ativo)
                                        <span class="badge badge-secondary ml-1">
                                            Inativa
                                        </span>
                                    @endif
                                </td>

                                <td>
                                    <form action="{{ route('placas.categoria', [$placa->id]) }}" class="form-categoria">
                                        @csrf
                                        @method('PATCH')

                                        <select name="categoria" class="form-control form-control-sm categoria-select"
                                            data-placa="{{ $placa->placa }}">
                                            <option value="">
                                                Sem categoria
                                            </option>

                                            @foreach ($categorias as $valor => $descricao)
                                                <option value="{{ $valor }}"
                                                    {{ $placa->categoria === $valor ? 'selected' : '' }}>
                                                    {{ $descricao }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </form>
                                </td>

                                <td>
                                    @if ($placa->ativo)
                                        <span class="badge badge-success px-3 py-2">
                                            Ativa
                                        </span>
                                    @else
                                        <span class="badge badge-danger px-3 py-2">
                                            Inativa
                                        </span>
                                    @endif
                                </td>

                                <td class="text-right">
<button
    type="button"
    class="btn btn-sm btn-outline-primary btn-editar"
    data-url="{{ route('placas.update', ['id' => $placa->id]) }}"
    data-placa="{{ $placa->placa }}"
    data-categoria="{{ $placa->categoria }}"
    data-toggle="modal"
    data-target="#modalEditarPlaca"
>
    <i class="fa fa-edit"></i>
</button>
                                    <form action=""
                                        class="d-inline form-situacao" data-placa="{{ $placa->placa }}"
                                        data-ativo="{{ $placa->ativo ? 1 : 0 }}">
                                        @csrf
                                        @method('PATCH')

                                        <button type="submit"
                                            class="btn btn-sm {{ $placa->ativo ? 'btn-outline-danger' : 'btn-outline-success' }}"
                                            title="{{ $placa->ativo ? 'Inativar' : 'Ativar' }}">
                                            <i class="fa {{ $placa->ativo ? 'fa-ban' : 'fa-check' }}"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center text-muted py-4">
                                    Nenhuma placa encontrada.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if ($placas->hasPages())
                <div class="card-footer bg-white">
                    {{ $placas->links() }}
                </div>
            @endif
        </div>
    </div>

    <div class="modal fade" id="modalNovaPlaca" tabindex="-1">
        <div class="modal-dialog">
            }}"
            class="modal-content"
            >
            @csrf

            <div class="modal-header">
                <h5 class="modal-title">Nova placa</h5>

                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <div class="form-group">
                    <label for="nova_placa">Placa</label>

                    <input type="text" name="placa" id="nova_placa" class="form-control text-uppercase"
                        value="{{ old('placa') }}" maxlength="50" required autofocus>
                </div>

                <div class="form-group mb-0">
                    <label for="nova_categoria">
                        Categoria
                    </label>

                    <select name="categoria" id="nova_categoria" class="form-control">
                        <option value="">Sem categoria</option>

                        @foreach ($categorias as $valor => $descricao)
                            <option value="{{ $valor }}" {{ old('categoria') === $valor ? 'selected' : '' }}>
                                {{ $descricao }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-dismiss="modal">
                    Cancelar
                </button>

                <button type="submit" class="btn btn-primary">
                    Salvar placa
                </button>
            </div>
            </form>
        </div>
    </div>
    <div class="modal fade" id="modalEditarPlaca" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <form method="POST" id="formEditarPlaca" class="modal-content">
                @csrf
                @method('PUT')

                <div class="modal-header">
                    <h5 class="modal-title">Editar placa</h5>

                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div class="form-group">
                        <label for="editar_placa">Placa</label>

                        <input type="text" name="placa" id="editar_placa" class="form-control text-uppercase"
                            maxlength="50" required>
                    </div>

                    <div class="form-group mb-0">
                        <label for="editar_categoria">Categoria</label>

                        <select name="categoria" id="editar_categoria" class="form-control">
                            <option value="">Sem categoria</option>

                            @foreach ($categorias as $valor => $descricao)
                                <option value="{{ $valor }}">
                                    {{ $descricao }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">
                        Cancelar
                    </button>

                    <button type="submit" class="btn btn-primary">
                        Salvar alterações
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
<script>
$(document).ready(function () {
    $('.btn-editar').on('click', function () {
        var url = $(this).data('url');
        var placa = $(this).data('placa');
        var categoria = $(this).data('categoria');

        $('#formEditarPlaca').attr('action', url);
        $('#editar_placa').val(placa);
        $('#editar_categoria').val(categoria || '');
    });

    $('.categoria-select').on('change', function () {
        $(this).closest('form').submit();
    });

    $('.form-situacao').on('submit', function (event) {
        var placa = $(this).data('placa');
        var ativo = parseInt($(this).data('ativo'), 10);
        var acao = ativo === 1 ? 'inativar' : 'ativar';

        if (!confirm('Deseja realmente ' + acao + ' a placa ' + placa + '?')) {
            event.preventDefault();
        }
    });

    $('.text-uppercase').on('input', function () {
        this.value = this.value.toUpperCase();
    });
});
</script>
@endsection