@extends('layouts.app')

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

@section('content')
<div class="sinagem-main">
    <div class="s-card">
        <div class="s-card-header">
            <h4 class="s-card-title">
                <i class="fas fa-edit"></i>
                Editar Bancada: {{ $stall->code }}
            </h4>
            <a href="{{ route('mercado.bancadas.show', $stall) }}" 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.bancadas.update', $stall) }}" method="POST">
                @csrf
                @method('PUT')

                <!-- Informações da Bancada -->
                <div class="form-section mb-4">
                    <h5 class="form-section-title">
                        <i class="fas fa-info-circle"></i>
                        Informações da Bancada
                    </h5>
                    <hr class="mb-3">

                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="code" class="form-label">
                                    Código da Bancada <span class="required">*</span>
                                </label>
                                <input type="text"
                                       class="form-control @error('code') is-invalid @enderror"
                                       id="code"
                                       name="code"
                                       value="{{ old('code', $stall->code) }}"
                                       required>
                                <small class="form-hint">Código único de identificação da bancada</small>
                                @error('code')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="market_id" class="form-label">
                                    Mercado <span class="required">*</span>
                                </label>
                                <select class="form-control @error('market_id') is-invalid @enderror"
                                        id="market_id"
                                        name="market_id"
                                        required>
                                    <option value="">Selecione o mercado...</option>
                                    @foreach($markets as $market)
                                        <option value="{{ $market->id }}" {{ old('market_id', $stall->market_id) == $market->id ? 'selected' : '' }}>
                                            {{ $market->name }} ({{ $market->location ?? 'Sem localização' }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('market_id')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Dimensões e Localização -->
                <div class="form-section mb-4">
                    <h5 class="form-section-title">
                        <i class="fas fa-arrows-alt"></i>
                        Dimensões e Localização
                    </h5>
                    <hr class="mb-3">

                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="section" class="form-label">Seção / Setor</label>
                                <input type="text"
                                       class="form-control @error('section') is-invalid @enderror"
                                       id="section"
                                       name="section"
                                       value="{{ old('section', $stall->section) }}"
                                       placeholder="Ex: Setor A, Bloco 1, Corredor 2">
                                <small class="form-hint">Localização específica dentro do mercado</small>
                                @error('section')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="size" class="form-label">Tamanho (m²)</label>
                                <div class="input-group">
                                    <input type="number"
                                           class="form-control @error('size') is-invalid @enderror"
                                           id="size"
                                           name="size"
                                           value="{{ old('size', $stall->size) }}"
                                           step="0.01"
                                           min="0"
                                           placeholder="0.00">
                                    <span class="input-group-text">m²</span>
                                </div>
                                <small class="form-hint">Área da bancada em metros quadrados</small>
                                @error('size')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Status e Comerciante -->
                <div class="form-section mb-4">
                    <h5 class="form-section-title">
                        <i class="fas fa-toggle-on"></i>
                        Status e Comerciante
                    </h5>
                    <hr class="mb-3">

                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="status" class="form-label">
                                    Status <span class="required">*</span>
                                </label>
                                <select class="form-control @error('status') is-invalid @enderror"
                                        id="status"
                                        name="status"
                                        required>
                                    <option value="available" {{ old('status', $stall->status) == 'available' ? 'selected' : '' }}>Disponível</option>
                                    <option value="occupied" {{ old('status', $stall->status) == 'occupied' ? 'selected' : '' }}>Ocupada</option>
                                    <option value="maintenance" {{ old('status', $stall->status) == 'maintenance' ? 'selected' : '' }}>Manutenção</option>
                                    <option value="reserved" {{ old('status', $stall->status) == 'reserved' ? 'selected' : '' }}>Reservada</option>
                                </select>
                                <small class="form-hint">Situação atual da bancada</small>
                                <small class="form-hint text-warning">
                                    <i class="fas fa-exclamation-triangle"></i> 
                                    Se selecionar "Ocupada", é obrigatório selecionar um comerciante
                                </small>
                                @error('status')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="merchant_id" class="form-label">Comerciante Associado</label>
                                <select class="form-control @error('merchant_id') is-invalid @enderror"
                                        id="merchant_id"
                                        name="merchant_id">
                                    <option value="">Nenhum comerciante associado</option>
                                    @foreach($merchants as $merchant)
                                        <option value="{{ $merchant->id }}" {{ old('merchant_id', $stall->merchant_id) == $merchant->id ? 'selected' : '' }}>
                                            {{ $merchant->full_name }} ({{ $merchant->identity_number ?? 'N/A' }}) - {{ ucfirst($merchant->status) }}
                                        </option>
                                    @endforeach
                                </select>
                                <small class="form-hint">Selecione um comerciante para associar a esta bancada</small>
                                <small class="form-hint text-info">
                                    <i class="fas fa-info-circle"></i> 
                                    Ao selecionar um comerciante, o status será automaticamente definido como "Ocupada"
                                </small>
                                @error('merchant_id')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Observações -->
                <div class="form-section mb-4">
                    <h5 class="form-section-title">
                        <i class="fas fa-sticky-note"></i>
                        Observações
                    </h5>
                    <hr class="mb-3">

                    <div class="row g-3">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="metadata" class="form-label">Observações / Metadados</label>
                                <textarea class="form-control @error('metadata') is-invalid @enderror"
                                          id="metadata"
                                          name="metadata"
                                          rows="3"
                                          placeholder="Informações adicionais sobre a bancada...">{{ old('metadata', $stall->metadata ? json_encode($stall->metadata, JSON_PRETTY_PRINT) : '') }}</textarea>
                                <small class="form-hint">Observações ou informações adicionais sobre a bancada</small>
                                @error('metadata')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Informações de Ocupação (Apenas leitura) -->
                @if($stall->occupied_since)
                <div class="form-section mb-4">
                    <h5 class="form-section-title">
                        <i class="fas fa-history"></i>
                        Histórico de Ocupação
                    </h5>
                    <hr class="mb-3">

                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Ocupada desde</label>
                                <p class="form-control-static">{{ $stall->occupied_since ? $stall->occupied_since->format('d/m/Y H:i') : '-' }}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Comerciante Atual</label>
                                <p class="form-control-static">
                                    @if($stall->merchant)
                                        <strong>{{ $stall->merchant->full_name }}</strong>
                                        <br>
                                        <small class="text-muted">{{ $stall->merchant->identity_number ?? 'Sem identidade' }}</small>
                                    @else
                                        <span class="text-muted">Nenhum comerciante associado</span>
                                    @endif
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                @endif

                <!-- Botões de Ação -->
                <div class="form-actions d-flex justify-content-end gap-2 mt-4">
                    <a href="{{ route('mercado.bancadas.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 Bancada
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .form-section {
        margin-bottom: 1.5rem;
        padding: 0.5rem 0;
    }

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

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

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

    .required {
        color: var(--sin-red, #e03030);
        margin-left: 0.125rem;
    }

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

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

    .form-hint.text-info {
        color: #0d6efd !important;
    }

    .form-hint.text-warning {
        color: #ffc107 !important;
    }

    .form-control-static {
        padding: 0.375rem 0;
        margin-bottom: 0;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #212529;
    }

    .input-group-text {
        background-color: var(--sin-bg, #f0f2f5);
        border: 1px solid var(--sin-border, #e5e7eb);
        border-radius: var(--sin-radius-md, 10px);
        font-size: 0.8125rem;
        color: var(--sin-text-sub, #6b7280);
    }

    .input-group .form-control {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

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

    .form-control:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
    }

    @media (max-width: 768px) {
        .form-actions {
            flex-direction: column;
        }
        .form-actions .btn {
            width: 100%;
        }
        .form-section-title {
            font-size: 0.85rem;
        }
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const statusSelect = document.getElementById('status');
    const merchantSelect = document.getElementById('merchant_id');
    const occupiedSinceInfo = document.querySelector('.form-control-static');

    // Auto-update status when merchant is selected/deselected
    if (merchantSelect && statusSelect) {
        merchantSelect.addEventListener('change', function() {
            if (this.value) {
                // Se um comerciante for selecionado, status automático = ocupada
                statusSelect.value = 'occupied';
                statusSelect.disabled = true;
                
                // Mostrar alerta informativo
                showNotification('Status alterado automaticamente para "Ocupada"', 'info');
            } else {
                // Se nenhum comerciante for selecionado, status disponível
                statusSelect.value = 'available';
                statusSelect.disabled = false;
                
                // Mostrar alerta informativo
                showNotification('Status alterado automaticamente para "Disponível"', 'info');
            }
        });

        // Se o status for alterado manualmente, verificar consistência
        statusSelect.addEventListener('change', function() {
            if (this.value === 'occupied' && !merchantSelect.value) {
                alert('Para definir a bancada como "Ocupada", é necessário selecionar um comerciante.');
                this.value = 'available';
            }
        });
    }

    // Validação adicional no submit
    const form = document.querySelector('form');
    if (form) {
        form.addEventListener('submit', function(e) {
            const status = document.getElementById('status').value;
            const merchant = document.getElementById('merchant_id').value;

            if (status === 'occupied' && !merchant) {
                e.preventDefault();
                alert('Para definir a bancada como "Ocupada", é obrigatório selecionar um comerciante.');
                document.getElementById('merchant_id').focus();
                return false;
            }

            // Verificar se o comerciante está ativo
            if (merchant) {
                const merchantSelect = document.getElementById('merchant_id');
                const selectedOption = merchantSelect.options[merchantSelect.selectedIndex];
                const merchantStatus = selectedOption.text.split(' - ').pop()?.toLowerCase();
                
                if (merchantStatus && merchantStatus !== 'active' && merchantStatus !== 'approved') {
                    if (!confirm('O comerciante selecionado não está ativo. Deseja continuar?')) {
                        e.preventDefault();
                        return false;
                    }
                }
            }
        });
    }

    // Função para mostrar notificações (opcional)
    function showNotification(message, type = 'info') {
        // Você pode implementar um sistema de toast/notificação aqui
        console.log(`[${type.toUpperCase()}] ${message}`);
    }

    // Formatar metadata se for array
    const metadataTextarea = document.getElementById('metadata');
    if (metadataTextarea && metadataTextarea.value) {
        try {
            const parsed = JSON.parse(metadataTextarea.value);
            metadataTextarea.value = JSON.stringify(parsed, null, 2);
        } catch (e) {
            // Se não for JSON válido, manter como está
        }
    }
});
</script>
@endpush