@extends('layouts.app')

@section('title', 'Pescadores')

@section('content')
<div class="sinagem-main">
    <div class="s-card">
        <div class="s-card-header">
            <h4 class="s-card-title">
                <i class="fas fa-fish"></i>
                Pescadores
            </h4>
            <a href="{{ route('mercado.pescadores.create') }}" class="btn btn-primary btn-sm">
                <i class="fas fa-plus-circle"></i>
                Novo Pescador
            </a>
        </div>

        <div class="s-card-body">
            @if(session('success'))
                <div class="sinagem-alert sinagem-alert-success">
                    <i class="fas fa-check-circle"></i>
                    <span>{{ session('success') }}</span>
                    <button type="button" class="flash-close">&times;</button>
                </div>
            @endif

            @if(session('error'))
                <div class="sinagem-alert sinagem-alert-danger">
                    <i class="fas fa-exclamation-circle"></i>
                    <span>{{ session('error') }}</span>
                    <button type="button" class="flash-close">&times;</button>
                </div>
            @endif

            @if(session('warning'))
                <div class="sinagem-alert sinagem-alert-warning">
                    <i class="fas fa-exclamation-triangle"></i>
                    <span>{{ session('warning') }}</span>
                    <button type="button" class="flash-close">&times;</button>
                </div>
            @endif

            <!-- Filtros -->
            <form method="GET" class="row g-3 mb-4 align-items-end">
                <div class="col-md-3">
                    <label for="status" class="form-label">Status</label>
                    <select name="status" id="status" class="form-control">
                        <option value="">Todos</option>
                        <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Ativo</option>
                        <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>Aprovado</option>
                        <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pendente</option>
                        <option value="suspended" {{ request('status') == 'suspended' ? 'selected' : '' }}>Suspenso</option>
                        <option value="expired" {{ request('status') == 'expired' ? 'selected' : '' }}>Expirado</option>
                        <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inativo</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="professional_category" class="form-label">Categoria</label>
                    <select name="professional_category" id="professional_category" class="form-control">
                        <option value="">Todas</option>
                        <option value="artisanal" {{ request('professional_category') == 'artisanal' ? 'selected' : '' }}>Artesanal</option>
                        <option value="semi_industrial" {{ request('professional_category') == 'semi_industrial' ? 'selected' : '' }}>Semi-industrial</option>
                        <option value="industrial" {{ request('professional_category') == 'industrial' ? 'selected' : '' }}>Industrial</option>
                        <option value="recreational" {{ request('professional_category') == 'recreational' ? 'selected' : '' }}>Recreativo</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label for="search" class="form-label">Pesquisar</label>
                    <input type="text" name="search" id="search" class="form-control" placeholder="Nome, documento, telefone, licença ou registro..." value="{{ request('search') }}">
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="fas fa-search"></i> Filtrar
                    </button>
                </div>
            </form>

            <!-- Tabela DataTable -->
            <div class="sinagem-datatable-wrapper">
                <div class="table-responsive">
                    <table id="pescadores-table" class="s-table">
                        <thead>
                            <tr>
                                <th>Nome</th>
                                <th>Identidade</th>
                                <th>Telefone</th>
                                <th>Licença</th>
                                <th>Registro</th>
                                <th>Categoria</th>
                                <th>Dependentes</th>
                                <th>Status</th>
                                <th class="text-center">Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- DataTables preenche via AJAX -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .sinagem-alert {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        border-radius: var(--radius-md, 8px);
        margin-bottom: 1rem;
        border-left: 3px solid;
        background: #fff;
        box-shadow: var(--sin-shadow-sm, 0 1px 2px rgba(0,0,0,.05));
    }

    .sinagem-alert-success {
        border-left-color: #10b981;
        background: #f0fdf4;
        color: #065f46;
    }

    .sinagem-alert-danger {
        border-left-color: #ef4444;
        background: #fef2f2;
        color: #991b1b;
    }

    .sinagem-alert-warning {
        border-left-color: #f59e0b;
        background: #fffbeb;
        color: #92400e;
    }

    .flash-close {
        margin-left: auto;
        background: none;
        border: none;
        font-size: 1.1rem;
        cursor: pointer;
        color: inherit;
        opacity: 0.6;
        transition: opacity 0.2s;
    }

    .flash-close:hover {
        opacity: 1;
    }
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    const table = $('#pescadores-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("mercado.pescadores.table-data") }}',
            type: 'GET',
            data: function(d) {
                d.status = $('#status').val();
                d.professional_category = $('#professional_category').val();
                d.parent_fisherman_id = $('#parent_fisherman_id').val();
            }
        },
        columns: [
            { data: 'full_name', name: 'full_name' },
            { data: 'identity_number', name: 'identity_number' },
            { data: 'phone', name: 'phone' },
            { data: 'fishing_license_number', name: 'fishing_license_number' },
            { data: 'registration_number', name: 'registration_number' },
            { data: 'professional_category', name: 'professional_category' },
            { data: 'children_count', name: 'children_count', orderable: true, searchable: false },
            { data: 'status', name: 'status' },
            { data: 'actions', name: 'actions', orderable: false, searchable: false, className: 'text-center' }
        ],
        pageLength: 15,
        language: {
            processing: '<i class="fas fa-spinner fa-spin"></i> Processando...',
            search: '<i class="fas fa-search"></i> Pesquisar:',
            lengthMenu: 'Mostrar _MENU_ registros por página',
            info: 'Mostrando _START_ a _END_ de _TOTAL_ registros',
            infoEmpty: 'Mostrando 0 a 0 de 0 registros',
            infoFiltered: '(filtrado de _MAX_ registros no total)',
            loadingRecords: '<i class="fas fa-spinner fa-spin"></i> Carregando...',
            zeroRecords: '<i class="fas fa-database"></i> Nenhum registro encontrado',
            emptyTable: '<i class="fas fa-table"></i> Nenhum dado disponível na tabela',
            paginate: {
                first: '<i class="fas fa-angle-double-left"></i>',
                previous: '<i class="fas fa-angle-left"></i>',
                next: '<i class="fas fa-angle-right"></i>',
                last: '<i class="fas fa-angle-double-right"></i>'
            }
        },
        responsive: true,
        order: [[0, 'asc']],
        drawCallback: function() {
            initTooltips();
        }
    });

    $('#status, #professional_category, #parent_fisherman_id').on('change', function() {
        table.ajax.reload();
    });

    function initTooltips() {
        if (typeof bootstrap !== 'undefined') {
            $('[title]').each(function() {
                const tooltip = bootstrap.Tooltip.getInstance(this);
                if (tooltip) tooltip.dispose();
                new bootstrap.Tooltip(this, { placement: 'top', trigger: 'hover' });
            });
        }
    }

    $('.flash-close').on('click', function() {
        $(this).closest('.sinagem-alert').fadeOut(300, function() {
            $(this).remove();
        });
    });

    setTimeout(function() {
        $('.sinagem-alert').fadeOut(500, function() {
            $(this).remove();
        });
    }, 5000);
});
</script>
@endpush