@extends('layouts.app')

@section('title', 'Novo Estabelecimento')

@section('content')
<div class="sinagem-main">
    <div class="s-card">
        <div class="s-card-header">
            <h4 class="s-card-title">
                <i class="fas fa-plus-circle"></i>
                Novo Estabelecimento
            </h4>
            <a href="{{ route('mercado.estabelecimentos.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.estabelecimentos.store') }}" method="POST">
                @csrf

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

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

                        <div class="col-md-8">
                            <div class="form-group">
                                <label for="merchant_id" class="form-label">
                                    Comerciante (Dono) <span class="required">*</span>
                                </label>
                                <select class="form-control @error('merchant_id') is-invalid @enderror"
                                        id="merchant_id"
                                        name="merchant_id"
                                        required>
                                    <option value="">Selecione o comerciante...</option>
                                    @foreach($merchants ?? [] as $merchant)
                                        <option value="{{ $merchant->id }}" {{ old('merchant_id') == $merchant->id ? 'selected' : '' }}>
                                            {{ $merchant->full_name }} ({{ $merchant->identity_number ?? 'N/A' }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('merchant_id')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row g-3 mt-2">
                        <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') == $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 class="col-md-6">
                            <div class="form-group">
                                <label for="stall_id" class="form-label">Bancada</label>
                                <select class="form-control @error('stall_id') is-invalid @enderror"
                                        id="stall_id"
                                        name="stall_id">
                                    <option value="">Nenhuma bancada</option>
                                    @foreach($stalls ?? [] as $stall)
                                        <option value="{{ $stall->id }}" {{ old('stall_id') == $stall->id ? 'selected' : '' }}>
                                            {{ $stall->code }} - {{ $stall->market->name ?? 'Sem mercado' }}
                                        </option>
                                    @endforeach
                                </select>
                                <small class="form-hint">Bancada associada ao estabelecimento</small>
                                @error('stall_id')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Localização -->
                <div class="form-section mb-4">
                    <h5 class="form-section-title">
                        <i class="fas fa-map-marker-alt"></i>
                        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') }}"
                                       placeholder="Ex: Setor A, Bloco 1">
                                <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') }}"
                                           step="0.01"
                                           min="0"
                                           placeholder="0.00">
                                    <span class="input-group-text">m²</span>
                                </div>
                                <small class="form-hint">Área do estabelecimento</small>
                                @error('size')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Contato -->
                <div class="form-section mb-4">
                    <h5 class="form-section-title">
                        <i class="fas fa-address-card"></i>
                        Contato
                    </h5>
                    <hr class="mb-3">

                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="phone" class="form-label">Telefone</label>
                                <input type="text"
                                       class="form-control @error('phone') is-invalid @enderror"
                                       id="phone"
                                       name="phone"
                                       value="{{ old('phone') }}"
                                       placeholder="+244 923 456 789">
                                @error('phone')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="email" class="form-label">Email</label>
                                <input type="email"
                                       class="form-control @error('email') is-invalid @enderror"
                                       id="email"
                                       name="email"
                                       value="{{ old('email') }}"
                                       placeholder="estabelecimento@email.com">
                                @error('email')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Funcionamento -->
                <div class="form-section mb-4">
                    <h5 class="form-section-title">
                        <i class="fas fa-clock"></i>
                        Horário de Funcionamento
                    </h5>
                    <hr class="mb-3">

                    <div class="row g-3">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="opening_time" class="form-label">Abertura</label>
                                <input type="time"
                                       class="form-control @error('opening_time') is-invalid @enderror"
                                       id="opening_time"
                                       name="opening_time"
                                       value="{{ old('opening_time') }}">
                                @error('opening_time')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="closing_time" class="form-label">Fechamento</label>
                                <input type="time"
                                       class="form-control @error('closing_time') is-invalid @enderror"
                                       id="closing_time"
                                       name="closing_time"
                                       value="{{ old('closing_time') }}">
                                @error('closing_time')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-4">
                            <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="pending" {{ old('status') == 'pending' ? 'selected' : '' }}>Pendente</option>
                                    <option value="active" {{ old('status') == 'active' ? 'selected' : '' }}>Ativo</option>
                                    <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>Inativo</option>
                                    <option value="suspended" {{ old('status') == 'suspended' ? 'selected' : '' }}>Suspenso</option>
                                </select>
                                @error('status')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row g-3 mt-2">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="form-label">Dias de Funcionamento</label>
                                <div class="d-flex flex-wrap gap-3">
                                    @php
                                        $days = ['segunda', 'terca', 'quarta', 'quinta', 'sexta', 'sabado', 'domingo'];
                                        $daysLabels = ['Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado', 'Domingo'];
                                        $oldDays = old('days_operation', []);
                                    @endphp
                                    @foreach($days as $index => $day)
                                        <div class="form-check">
                                            <input class="form-check-input" 
                                                   type="checkbox" 
                                                   name="days_operation[]" 
                                                   value="{{ $day }}"
                                                   id="day_{{ $day }}"
                                                   {{ in_array($day, $oldDays) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="day_{{ $day }}">
                                                {{ $daysLabels[$index] }}
                                            </label>
                                        </div>
                                    @endforeach
                                </div>
                                <small class="form-hint">Selecione os dias em que o estabelecimento funciona</small>
                                @error('days_operation')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Descrição -->
                <div class="form-section mb-4">
                    <h5 class="form-section-title">
                        <i class="fas fa-align-left"></i>
                        Descrição
                    </h5>
                    <hr class="mb-3">

                    <div class="row g-3">
                        <div class="col-12">
                            <div class="form-group">
                                <label for="description" class="form-label">Descrição</label>
                                <textarea class="form-control @error('description') is-invalid @enderror"
                                          id="description"
                                          name="description"
                                          rows="3"
                                          placeholder="Descreva o estabelecimento...">{{ old('description') }}</textarea>
                                @error('description')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Botões -->
                <div class="form-actions d-flex justify-content-end gap-2 mt-4">
                    <a href="{{ route('mercado.estabelecimentos.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>
                        Criar Estabelecimento
                    </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: #1a1a2e;
        margin-bottom: 0.5rem;
    }

    .form-section-title i {
        color: #e03030;
        margin-right: 0.5rem;
    }

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

    .required {
        color: #e03030;
        margin-left: 0.125rem;
    }

    .form-error {
        font-size: 0.75rem;
        color: #e03030;
        margin-top: 0.25rem;
    }

    .form-hint {
        font-size: 0.7rem;
        color: #9ca3af;
        margin-top: 0.25rem;
        display: block;
    }

    .form-check {
        margin-bottom: 0.5rem;
    }

    .form-check-input:checked {
        background-color: #0d6efd;
        border-color: #0d6efd;
    }

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

    .input-group-text {
        background-color: #f0f2f5;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        font-size: 0.8125rem;
        color: #6b7280;
    }

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

    .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;
        }
        .d-flex.flex-wrap.gap-3 {
            gap: 0.5rem !important;
        }
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-generate code based on market
    const marketSelect = document.getElementById('market_id');
    const codeInput = document.getElementById('code');

    if (marketSelect && codeInput && !codeInput.value) {
        marketSelect.addEventListener('change', function() {
            const marketName = marketSelect.options[marketSelect.selectedIndex]?.text || '';
            const prefix = marketName.substring(0, 3).toUpperCase();
            const randomNum = Math.floor(Math.random() * 1000).toString().padStart(3, '0');
            codeInput.value = `EST-${prefix}-${randomNum}`;
        });
    }

    // Validação de horários
    const openingTime = document.getElementById('opening_time');
    const closingTime = document.getElementById('closing_time');

    if (openingTime && closingTime) {
        openingTime.addEventListener('change', function() {
            if (this.value && closingTime.value && this.value >= closingTime.value) {
                alert('O horário de abertura deve ser anterior ao horário de fechamento.');
                this.value = '';
            }
        });

        closingTime.addEventListener('change', function() {
            if (this.value && openingTime.value && openingTime.value >= this.value) {
                alert('O horário de fechamento deve ser posterior ao horário de abertura.');
                this.value = '';
            }
        });
    }
});
</script>
@endpush