@extends('layouts.app')

@section('title', __('dashboard.receive_laundry_operation'))
@section('page_heading', __('dashboard.receive_laundry_operation'))

@section('breadcrumb')
    <li class="app-breadcrumb__item text-[var(--text-secondary)]">
        <a href="{{ route('dashboard.home') }}" class="text-[var(--text-secondary)] hover:text-[var(--c-primary-dark)]">{{ __('dashboard.Home') }}</a>
    </li>
    <li class="app-breadcrumb__item text-[var(--text-secondary)]">
        <a href="{{ route('dashboard.laundry_operations.index') }}" class="text-[var(--text-secondary)] hover:text-[var(--c-primary-dark)]">{{ __('dashboard.Laundry Operations') }}</a>
    </li>
    <li class="app-breadcrumb__item text-[var(--text-secondary)]">{{ __('dashboard.receive_laundry_operation') }}</li>
@endsection

@section('content')
@include('dashboard.partials.audit-log-styles')
<style>
    .laundry-receipt-page .app-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .45rem;
        min-height: 42px;
        padding: .6rem 1.1rem;
        border: 1px solid transparent;
        border-radius: 10px;
        font-size: .875rem;
        font-weight: 800;
        line-height: 1.25;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        transition: transform .18s, box-shadow .18s, background .18s, border-color .18s, color .18s;
    }
    .laundry-receipt-page .app-action:hover { transform: translateY(-1px); }
    .laundry-receipt-page .app-action--sm {
        min-height: 34px;
        padding: .4rem .85rem;
        border-radius: 8px;
        font-size: .8rem;
    }
    .laundry-receipt-page .app-action--primary {
        background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
        color: #fff;
        box-shadow: 0 4px 14px rgba(var(--c-primary-rgb), .35);
    }
    .laundry-receipt-page .app-action--secondary {
        background: var(--surface-50);
        border-color: var(--border);
        color: var(--surface-700);
    }
    .laundry-receipt-page .app-action--success {
        background: #f0fdf4;
        border-color: #bbf7d0;
        color: #15803d;
    }
    .laundry-receipt-page .app-action--warning {
        background: #fffbeb;
        border-color: #fde68a;
        color: #b45309;
    }
    .laundry-receipt-page .app-panel {
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        background: var(--bg-card);
        box-shadow: var(--shadow-card);
        overflow: hidden;
    }
    .laundry-receipt-page .app-panel__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid var(--border-subtle);
        background: var(--bg-card);
    }
    .laundry-receipt-page .app-panel__title {
        margin: 0;
        font-size: 1rem;
        font-weight: 900;
        color: var(--text-primary);
    }
    .laundry-receipt-page .app-panel__toolbar {
        display: flex;
        align-items: center;
        gap: .65rem;
        flex-wrap: wrap;
    }
    .laundry-receipt-page .app-panel__body { padding: 1.5rem; }
    .laundry-receipt-page .app-field-label {
        display: block;
        margin-bottom: .4rem;
        color: var(--surface-700);
        font-size: .875rem;
        font-weight: 700;
    }
    .laundry-receipt-page .app-product-item {
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        background: var(--bg-card);
    }
    .laundry-receipt-page .app-product-thumb {
        width: 60px;
        height: 60px;
        border-radius: var(--radius-lg);
        object-fit: cover;
        flex-shrink: 0;
    }
    .laundry-receipt-page .app-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        padding: .45rem .75rem;
        font-size: .75rem;
        font-weight: 800;
        line-height: 1;
        white-space: nowrap;
    }
    .laundry-receipt-page .app-chip--info {
        background: #eff6ff;
        color: #1d4ed8;
    }
    .laundry-receipt-page .app-chip--dark {
        background: var(--surface-100);
        color: var(--surface-700);
    }
    .laundry-receipt-page .app-chip--success {
        background: #f0fdf4;
        color: #15803d;
    }
    .laundry-receipt-page .app-chip--warning {
        background: #fffbeb;
        color: #b45309;
    }
    .laundry-receipt-page .app-chip--danger {
        background: #fef2f2;
        color: #dc2626;
    }
    .laundry-receipt-page .app-switch {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
    }
    .laundry-receipt-page .app-switch__input {
        width: 1rem;
        height: 1rem;
        accent-color: var(--c-primary);
        cursor: pointer;
    }
    .laundry-receipt-page .app-switch__label {
        color: var(--surface-700);
        font-size: .875rem;
        font-weight: 600;
        cursor: pointer;
    }
    .laundry-receipt-page .app-timeline-icon-surface {
        width: 3rem;
        height: 3rem;
        border-radius: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--c-primary-bg);
        color: var(--c-primary-dark);
    }
