{{-- New-Unity ERP | app/Modules/Warehouse/Resources/Views/racks/show.blade.php | v1.3 | 19/07/2026 --}}
{{-- v1.0 — Vista del rack con mapa visual de bins. Verde=libre, Rojo=ocupado.          --}}
{{-- v1.1 — Stats cards con iconos y CSS mejorado. Fix leyenda de bins.                 --}}
{{-- v1.2 — Click en bin ocupado abre modal con detalle del lote. Kardex link.          --}}
{{-- v1.3 — Boton Disposicion en modal de bin bloqueado. Conecta con disposal_modal.    --}}

@extends('layouts.vertical', ['pageTitle' => __('warehouse.storage-unit-prefix') . ' ' . $rack->code])

@section('page-title')
<div class="subheader">
    <h1 class="subheader-title">
        <i class="subheader-icon fal fa-th"></i>
        {{ $rack->code }}
        @if($rack->description)
        <small class="ms-1">— {{ $rack->description }}</small>
        @endif
        <span class="badge bg-{{ $rack->is_active ? 'success' : 'secondary' }} ms-2">
            {{ $rack->is_active ? __('warehouse.active') : __('warehouse.inactive') }}
        </span>
    </h1>
    <div class="subheader-block d-flex gap-2">
        <a href="{{ route('warehouse.racks.edit', $rack) }}" class="btn btn-warning btn-sm">
            <i class="fal fa-edit me-1"></i> {{ __('warehouse.edit-expand') }}
        </a>
        <a href="{{ route('warehouse.warehouses.show', $rack->warehouse) }}" class="btn btn-secondary btn-sm">
            <i class="fal fa-arrow-left me-1"></i> {{ __('warehouse.back-to') }} {{ $rack->warehouse->code }}
        </a>
    </div>
</div>
@endsection

@section('content')

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

{{-- Stats cards --}}
<div class="row g-3 mb-3">

    {{-- Warehouse --}}
    <div class="col-6 col-md-2">
        <div class="panel mb-0 h-100">
            <div class="panel-content py-3 text-center">
                <div class="mb-2">
                    <span style="display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:#E6F1FB;">
                        <i class="fal fa-warehouse" style="color:#185FA5;font-size:16px;"></i>
                    </span>
                </div>
                <div style="font-size:10px;font-weight:600;color:#6c757d;letter-spacing:.5px;margin-bottom:4px;">{{ __('warehouse.warehouse-caps') }}</div>
                <div class="fw-bold" style="font-size:15px;">{{ $rack->warehouse->code }}</div>
            </div>
        </div>
    </div>

    {{-- Zone --}}
    <div class="col-6 col-md-2">
        <div class="panel mb-0 h-100">
            <div class="panel-content py-3 text-center">
                <div class="mb-2">
                    <span style="display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:#FAEEDA;">
                        <i class="fal fa-layer-group" style="color:#854F0B;font-size:16px;"></i>
                    </span>
                </div>
                <div style="font-size:10px;font-weight:600;color:#6c757d;letter-spacing:.5px;margin-bottom:4px;">{{ __('warehouse.zone-caps') }}</div>
                <div class="fw-bold" style="font-size:15px;">
                    <span class="badge bg-{{ $rack->zone->color }}">{{ $rack->zone->code }}</span>
                </div>
                <div style="font-size:11px;color:#6c757d;margin-top:3px;">{{ $rack->zone->name }}</div>
            </div>
        </div>
    </div>

    {{-- Positions X --}}
    <div class="col-6 col-md-2">
        <div class="panel mb-0 h-100">
            <div class="panel-content py-3 text-center">
                <div class="mb-2">
                    <span style="display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:#F1EFE8;">
                        <i class="fal fa-arrows-h" style="color:#5F5E5A;font-size:16px;"></i>
                    </span>
                </div>
                <div style="font-size:10px;font-weight:600;color:#6c757d;letter-spacing:.5px;margin-bottom:4px;">{{ __('warehouse.positions-x-caps') }}</div>
                <div class="fw-bold" style="font-size:24px;line-height:1;">{{ $rack->positions_x }}</div>
                <div style="font-size:10px;color:#6c757d;margin-top:2px;">{{ __('warehouse.horizontal-lower') }}</div>
            </div>
        </div>
    </div>

    {{-- Levels Y --}}
    <div class="col-6 col-md-2">
        <div class="panel mb-0 h-100">
            <div class="panel-content py-3 text-center">
                <div class="mb-2">
                    <span style="display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:#F1EFE8;">
                        <i class="fal fa-arrows-v" style="color:#5F5E5A;font-size:16px;"></i>
                    </span>
                </div>
                <div style="font-size:10px;font-weight:600;color:#6c757d;letter-spacing:.5px;margin-bottom:4px;">{{ __('warehouse.levels-y-caps') }}</div>
                <div class="fw-bold" style="font-size:24px;line-height:1;">{{ $rack->levels_y }}</div>
                <div style="font-size:10px;color:#6c757d;margin-top:2px;">{{ __('warehouse.vertical-lower') }}</div>
            </div>
        </div>
    </div>

    {{-- Total Bins --}}
    <div class="col-6 col-md-2">
        <div class="panel mb-0 h-100" style="border-top:3px solid #185FA5;">
            <div class="panel-content py-3 text-center">
                <div class="mb-2">
                    <span style="display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:#E6F1FB;">
                        <i class="fal fa-th" style="color:#185FA5;font-size:16px;"></i>
                    </span>
                </div>
                <div style="font-size:10px;font-weight:600;color:#6c757d;letter-spacing:.5px;margin-bottom:4px;">{{ __('warehouse.total-bins') }}</div>
                <div class="fw-bold" style="font-size:24px;line-height:1;color:#185FA5;">{{ $rack->totalBins() }}</div>
                <div style="font-size:10px;color:#6c757d;margin-top:2px;">{{ $rack->positions_x }} × {{ $rack->levels_y }}</div>
            </div>
        </div>
    </div>

    {{-- Free Bins --}}
    @php
        $freeBins     = $rack->freeBins();
        $totalBins    = $rack->totalBins();
        $occupiedBins = $totalBins - $freeBins;
        $freePct      = $totalBins > 0 ? round(($freeBins / $totalBins) * 100) : 0;
    @endphp
    <div class="col-6 col-md-2">
        <div class="panel mb-0 h-100" style="border-top:3px solid {{ $freePct > 50 ? '#28a745' : ($freePct > 20 ? '#fd7e14' : '#dc3545') }};">
            <div class="panel-content py-3 text-center">
                <div class="mb-2">
                    <span style="display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:{{ $freePct > 50 ? '#E1F5EE' : ($freePct > 20 ? '#FFF3CD' : '#F8D7DA') }};">
                        <i class="fal fa-check-circle" style="color:{{ $freePct > 50 ? '#28a745' : ($freePct > 20 ? '#fd7e14' : '#dc3545') }};font-size:16px;"></i>
                    </span>
                </div>
                <div style="font-size:10px;font-weight:600;color:#6c757d;letter-spacing:.5px;margin-bottom:4px;">{{ __('warehouse.free-bins') }}</div>
                <div class="fw-bold" style="font-size:24px;line-height:1;color:{{ $freePct > 50 ? '#28a745' : ($freePct > 20 ? '#fd7e14' : '#dc3545') }};">{{ $freeBins }}</div>
                <div style="font-size:10px;color:#6c757d;margin-top:2px;">{{ $freePct }}% {{ __('warehouse.available') }}</div>
            </div>
        </div>
    </div>

