@extends('layouts.master')
@section('title', 'Link Receipt to Invoice - Quanta')
@section('content')

<div class="container-fluid py-4" style="font-family: 'Outfit', 'Inter', sans-serif;">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="fw-bold mb-0 text-dark">
            <i class="fas fa-link me-2 text-primary"></i> Link Receipt to Invoice
        </h4>
        <a href="{{ route('receipts.create') }}" class="btn btn-outline-secondary px-4 py-2 rounded-3 border-2">
            <i class="fas fa-arrow-left me-2"></i> Back to Receipts
        </a>
    </div>

    @if($errors->any())
        <div class="alert alert-danger border-0 shadow-sm rounded-3 mb-4 py-3">
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li><i class="fas fa-exclamation-triangle me-2"></i> {{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="row">
        <!-- Receipt Details Card -->
        <div class="col-lg-5 mb-4 mb-lg-0">
            <div class="card border-0 shadow-sm rounded-4 overflow-hidden h-100">
                <div class="card-header bg-primary text-white py-3 border-0" style="background: linear-gradient(135deg, #6f42c1, #563d7c);">
                    <h5 class="mb-0 fw-bold"><i class="fas fa-receipt me-2"></i> Receipt Details</h5>
                </div>
                <div class="card-body p-4 bg-light">
                    <div class="mb-4 text-center">
                        <span class="text-muted text-uppercase tracking-wider small fw-bold">Receipt Total</span>
                        <h2 class="fw-bold text-primary mt-1 mb-0">{{ number_format($receipt->total_amount, 2) }}</h2>
                    </div>

                    <hr class="my-4" style="border-top: 1px dashed #ced4da;">

                    <div class="mb-3 d-flex justify-content-between">
                        <span class="text-muted">Receipt Number:</span>
                        <strong class="text-dark">{{ $receipt->receipt_number }}</strong>
                    </div>
                    <div class="mb-3 d-flex justify-content-between">
                        <span class="text-muted">Customer Name:</span>
                        <strong class="text-dark">{{ $receipt->customer->account_name ?? $receipt->walk_in_customer_name ?? '-' }}</strong>
                    </div>
                    <div class="mb-3 d-flex justify-content-between">
                        <span class="text-muted">Receipt Date:</span>
                        <strong class="text-dark">{{ $receipt->receipt_date ? $receipt->receipt_date->format('Y-m-d') : '-' }}</strong>
                    </div>
                    <div class="mb-3 d-flex justify-content-between">
                        <span class="text-muted">Reference:</span>
                        <strong class="text-dark">{{ $receipt->reference ?? '-' }}</strong>
                    </div>
                    <div class="mb-0 d-flex justify-content-between">
                        <span class="text-muted">Description:</span>
                        <strong class="text-dark">{{ $receipt->description ?? '-' }}</strong>
                    </div>
                </div>
            </div>
        </div>

        <!-- Linking Form Card -->
        <div class="col-lg-7">
            <div class="card border-0 shadow-sm rounded-4 overflow-hidden h-100">
                <div class="card-header bg-dark text-white py-3 border-0" style="background: linear-gradient(135deg, #1f2937, #111827);">
                    <h5 class="mb-0 fw-bold"><i class="fas fa-link me-2"></i> Select Target Invoice</h5>
                </div>
                <div class="card-body p-4">
                    <form action="{{ route('receipts.link-invoice-submit', $receipt->id) }}" method="POST" id="linkReceiptForm">
                        @csrf
                        
                        <div class="mb-4">
                            <label class="form-label fw-semibold text-dark mb-2">Select Target Customer Invoice *</label>
                            <select name="invoice_id" class="form-control select2 rounded-3" required id="invoiceSelect">
                                <option value="">Select Invoice to Link to</option>
                                @foreach($invoices as $invoice)
                                    <option value="{{ $invoice->id }}" data-outstanding="{{ $invoice->outstanding_balance }}">
                                        {{ $invoice->document_number }} &nbsp;|&nbsp; Date: {{ $invoice->document_date ? $invoice->document_date->format('Y-m-d') : '-' }} &nbsp;|&nbsp; Total: {{ number_format($invoice->inclusive_total, 2) }} &nbsp;|&nbsp; Outstanding: {{ number_format($invoice->outstanding_balance, 2) }}
                                    </option>
                                @endforeach
                            </select>
                            <div class="form-text text-muted mt-2">
                                <i class="fas fa-info-circle me-1"></i> Linking this receipt will allocate the amount to the outstanding balance of the selected invoice.
                            </div>
                        </div>

                        <div id="allocationPreview" class="p-3 mb-4 rounded-3 bg-light border border-dashed d-none">
                            <h6 class="fw-bold mb-2 text-dark"><i class="fas fa-calculator me-2 text-primary"></i> Allocation Breakdown</h6>
                            <div class="row text-center mt-3">
                                <div class="col-4">
                                    <div class="small text-muted">Receipt Amount</div>
                                    <div class="fw-bold text-primary mt-1">{{ number_format($receipt->total_amount, 2) }}</div>
                                </div>
                                <div class="col-4 border-start border-end">
                                    <div class="small text-muted">Invoice Outstanding</div>
                                    <div class="fw-bold text-dark mt-1" id="previewOutstanding">0.00</div>
                                </div>
                                <div class="col-4">
                                    <div class="small text-muted">New Outstanding</div>
                                    <div class="fw-bold text-success mt-1" id="previewNewOutstanding">0.00</div>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-end pt-3 border-top">
                            <button type="submit" class="btn btn-primary px-4 py-2 rounded-3 fw-semibold transition-all" style="background-color: #6f42c1; border-color: #6f42c1;">
                                <i class="fas fa-link me-2"></i> Link Receipt
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('styles')
<style>
    .transition-all {
        transition: all 0.25s ease-in-out;
    }
    .transition-all:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(111, 66, 193, 0.35);
    }
    .select2-container--default .select2-selection--single {
        border-radius: 8px !important;
        border: 1px solid #ced4da !important;
        height: 42px !important;
        padding: 6px 12px !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 40px !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 28px !important;
    }
</style>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        $('.select2').select2({
            placeholder: "Select Invoice to Link to",
            allowClear: true,
            width: '100%'
        });

        $('#invoiceSelect').on('change', function() {
            const selected = $(this).find(':selected');
            if (selected.val()) {
                const outstanding = parseFloat(selected.data('outstanding'));
                const receiptVal = parseFloat('{{ $receipt->total_amount }}');
                const newOutstanding = Math.max(0, outstanding - receiptVal);

                $('#previewOutstanding').text(outstanding.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                $('#previewNewOutstanding').text(newOutstanding.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                $('#allocationPreview').removeClass('d-none');
            } else {
                $('#allocationPreview').addClass('d-none');
            }
        });
    });
</script>
@endsection