@extends('layouts.app')
@section('title', 'Stock Transfer — Project to Project')

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="page-title"><i class="bi bi-arrow-repeat me-2"></i>Stock Transfer</h1>
            <p class="text-muted mb-0">Transfer materials between projects</p>
        </div>
        <a href="{{ route('inventory.stock.movements') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left-right me-1"></i> View Movements
        </a>
    </div>

    @if($errors->any())
        <div class="alert alert-danger fade-in">
            <i class="bi bi-exclamation-triangle me-1"></i>
            @foreach($errors->all() as $error)
                <div>{{ $error }}</div>
            @endforeach
        </div>
    @endif

    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card fade-in">
                <div class="card-header d-flex align-items-center gap-2">
                    <i class="bi bi-arrow-repeat text-primary"></i>
                    <span class="fw-semibold">Project-to-Project Transfer</span>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('inventory.stock.transfer.store') }}" id="transferForm">
                        @csrf

                        {{-- Material Selection --}}
                        <div class="mb-4">
                            <label for="material_id" class="form-label">Material <span class="text-danger">*</span></label>
                            <select name="material_id" id="material_id" class="form-select" required>
                                <option value="">— Select Material —</option>
                                @foreach($materials as $m)
                                    <option value="{{ $m->id }}"
                                            data-unit="{{ strtoupper($m->unit) }}"
                                            {{ old('material_id') == $m->id ? 'selected' : '' }}>
                                        {{ $m->material_name }} ({{ strtoupper($m->unit) }})
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Source → Destination --}}
                        <div class="row mb-4">
                            <div class="col-md-5">
                                <label for="from_project_id" class="form-label">
                                    <i class="bi bi-box-arrow-up text-danger"></i>
                                    From Project <span class="text-danger">*</span>
                                </label>
                                <select name="from_project_id" id="from_project_id" class="form-select" required>
                                    <option value="">— Source Project —</option>
                                    @foreach($projects as $p)
                                        <option value="{{ $p->id }}" {{ old('from_project_id') == $p->id ? 'selected' : '' }}>
                                            {{ $p->project_name }}
                                        </option>
                                    @endforeach
                                </select>
                                {{-- Available stock display --}}
                                <div id="sourceStockInfo" class="mt-2" style="display:none;">
                                    <small class="text-muted">
                                        Available: <strong id="sourceStockValue" class="text-primary">—</strong>
                                        <span id="sourceStockUnit"></span>
                                    </small>
                                </div>
                            </div>

                            <div class="col-md-2 d-flex align-items-center justify-content-center">
                                <div class="transfer-arrow-wrapper">
                                    <i class="bi bi-arrow-right-circle-fill text-primary" style="font-size: 2rem;"></i>
                                </div>
                            </div>

                            <div class="col-md-5">
                                <label for="to_project_id" class="form-label">
                                    <i class="bi bi-box-arrow-in-down text-success"></i>
                                    To Project <span class="text-danger">*</span>
                                </label>
                                <select name="to_project_id" id="to_project_id" class="form-select" required>
                                    <option value="">— Destination Project —</option>
                                    @foreach($projects as $p)
                                        <option value="{{ $p->id }}" {{ old('to_project_id') == $p->id ? 'selected' : '' }}>
                                            {{ $p->project_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        {{-- Quantity --}}
                        <div class="mb-4">
                            <label for="quantity" class="form-label">
                                Quantity <span class="text-danger">*</span>
                                <span id="unitLabel" class="text-muted small"></span>
                            </label>
                            <input type="number" name="quantity" id="quantity" step="0.01" min="0.01"
                                   class="form-control" placeholder="Enter transfer quantity"
                                   value="{{ old('quantity') }}" required>
                        </div>

                        {{-- Notes --}}
                        <div class="mb-4">
                            <label for="notes" class="form-label">Notes / Reason</label>
                            <textarea name="notes" id="notes" class="form-control" rows="3"
                                      placeholder="e.g., Materials needed for 5th floor slab casting at Project B">{{ old('notes') }}</textarea>
                        </div>

                        {{-- Transfer Summary Preview --}}
                        <div id="transferPreview" class="alert alert-info mb-4" style="display: none;">
                            <div class="d-flex align-items-center gap-2 mb-2">
                                <i class="bi bi-info-circle"></i>
                                <strong>Transfer Summary</strong>
                            </div>
                            <div id="previewContent" class="small"></div>
                        </div>

                        {{-- Actions --}}
                        <div class="d-flex justify-content-between align-items-center">
                            <a href="{{ route('inventory.stock.index') }}" class="btn btn-outline-secondary">
                                <i class="bi bi-x-lg me-1"></i> Cancel
                            </a>
                            <button type="submit" class="btn btn-primary px-4" id="submitBtn">
                                <i class="bi bi-arrow-repeat me-1"></i> Execute Transfer
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
<style>
    .transfer-arrow-wrapper {
        margin-top: 1.5rem;
        animation: pulseArrow 2s infinite;
    }
    @keyframes pulseArrow {
        0%, 100% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.15); opacity: 0.7; }
    }
    #transferPreview {
        background: linear-gradient(135deg, hsl(199, 89%, 95%), hsl(199, 89%, 90%));
        border: 1px solid hsl(199, 89%, 80%);
        border-radius: var(--radius-sm);
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const materialSelect   = document.getElementById('material_id');
    const fromProjectSelect = document.getElementById('from_project_id');
    const toProjectSelect  = document.getElementById('to_project_id');
    const quantityInput    = document.getElementById('quantity');
    const unitLabel        = document.getElementById('unitLabel');
    const sourceStockInfo  = document.getElementById('sourceStockInfo');
    const sourceStockValue = document.getElementById('sourceStockValue');
    const sourceStockUnit  = document.getElementById('sourceStockUnit');
    const transferPreview  = document.getElementById('transferPreview');
    const previewContent   = document.getElementById('previewContent');

    function fetchProjectStock() {
        const materialId = materialSelect.value;
        const projectId  = fromProjectSelect.value;

        if (!materialId || !projectId) {
            sourceStockInfo.style.display = 'none';
            return;
        }

        fetch(`{{ route('inventory.api.project-material-stock') }}?material_id=${materialId}&project_id=${projectId}`, {
            headers: { 'Accept': 'application/json' }
        })
        .then(r => r.json())
        .then(data => {
            sourceStockValue.textContent = parseFloat(data.available_stock).toFixed(2);
            sourceStockUnit.textContent  = data.unit.toUpperCase();
            sourceStockInfo.style.display = 'block';

            // Set max on quantity
            quantityInput.max = data.available_stock;
        })
        .catch(() => {
            sourceStockInfo.style.display = 'none';
        });
    }

    function updateUnitLabel() {
        const opt = materialSelect.options[materialSelect.selectedIndex];
        if (opt && opt.value) {
            unitLabel.textContent = `(${opt.dataset.unit})`;
        } else {
            unitLabel.textContent = '';
        }
    }

    function updatePreview() {
        const matOpt  = materialSelect.options[materialSelect.selectedIndex];
        const fromOpt = fromProjectSelect.options[fromProjectSelect.selectedIndex];
        const toOpt   = toProjectSelect.options[toProjectSelect.selectedIndex];
        const qty     = quantityInput.value;

        if (matOpt?.value && fromOpt?.value && toOpt?.value && qty > 0) {
            previewContent.innerHTML =
                `<strong>${qty} ${matOpt.dataset.unit}</strong> of <strong>${matOpt.text}</strong><br>` +
                `<span class="text-danger"><i class="bi bi-dash-circle"></i> OUT:</span> ${fromOpt.text}<br>` +
                `<span class="text-success"><i class="bi bi-plus-circle"></i> IN:</span> ${toOpt.text}`;
            transferPreview.style.display = 'block';
        } else {
            transferPreview.style.display = 'none';
        }
    }

    materialSelect.addEventListener('change', () => { updateUnitLabel(); fetchProjectStock(); updatePreview(); });
    fromProjectSelect.addEventListener('change', () => { fetchProjectStock(); updatePreview(); });
    toProjectSelect.addEventListener('change', updatePreview);
    quantityInput.addEventListener('input', updatePreview);

    // Init
    updateUnitLabel();
    fetchProjectStock();
    updatePreview();

    // Confirm before submit
    document.getElementById('transferForm').addEventListener('submit', function (e) {
        const fromName = fromProjectSelect.options[fromProjectSelect.selectedIndex]?.text;
        const toName   = toProjectSelect.options[toProjectSelect.selectedIndex]?.text;
        const matName  = materialSelect.options[materialSelect.selectedIndex]?.text;
        const qty      = quantityInput.value;

        if (!confirm(`Are you sure you want to transfer ${qty} of ${matName}\nFrom: ${fromName}\nTo: ${toName}?`)) {
            e.preventDefault();
        }
    });
});
</script>
@endpush