{{-- New-Unity ERP | app/Modules/Warehouse/Resources/Views/locations/create.blade.php | v1.0 | 09/07/2026 23:41:00 --}}
{{-- v1.0 — Formulario para crear ubicación física con coordenadas y código auto-generado. --}}

@extends('layouts.vertical', ['pageTitle' => __('warehouse.new-location')])

@section('page-title')
<div class="subheader">
    <h1 class="subheader-title">
        <i class="subheader-icon fal fa-map-marker-alt"></i> {{ __('warehouse.new-location') }}
        <small>{{ __('warehouse.create-storage-bin') }}</small>
    </h1>
    <div class="subheader-block">
        <a href="{{ route('warehouse.locations.index') }}" class="btn btn-secondary btn-sm">
            <i class="fal fa-arrow-left me-1"></i> {{ __('warehouse.back') }}
        </a>
    </div>
</div>
@endsection

@section('content')

@if($errors->any())
<div class="alert alert-danger alert-dismissible fade show">
    <ul class="mb-0">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

<div class="row">
    <div class="col-xl-8">
        <form action="{{ route('warehouse.locations.store') }}" method="POST">
            @csrf
            <div class="panel">
                <div class="panel-hdr">
                    <h2><i class="fal fa-map-marker-alt me-2"></i> {{ __('warehouse.location-coordinates') }}</h2>
                </div>
                <div class="panel-container show">
                    <div class="panel-content">

                        {{-- Ayuda contextual --}}
                        <div class="alert alert-info py-2 mb-4">
                            <i class="fal fa-info-circle me-2"></i>
                            {!! __('warehouse.coords-help') !!}
                        </div>

                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-bold">{{ __('warehouse.warehouse') }} <span class="text-danger">*</span></label>
                                <select name="warehouse_id" id="warehouse_id"
                                        class="form-select @error('warehouse_id') is-invalid @enderror" required>
                                    <option value="">{{ __('warehouse.select-warehouse-opt') }}</option>
                                    @foreach($warehouses as $wh)
                                    <option value="{{ $wh->id }}" {{ old('warehouse_id') == $wh->id ? 'selected' : '' }}
                                            data-zones="{{ $wh->zones->toJson() }}">
                                        {{ $wh->code }} — {{ $wh->name }}
                                    </option>
                                    @endforeach
                                </select>
                                @error('warehouse_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">{{ __('warehouse.zone') }} <span class="text-danger">*</span></label>
                                <select name="zone_id" id="zone_id"
                                        class="form-select @error('zone_id') is-invalid @enderror" required>
                                    <option value="">{{ __('warehouse.select-zone-opt2') }}</option>
                                </select>
                                @error('zone_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-md-3">
                                <label class="form-label fw-bold">{{ __('warehouse.aisle') }}</label>
                                <input type="text" name="aisle" id="aisle"
                                       class="form-control text-uppercase" value="{{ old('aisle') }}"
                                       placeholder="A" maxlength="10" oninput="updateCode()">
                                <div class="form-text">{{ __('warehouse.hint-aisle') }}</div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">{{ __('warehouse.rack-col') }}</label>
                                <input type="text" name="rack" id="rack"
                                       class="form-control" value="{{ old('rack') }}"
                                       placeholder="1" maxlength="10" oninput="updateCode()">
                                <div class="form-text">{{ __('warehouse.hint-rack') }}</div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">{{ __('warehouse.level-col') }}</label>
                                <input type="text" name="level" id="level"
                                       class="form-control" value="{{ old('level') }}"
                                       placeholder="2" maxlength="10" oninput="updateCode()">
                                <div class="form-text">{{ __('warehouse.hint-level') }}</div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">{{ __('warehouse.position') }}</label>
                                <input type="text" name="position" id="position"
                                       class="form-control" value="{{ old('position') }}"
                                       placeholder="3" maxlength="10" oninput="updateCode()">
                                <div class="form-text">{{ __('warehouse.hint-position') }}</div>
                            </div>

                            {{-- Código auto-generado --}}
                            <div class="col-md-4">
                                <label class="form-label fw-bold">{{ __('warehouse.generated-code') }}</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fal fa-qrcode"></i></span>
                                    <input type="text" id="code_preview" class="form-control fw-bold bg-light"
                                           placeholder="A-1-2-3" readonly>
                                </div>
                                <div class="form-text text-success">{{ __('warehouse.auto-gen-code') }}</div>
                            </div>

                            <div class="col-md-8">
                                <label class="form-label fw-bold">{{ __('warehouse.description') }}</label>
                                <input type="text" name="description" class="form-control"
                                       value="{{ old('description') }}" placeholder="{{ __('warehouse.ph-optional-desc') }}">
                            </div>

                            <div class="col-md-4">
                                <label class="form-label fw-bold">{{ __('warehouse.max-capacity') }}</label>
                                <div class="input-group">
                                    <input type="number" name="max_capacity" class="form-control"
                                           value="{{ old('max_capacity') }}" placeholder="0.00" step="0.01" min="0">
                                    <span class="input-group-text">{{ __('warehouse.units-lower') }}</span>
                                </div>
                                <div class="form-text">{{ __('warehouse.leave-empty-unlimited') }}</div>
                            </div>
                        </div>

                        <hr class="mt-4">
                        <button type="submit" class="btn btn-primary">
                            <i class="fal fa-save me-1"></i> {{ __('warehouse.create-location') }}
                        </button>
                        <a href="{{ route('warehouse.locations.index') }}" class="btn btn-secondary ms-2">
                            <i class="fal fa-times me-1"></i> {{ __('warehouse.cancel') }}
                        </a>
                    </div>
                </div>
            </div>
        </form>
    </div>

    {{-- Panel de ayuda --}}
    <div class="col-xl-4">
        <div class="panel">
            <div class="panel-hdr">
                <h2><i class="fal fa-question-circle me-2"></i> {{ __('warehouse.how-to-use') }}</h2>
            </div>
            <div class="panel-container show">
                <div class="panel-content">
                    <p class="small text-muted mb-3">
                        {{ __('warehouse.bins-intro') }}
                    </p>
                    <div class="mb-3">
                        <div class="fw-bold small mb-1"><i class="fal fa-route me-1 text-primary"></i> {{ __('warehouse.aisle-title') }}</div>
                        <p class="small text-muted mb-0">{{ __('warehouse.aisle-desc') }}</p>
                    </div>
                    <div class="mb-3">
                        <div class="fw-bold small mb-1"><i class="fal fa-bars me-1 text-primary"></i> {{ __('warehouse.rack-col') }}</div>
                        <p class="small text-muted mb-0">{{ __('warehouse.rack-desc') }}</p>
                    </div>
                    <div class="mb-3">
                        <div class="fw-bold small mb-1"><i class="fal fa-layer-group me-1 text-primary"></i> {{ __('warehouse.level-col') }}</div>
                        <p class="small text-muted mb-0">{{ __('warehouse.level-desc') }}</p>
                    </div>
                    <div class="mb-3">
                        <div class="fw-bold small mb-1"><i class="fal fa-th me-1 text-primary"></i> {{ __('warehouse.position') }}</div>
                        <p class="small text-muted mb-0">{{ __('warehouse.position-desc') }}</p>
                    </div>
                    <div class="alert alert-warning py-2">
                        <i class="fal fa-lightbulb me-1"></i>
                        <strong>{{ __('warehouse.tip') }}</strong> {{ __('warehouse.zones-tip') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
function updateCode() {
    const aisle    = document.getElementById('aisle').value.toUpperCase();
    const rack     = document.getElementById('rack').value;
    const level    = document.getElementById('level').value;
    const position = document.getElementById('position').value;
    const parts    = [aisle, rack, level, position].filter(v => v !== '');
    document.getElementById('code_preview').value = parts.join('-');
}

// Cargar zonas por almacén
document.getElementById('warehouse_id').addEventListener('change', function() {
    const selected = this.options[this.selectedIndex];
    const zones    = JSON.parse(selected.dataset.zones || '[]');
    const zoneSelect = document.getElementById('zone_id');
    zoneSelect.innerHTML = '<option value="">{{ __('warehouse.select-zone-opt2') }}</option>';
    zones.forEach(zone => {
        zoneSelect.innerHTML += `<option value="${zone.id}">${zone.code} — ${zone.name}</option>`;
    });
});

// Si hay warehouse seleccionado (old input), cargar zonas
const warehouseSelect = document.getElementById('warehouse_id');
if (warehouseSelect.value) {
    warehouseSelect.dispatchEvent(new Event('change'));
}
</script>
@endsection