@extends('layouts.app')

@section('title', 'Editar Pescador')

@section('content')
<div class="sinagem-main">
    <div class="s-card">
        <div class="s-card-header">
            <h4 class="s-card-title">
                <i class="fas fa-user-edit"></i>
                Editar Pescador: {{ $pescador->full_name }}
            </h4>
            <a href="{{ route('mercado.pescadores.index') }}" class="btn btn-outline-secondary btn-sm">
                <i class="fas fa-arrow-left"></i>
                Voltar
            </a>
        </div>

        <div class="s-card-body">
            <form action="{{ route('mercado.pescadores.update', $pescador) }}" method="POST">
                @csrf
                @method('PUT')
                
                @include('admin.mercado.pescadores.partials._form', ['fisherman' => $pescador])

                <!-- Status -->
                <div class="form-section mb-4">
                    <h5 class="form-section-title">
                        <i class="fas fa-chart-line"></i>
                        Status
                    </h5>
                    <hr class="mb-3">

                    <div class="row g-3">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="status" class="form-label">Status</label>
                                <select class="form-control @error('status') is-invalid @enderror"
                                        id="status"
                                        name="status"
                                        required>
                                    <option value="pending" {{ old('status', $pescador->status) == 'pending' ? 'selected' : '' }}>Pendente</option>
                                    <option value="approved" {{ old('status', $pescador->status) == 'approved' ? 'selected' : '' }}>Aprovado</option>
                                    <option value="active" {{ old('status', $pescador->status) == 'active' ? 'selected' : '' }}>Ativo</option>
                                    <option value="suspended" {{ old('status', $pescador->status) == 'suspended' ? 'selected' : '' }}>Suspenso</option>
                                    <option value="expired" {{ old('status', $pescador->status) == 'expired' ? 'selected' : '' }}>Expirado</option>
                                    <option value="deceased" {{ old('status', $pescador->status) == 'deceased' ? 'selected' : '' }}>Falecido</option>
                                    <option value="inactive" {{ old('status', $pescador->status) == 'inactive' ? 'selected' : '' }}>Inativo</option>
                                </select>
                                @error('status')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Botões de Ação -->
                <div class="form-actions d-flex justify-content-end gap-2">
                    <a href="{{ route('mercado.pescadores.index') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-times"></i>
                        Cancelar
                    </a>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i>
                        Atualizar Pescador
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .form-section {
        background: var(--bg-card, #ffffff);
        border-radius: var(--radius-md, 10px);
        margin-bottom: 1.5rem;
    }

    .form-section-title {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-primary, #1a1a2e);
        margin-bottom: 0.5rem;
    }

    .form-section-title i {
        color: var(--sinagem-red, #e03030);
        margin-right: 0.5rem;
    }

    .form-group {
        margin-bottom: 1rem;
    }

    .required {
        color: var(--sinagem-red, #e03030);
    }

    .form-error {
        font-size: 0.75rem;
        color: var(--sinagem-red, #e03030);
        margin-top: 0.25rem;
    }

    .form-hint {
        font-size: 0.7rem;
        color: var(--text-muted, #9ca3af);
        margin-top: 0.25rem;
        display: block;
    }

    .form-actions {
        padding-top: 1rem;
        border-top: 1px solid var(--border-color, #e5e7eb);
        margin-top: 1rem;
    }

    .vessel-fields {
        border-left: 3px solid var(--sinagem-red, #e03030);
        padding-left: 1rem;
        margin-top: 0.5rem;
    }

    @media (max-width: 768px) {
        .form-actions {
            flex-direction: column;
        }

        .form-actions .btn {
            width: 100%;
        }
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Máscara para telefone
    const phoneInput = document.getElementById('phone');
    if (phoneInput) {
        phoneInput.addEventListener('input', function(e) {
            let value = e.target.value.replace(/\D/g, '');
            if (value.length >= 9 && value.length <= 12) {
                e.target.value = value.replace(/(\d{3})(\d{3})(\d{3})/, '+244 $1 $2 $3');
            }
        });
    }

    // Telefone alternativo
    const alternatePhoneInput = document.getElementById('alternate_phone');
    if (alternatePhoneInput) {
        alternatePhoneInput.addEventListener('input', function(e) {
            let value = e.target.value.replace(/\D/g, '');
            if (value.length >= 9 && value.length <= 12) {
                e.target.value = value.replace(/(\d{3})(\d{3})(\d{3})/, '+244 $1 $2 $3');
            }
        });
    }

    // Telefone do familiar
    const nextOfKinPhone = document.getElementById('next_of_kin_phone');
    if (nextOfKinPhone) {
        nextOfKinPhone.addEventListener('input', function(e) {
            let value = e.target.value.replace(/\D/g, '');
            if (value.length >= 9 && value.length <= 12) {
                e.target.value = value.replace(/(\d{3})(\d{3})(\d{3})/, '+244 $1 $2 $3');
            }
        });
    }

    // Contato de emergência
    const emergencyPhone = document.getElementById('emergency_contact_phone');
    if (emergencyPhone) {
        emergencyPhone.addEventListener('input', function(e) {
            let value = e.target.value.replace(/\D/g, '');
            if (value.length >= 9 && value.length <= 12) {
                e.target.value = value.replace(/(\d{3})(\d{3})(\d{3})/, '+244 $1 $2 $3');
            }
        });
    }

    // Validar data de validade da licença
    const licenseExpiryDate = document.getElementById('license_expiry_date');
    if (licenseExpiryDate) {
        const today = new Date().toISOString().split('T')[0];
        licenseExpiryDate.setAttribute('min', today);
    }
});
</script>
@endpush