</div>

{{-- Rack visual map --}}
<div class="panel">
    <div class="panel-hdr">
        <h2><i class="fal fa-th me-2"></i> {{ __('warehouse.storage-map') }} — {{ $rack->code }}</h2>
        <div class="panel-toolbar d-flex gap-2 align-items-center">
            <span style="display:inline-flex;align-items:center;gap:4px;font-size:12px;">
                <span style="width:10px;height:10px;border-radius:50%;background:#16a34a;display:inline-block;"></span>
                {{ __('warehouse.free') }}
            </span>
            <span style="display:inline-flex;align-items:center;gap:4px;font-size:12px;">
                <span style="width:10px;height:10px;border-radius:50%;background:#dc2626;display:inline-block;"></span>
                {{ __('warehouse.occupied') }}
            </span>
            <span style="display:inline-flex;align-items:center;gap:4px;font-size:12px;">
                <span style="width:10px;height:10px;border-radius:50%;background:#d97706;display:inline-block;"></span>
                {{ __('warehouse.reserved') }}
            </span>
        </div>
    </div>
    <div class="panel-container show">
        <div class="panel-content">
            <div style="overflow-x:auto;">
                <table style="border-collapse:collapse;width:100%;">
                    <thead>
                        <tr>
                            <th style="width:60px;padding:6px 10px;font-size:11px;color:#6c757d;text-align:right;">{{ __('warehouse.level-col') }}</th>
                            @for($p = 1; $p <= $rack->positions_x; $p++)
                            <th style="text-align:center;font-size:11px;color:#6c757d;padding:6px;min-width:100px;font-weight:600;">
                                {{ str_pad($p, 2, '0', STR_PAD_LEFT) }}
                            </th>
                            @endfor
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($binsByLevel as $levelCode => $bins)
                        <tr>
                            <td style="padding:4px 10px;font-size:12px;font-weight:600;color:#6c757d;text-align:right;white-space:nowrap;">
                                {{ $levelCode }}
                            </td>
                            @foreach($bins->sortBy('position') as $bin)
                            @php
                                $bg  = $bin->is_occupied ? '#fee2e2' : '#dcfce7';
                                $bdr = $bin->is_occupied ? '#fca5a5' : '#86efac';
                                $txt = $bin->is_occupied ? '#991b1b' : '#15803d';
                                $dot = $bin->is_occupied ? '#dc2626' : '#16a34a';
                            @endphp
                            <td style="padding:4px;">
                                <div style="background:{{ $bg }};border:1.5px solid {{ $bdr }};border-radius:6px;padding:8px 4px;text-align:center;transition:all .15s;{{ $bin->is_occupied ? 'cursor:pointer;' : 'cursor:default;' }}"
                                     title="{{ $bin->code }} — {{ $bin->is_occupied ? __('warehouse.occupied-click') : __('warehouse.free') }}"
                                     @if($bin->is_occupied) onclick="showBinModal({{ $bin->id }})" @endif>
                                    <div style="font-size:10px;font-family:monospace;color:{{ $txt }};font-weight:700;line-height:1.2;margin-bottom:4px;">
                                        {{ $bin->code }}
                                    </div>
                                    <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:{{ $dot }};"></span>
                                </div>
                            </td>
                            @endforeach
                        </tr>
                        @endforeach
                        <tr>
                            <td colspan="{{ $rack->positions_x + 1 }}" style="padding:6px 10px;">
                                <div style="border-top:3px solid #adb5bd;text-align:center;padding-top:6px;font-size:10px;color:#6c757d;letter-spacing:3px;font-weight:600;">
                                    {{ __('warehouse.floor') }}
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- Modal detalle del bin --}}
<div class="modal fade" id="binModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header" style="background:#fee2e2;border-bottom:1px solid #fca5a5;">
                <h5 class="modal-title text-danger">
                    <i class="fal fa-box me-2"></i>
                    <span id="binModalTitle"></span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="binModalBody"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{{ __('warehouse.close') }}</button>
                <button type="button" class="btn btn-warning btn-sm" id="bdmDisposeBtn"
                        onclick="openDisposalFromBin()" style="display:none;">
                    <i class="fal fa-exclamation-triangle me-1"></i> {{ __('warehouse.disposal') }}
                </button>
                <a href="#" id="binModalKardexLink" class="btn btn-primary btn-sm">
                    <i class="fal fa-history me-1"></i> {{ __('warehouse.view-kardex') }}
                </a>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