</style>
<div class="laundry-receipt-page">
    <div class="grid gap-7">

        <div class="app-panel mb-7">
            <div class="app-panel__header">
                <h2 class="app-panel__title">{{ __('dashboard.receive_laundry_operation') }} #{{ $laundryOperation->id }}</h2>
                <div class="app-panel__toolbar">
                    <span class="app-chip app-chip--info">{{ $laundryOperation->laundry->name }}</span>
                </div>
            </div>
            <div class="app-panel__body">
                <form action="{{ route('dashboard.laundry_operations.process_receipt', $laundryOperation->id) }}" method="POST">
                    @csrf

                    <div class="mb-7">
                        <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
                           <h4 class="m-0">{{ __('dashboard.products_list') }}</h4>
                           <div class="flex gap-2">
                               <button type="button" class="app-action app-action--sm app-action--success" id="receive_all_btn">{{ __('dashboard.receive_all') }}</button>
                               <button type="button" class="app-action app-action--sm app-action--warning" id="uncheck_all_btn">{{ __('dashboard.reset_all') }}</button>
                           </div>
                        </div>

                        <div id="products_to_receive" class="flex flex-col gap-3">
                            @foreach($receiptProducts as $product)
                                <div class="app-product-item product-item p-4" data-product-id="{{ $product['id'] }}">
                                    <input type="hidden" name="products[{{ $product['id'] }}][is_on_form]" value="1">
                                    <div class="flex flex-wrap items-center gap-3">
                                        <img src="{{ $product['image_url'] }}" alt="{{ $product['name'] }}" class="app-product-thumb">
                                        <div class="min-w-0 flex-1">
                                            <h6 class="mb-1">{{ $product['name'] }}</h6>
                                            <p class="m-0 text-[var(--text-secondary)]">SKU: {{ $product['sku'] }}</p>
                                        </div>
                                        <label class="app-switch">
                                            <input class="app-switch__input product-received-toggle" type="checkbox" name="products[{{ $product['id'] }}][is_received]" value="1" {{ $product['is_received'] ? 'checked' : '' }}>
                                            <span class="app-switch__label">{{ __('dashboard.received') }}</span>
                                        </label>
                                        <div style="width: 150px;">
                                            <input type="date" name="products[{{ $product['id'] }}][received_on]" class="app-input product-received-date" value="{{ $product['received_on'] }}" {{ !$product['is_received'] ? 'disabled' : '' }}>
                                        </div>
                                        <div style="width: 120px;">
                                            <input type="number" step="0.01" min="0" name="products[{{ $product['id'] }}][price]" class="app-input product-price" placeholder="{{ __('dashboard.price') }}" value="{{ $product['price'] }}" {{ !$product['is_received'] ? 'disabled' : '' }}>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="mb-10 flex justify-end">
                         <div style="width: 250px;">
                            <label class="app-field-label text-base">{{ __('dashboard.total_laundry_amount') }}</label>
                            <input type="text" id="total_laundry_amount" class="app-input text-2xl font-bold text-emerald-600" readonly value="{{ $initialLaundryAmount }}">
                        </div>
                    </div>

                    <div class="flex justify-end gap-3">
                        <a href="{{ route('dashboard.laundry_operations.index') }}" class="app-action app-action--secondary">{{ __('dashboard.cancel') }}</a>
                        <button type="submit" class="app-action app-action--primary">{{ __('dashboard.save_receipt') }}</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="app-card app-card--flush audit-trail">
            <div class="app-card__header">
                <h2 class="app-card__title">{{ __('dashboard.history_title') }}</h2>
                <div class="app-card__toolbar">
                    <span class="app-badge app-badge--dark me-3">{{ __('dashboard.history_total') }}: {{ $auditSummary['total'] }}</span>
                    <span class="app-badge app-badge--success me-3">{{ __('dashboard.history_created') }}: {{ $auditSummary['created'] }}</span>
                    <span class="app-badge app-badge--warning me-3">{{ __('dashboard.history_updated') }}: {{ $auditSummary['updated'] }}</span>
                    <span class="app-badge app-badge--danger me-3">{{ __('dashboard.history_deleted') }}: {{ $auditSummary['deleted'] }}</span>
                    <a href="#operation_history_collapse" class="app-btn app-btn--sm app-btn--ghost" onclick="event.preventDefault();var el=document.getElementById('operation_history_collapse');el.style.display=el.style.display==='none'?'block':'none'">
                        {{ __('dashboard.history_toggle') }}
                    </a>
                </div>
            </div>
            <div id="operation_history_collapse" class="app-collapse">
                <div class="app-card__body pt-5">
                    <div class="timeline">
                        @forelse ($auditEntries as $entry)
                            <div class="timeline-item">
                                <div class="timeline-line w-40px"></div>
                                <div class="timeline-icon inline-flex rounded-full w-10 h-10 me-4">
                                    <div class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-blue-50 dark:bg-blue-950/30">
                                        <i class="{{ $entry['icon'] }} text-2xl text-blue-600 dark:text-blue-400"></i>
                                    </div>
                                </div>
                                <div class="timeline-content mb-10 mt-n1">
                                    <div class="pe-3 mb-5">
                                        <div class="text-base font-semibold mb-2">
                                            {{ $entry['headline'] }}
                                            {{ __('dashboard.history_event_by') }}
                                            <a href="#" class="text-blue-800 dark:text-blue-300 font-bold">{{ $entry['actor'] }}</a>
                                        </div>
                                        <div class="flex items-center mt-1 text-sm">
                                            <div class="text-slate-500 dark:text-slate-400 me-2 text-xs">{{ $entry['timestamp'] }} ({{ $entry['timestamp_human'] }})</div>
                                        </div>
                                        @if ($entry['changes']->isNotEmpty())
                                            <div class="mt-3">
                                                @foreach ($entry['changes'] as $change)
                                                    <div class="flex flex-wrap">
                                                        <div class="font-bold me-2">{{ $change['label'] }}:&nbsp;</div>
                                                        <div class="text-slate-500 dark:text-slate-400">
                                                            @if($change['has_old'])
                                                                <span class="text-red-600 dark:text-red-400 me-1"><s>{{ $change['old'] }}</s></span>
                                                            @endif
                                                            <i class="fa-solid fa-arrow-right text-slate-500 dark:text-slate-400 text-sm mx-1"></i>
                                                            <span class="text-emerald-600 dark:text-emerald-400 font-bold">{{ $change['new'] }}</span>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @empty
                            <p>{{ __('dashboard.history_no_history_found') }}</p>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const today = new Date().toISOString().slice(0, 10);
    const productsToReceive = document.getElementById('products_to_receive');
    const totalLaundryAmount = document.getElementById('total_laundry_amount');
    const receiveAllBtn = document.getElementById('receive_all_btn');
    const uncheckAllBtn = document.getElementById('uncheck_all_btn');

    function calculateTotalAmount() {
        let total = 0;
        document.querySelectorAll('.product-item').forEach(productItem => {
            if (productItem.querySelector('.product-received-toggle')?.checked) {
                const price = parseFloat(productItem.querySelector('.product-price')?.value) || 0;
                total += price;
            }
        });
        totalLaundryAmount.value = total.toFixed(2);
    }

    function toggleProductInputs(productItem) {
        const isReceived = productItem.querySelector('.product-received-toggle')?.checked;
        const priceInput = productItem.querySelector('.product-price');
        const dateInput = productItem.querySelector('.product-received-date');

        if (isReceived) {
            priceInput.disabled = false;
            dateInput.disabled = false;
            if (!dateInput.value) { dateInput.value = today; }
        } else {
            priceInput.disabled = true;
            priceInput.value = '';
            dateInput.disabled = true;
            dateInput.value = '';
        }
    }

    calculateTotalAmount();

    productsToReceive.addEventListener('change', function(e) {
        const toggle = e.target.closest('.product-received-toggle');
        if (!toggle) return;
        toggleProductInputs(toggle.closest('.product-item'));
        calculateTotalAmount();
    });

    productsToReceive.addEventListener('input', function(e) {
        if (e.target.closest('.product-price')) calculateTotalAmount();
    });

    receiveAllBtn.addEventListener('click', function() {
        document.querySelectorAll('.product-item .product-received-toggle:not(:checked)').forEach(toggle => {
            toggle.checked = true;
            toggle.dispatchEvent(new Event('change', { bubbles: true }));
        });
    });

    uncheckAllBtn.addEventListener('click', function() {
        document.querySelectorAll('.product-item .product-received-toggle:checked').forEach(toggle => {
            toggle.checked = false;
            toggle.dispatchEvent(new Event('change', { bubbles: true }));
        });
    });
});
</script>
@endsection