@extends('layouts.app')

@section('title', 'Fiscais do Mercado - ' . $mercado->name)

@section('content')
<div class="container-fluid">
    <div class="card shadow-sm">
        <!-- HEADER -->
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">
                <i class="fas fa-user-shield me-2"></i>
                Fiscais do Mercado: {{ $mercado->name }}
            </h5>

            <div class="d-flex gap-2">
                <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#assignFiscalModal">
                    <i class="fas fa-plus-circle me-1"></i>
                    Atribuir Fiscal
                </button>

                <a href="{{ route('mercado.mercados.show', $mercado) }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-arrow-left me-1"></i>
                    Voltar
                </a>
            </div>
        </div>

        <!-- BODY -->
        <div class="card-body">

            <!-- ALERTS -->
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show">
                    <i class="fas fa-check-circle me-2"></i>
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            @if(session('error'))
                <div class="alert alert-danger alert-dismissible fade show">
                    <i class="fas fa-exclamation-circle me-2"></i>
                    {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            <!-- TABELA -->
            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead class="table-light">
                        <tr>
                            <th>Nome</th>
                            <th>Badge</th>
                            <th>Telefone</th>
                            <th>Data de Início</th>
                            <th>Data de Fim</th>
                            <th>Tipo</th>
                            <th>Status</th>
                            <th class="text-center">Ações</th>
                        </tr>
                    </thead>

                    <tbody>
                        @forelse($fiscais as $fiscal)
                            <tr>
                                <td>
                                    <strong>{{ $fiscal->full_name }}</strong>
                                </td>

                                <td>{{ $fiscal->badge_number }}</td>

                                <td>{{ $fiscal->phone }}</td>

                                <td>
                                    {{ $fiscal->pivot->start_date
                                        ? \Carbon\Carbon::parse($fiscal->pivot->start_date)->format('d/m/Y')
                                        : '-' }}
                                </td>

                                <td>
                                    {{ $fiscal->pivot->end_date
                                        ? \Carbon\Carbon::parse($fiscal->pivot->end_date)->format('d/m/Y')
                                        : '-' }}
                                </td>

                                <!-- Tipo -->
                                <td>
                                    @if($fiscal->pivot->primary_fiscal)
                                        <span class="badge bg-primary">
                                            <i class="fas fa-star me-1"></i> Principal
                                        </span>
                                    @else
                                        <span class="badge bg-secondary">Secundário</span>
                                    @endif
                                </td>

                                <!-- Status -->
                                <td>
                                    @if($fiscal->pivot->status === 'active')
                                        <span class="badge bg-success">
                                            <i class="fas fa-check-circle me-1"></i> Ativo
                                        </span>
                                    @else
                                        <span class="badge bg-danger">
                                            <i class="fas fa-ban me-1"></i> Inativo
                                        </span>
                                    @endif
                                </td>

                                <!-- AÇÕES -->
                                <td class="text-center">
                                    <form action="{{ route('mercado.mercados.remove-fiscal', $mercado) }}" method="POST" class="d-inline">
                                        @csrf
                                        <input type="hidden" name="fiscal_id" value="{{ $fiscal->id }}">

                                        <button
                                            type="submit"
                                            class="btn btn-sm btn-outline-danger"
                                            title="Remover Fiscal"
                                            onclick="return confirm('Remover este fiscal do mercado?')"
                                        >
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>

                        @empty
                            <tr>
                                <td colspan="8" class="text-center py-5">
                                    <i class="fas fa-user-shield fa-3x text-muted mb-3"></i>
                                    <h6 class="text-muted">Nenhum fiscal atribuído</h6>
                                    <small class="text-muted">
                                        Este mercado ainda não possui fiscais atribuídos.
                                    </small>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- PAGINAÇÃO -->
            @if(method_exists($fiscais, 'links'))
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <small class="text-muted">
                        Mostrando {{ $fiscais->firstItem() ?? 0 }} a {{ $fiscais->lastItem() ?? 0 }} de {{ $fiscais->total() ?? 0 }}
                    </small>

                    {{ $fiscais->appends(request()->query())->links() }}
                </div>
            @endif

        </div>
    </div>
</div>
@endsection

{{-- MODAL FORA DO MAIN (usando stack de modais) --}}
@push('modals')
<div class="modal fade" id="assignFiscalModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

            <form action="{{ route('mercado.mercados.assign-fiscal', $mercado) }}" method="POST">
                @csrf

                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="fas fa-user-plus me-2"></i>
                        Atribuir Fiscal
                    </h5>

                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">

                    <!-- Fiscal -->
                    <div class="mb-3">
                        <label class="form-label">Fiscal *</label>
                        <select name="fiscal_id" class="form-select" required>
                            <option value="">Selecione...</option>

                            @foreach($availableFiscals as $fiscal)
                                <option value="{{ $fiscal->id }}">
                                    {{ $fiscal->full_name }} ({{ $fiscal->badge_number }})
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Principal -->
                    <div class="form-check mb-3">
                        <input type="checkbox" name="primary_fiscal" value="1" class="form-check-input" id="primary_fiscal">
                        <label class="form-check-label" for="primary_fiscal">
                            Fiscal Principal
                        </label>
                    </div>

                    <!-- Datas -->
                    <div class="mb-3">
                        <label class="form-label">Data de Início *</label>
                        <input type="date" name="start_date" class="form-control" value="{{ date('Y-m-d') }}" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Data de Fim</label>
                        <input type="date" name="end_date" class="form-control">
                    </div>

                    <!-- Zonas -->
                    <div class="mb-3">
                        <label class="form-label">Zonas de Atuação</label>
                        <textarea name="assigned_zones" class="form-control" rows="2"></textarea>
                        <small class="text-muted">Ex: Zona Norte, Setor A...</small>
                    </div>

                </div>

                <div class="modal-footer">
                    <button class="btn btn-outline-secondary" data-bs-dismiss="modal">
                        Cancelar
                    </button>

                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-1"></i>
                        Atribuir
                    </button>
                </div>

            </form>

        </div>
    </div>
</div>
@endpush