var binData = @json($binData);

function openDisposalFromBin() {
    var bin = window.currentBinForDisposal;
    if (!bin) return;
    bootstrap.Modal.getInstance(document.getElementById('binModal')).hide();
    setTimeout(function() {
        showDisposalModal(
            bin.lot_id || 0,
            bin.lot_number,
            bin.product_name,
            bin.quantity,
            bin.unit_cost
        );
    }, 300);
}

function showBinModal(binId) {
    var bin = binData.find(function(b) { return b.id == binId; });
    if (!bin || !bin.is_occupied) return;

    var typeColors = {
        unrestricted: 'success',
        blocked:      'danger',
        quarantine:   'warning',
        reserved:     'info',
        returns:      'secondary'
    };
    var typeColor = typeColors[bin.stock_type] || 'secondary';

    document.getElementById('binModalTitle').textContent = bin.bin_id + ' — ' + bin.code;

    var rows = [
        ['{{ __('warehouse.bin-id') }}',     '<code class="fw-bold">' + (bin.bin_id || '—') + '</code>'],
        ['{{ __('warehouse.bin-code') }}',   '<span class="fw-bold">' + (bin.code || '—') + '</span>'],
        ['{{ __('warehouse.lot-number') }}', '<span class="fw-bold text-primary">' + (bin.lot_number || '—') + '</span>'],
        ['{{ __('warehouse.product') }}',    '<span class="fw-bold">' + (bin.product_name || '—') + '</span>'],
        ['{{ __('warehouse.quantity') }}',   '<span class="fw-bold text-success">' + (bin.quantity || 0) + '</span>'],
        ['{{ __('warehouse.stock-type') }}', '<span class="badge bg-' + typeColor + '">' + (bin.stock_type || '—') + '</span>'],
        ['{{ __('warehouse.unit-cost-lbl') }}',  '$' + parseFloat(bin.unit_cost || 0).toFixed(2)],
        ['{{ __('warehouse.entry-date') }}', bin.entry_date || '—'],
    ];

    var html = '<table class="table table-sm table-borderless mb-0">';
    rows.forEach(function(r) {
        html += '<tr><td class="text-muted small" style="width:110px;">' + r[0] + '</td><td>' + r[1] + '</td></tr>';
    });
    html += '</table>';

    document.getElementById('binModalBody').innerHTML = html;
    document.getElementById('binModalKardexLink').href = bin.product_id
        ? '/warehouse/inventory/kardex/' + bin.product_id
        : '#';

    // Mostrar boton disposicion si es blocked
    var disposeBtn = document.getElementById('bdmDisposeBtn');
    if (disposeBtn) {
        disposeBtn.style.display = (bin.stock_type === 'blocked') ? 'inline-block' : 'none';
    }

    // Guardar datos para disposicion
    window.currentBinForDisposal = bin;

    new bootstrap.Modal(document.getElementById('binModal')).show();
}
</script>
@endsection