@extends('layouts.app')

@section('title', 'Block ' . $block->name . ' Yard Map - Terminal Operating System')

@section('content')
<div class="row mb-4">
    <div class="col-md-8">
        <h1 class="mb-0">
            <i class="fas fa-border-all"></i> Block {{ $block->name }} - {{ $block->terminal->name }}
        </h1>
        <small class="text-muted">{{ $block->rows }} rows × {{ $block->columns }} columns × {{ $block->levels }} levels</small>
    </div>
    <div class="col-md-4 text-end">
        <a href="{{ route('yard.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Back
        </a>
    </div>
</div>

<div class="row mb-4">
    <div class="col-md-3">
        <div class="card">
            <div class="card-body text-center">
                <h6 class="card-title text-muted">Total Positions</h6>
                <p class="mb-0"><strong>{{ $stats['total_positions'] }}</strong></p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card">
            <div class="card-body text-center">
                <h6 class="card-title text-muted">Occupied</h6>
                <p class="mb-0"><strong class="text-success">{{ $stats['occupied_positions'] }}</strong></p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card">
            <div class="card-body text-center">
                <h6 class="card-title text-muted">Empty</h6>
                <p class="mb-0"><strong class="text-info">{{ $stats['empty_positions'] }}</strong></p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card">
            <div class="card-body text-center">
                <h6 class="card-title text-muted">Utilization</h6>
                <p class="mb-0">
                    <strong>
                        {{ $stats['total_positions'] > 0 ? round(($stats['occupied_positions'] / $stats['total_positions']) * 100, 2) : 0 }}%
                    </strong>
                </p>
            </div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header bg-dark text-white">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Yard Layout</h5>
                    <div>
                        <label for="levelSelect" class="form-label mb-0 me-2">Level:</label>
                        <select id="levelSelect" class="form-select form-select-sm d-inline w-auto">
                            @for($i = 1; $i <= $block->levels; $i++)
                                <option value="{{ $i }}">Level {{ $i }}</option>
                            @endfor
                        </select>
                    </div>
                </div>
            </div>
            <div class="card-body" style="overflow-x: auto;">
                <div id="yardGrid" class="yard-grid-container"></div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header bg-dark text-white">
                <h5 class="mb-0">Container List</h5>
            </div>
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th>Container ID</th>
                            <th>Type</th>
                            <th>Size</th>
                            <th>Position</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($block->yardPositions as $position)
                            @if($position->container)
                                <tr>
                                    <td>{{ $position->container->container_id }}</td>
                                    <td><span class="badge bg-secondary">{{ $position->container->type }}</span></td>
                                    <td>{{ $position->container->size }}</td>
                                    <td>R{{ $position->row }}-C{{ $position->column }}-L{{ $position->level }}</td>
                                    <td>
                                        <span class="badge bg-{{ $position->container->status === 'loaded' ? 'success' : 'warning' }}">
                                            {{ ucfirst($position->container->status) }}
                                        </span>
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-danger" 
                                                onclick="removeContainer({{ $position->container->id }})">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                            @endif
                        @empty
                            <tr>
                                <td colspan="6" class="text-center py-3">No containers in this block</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@push('css')
<style>
    .yard-grid-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
        gap: 2px;
        background: #f0f0f0;
        padding: 10px;
        border-radius: 5px;
    }

    .yard-slot {
        min-height: 60px;
        border: 2px solid #ddd;
        border-radius: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: grab;
        user-select: none;
        font-size: 0.75rem;
        position: relative;
        background: #fff;
    }

    .yard-slot.empty {
        background: #e8f5e9;
        color: #4caf50;
    }

    .yard-slot.occupied {
        background: #fff3e0;
        color: #ff9800;
        cursor: grabbing;
    }

    .yard-slot.dragging {
        opacity: 0.7;
    }

    .container-badge {
        font-weight: bold;
        word-break: break-word;
    }
</style>
@endpush

@push('js')
<script>
    let blockId = {{ $block->id }};
    let selectedLevel = 1;
    let draggedContainer = null;

    document.addEventListener('DOMContentLoaded', function() {
        renderYardGrid();
        
        document.getElementById('levelSelect').addEventListener('change', function(e) {
            selectedLevel = parseInt(e.target.value);
            renderYardGrid();
        });
    });

    function renderYardGrid() {
        const container = document.getElementById('yardGrid');
        container.innerHTML = '';

        const rows = {{ $block->rows }};
        const cols = {{ $block->columns }};

        @json($block->yardPositions).forEach(position => {
            if (position.level !== selectedLevel) return;

            const slot = document.createElement('div');
            slot.className = 'yard-slot ' + (position.status === 'empty' ? 'empty' : 'occupied');
            slot.draggable = true;
            slot.dataset.positionId = position.id;
            slot.dataset.row = position.row;
            slot.dataset.col = position.column;

            if (position.container) {
                slot.innerHTML = `<span class="container-badge">${position.container.container_id.substring(0, 10)}</span>`;
                slot.dataset.containerId = position.container.id;
            } else {
                slot.innerHTML = `<span class="text-muted">R${position.row}-C${position.column}</span>`;
            }

            slot.addEventListener('dragstart', handleDragStart);
            slot.addEventListener('dragover', handleDragOver);
            slot.addEventListener('drop', handleDrop);
            slot.addEventListener('dragend', handleDragEnd);

            container.appendChild(slot);
        });
    }

    function handleDragStart(e) {
        if (!this.dataset.containerId) return;
        draggedContainer = {
            id: this.dataset.containerId,
            positionId: this.dataset.positionId
        };
        this.classList.add('dragging');
    }

    function handleDragOver(e) {
        e.preventDefault();
    }

    function handleDrop(e) {
        e.preventDefault();
        if (!draggedContainer || this.dataset.positionId === draggedContainer.positionId) return;

        moveContainer(draggedContainer.id, this.dataset.positionId);
    }

    function handleDragEnd(e) {
        document.querySelectorAll('.yard-slot').forEach(slot => {
            slot.classList.remove('dragging');
        });
        draggedContainer = null;
    }

    function moveContainer(containerId, positionId) {
        fetch('{{ route("yard.move") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
            },
            body: JSON.stringify({
                container_id: containerId,
                position_id: positionId
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                renderYardGrid();
            } else {
                alert(data.message);
            }
        })
        .catch(error => console.error('Error:', error));
    }

    function removeContainer(containerId) {
        if (confirm('Are you sure you want to remove this container?')) {
            fetch('{{ route("yard.remove") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
                },
                body: JSON.stringify({
                    container_id: containerId
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    renderYardGrid();
                } else {
                    alert(data.message);
                }
            })
            .catch(error => console.error('Error:', error));
        }
    }
</script>
@endpush
@endsection