@extends('frontend.layout.app')
@section('content')
<div class="breadcumb-wrapper" data-bg-src="{{ asset('frontend/assets/img/breadcumb/breadcumb-bg.jpg') }}">
    <div class="container z-index-common">
        <div class="breadcumb-content">
            <h1 class="breadcumb-title">
                @if($alreadyPurchasedCompulsoryItems)
                    Additional Items &amp; AddOns
                @else
                    Compulsory Items &amp; AddOns
                @endif
            </h1>
            <div class="breadcumb-menu-wrap">
                <ul class="breadcumb-menu">
                    <li><a href="{{ route('index') }}">Home</a></li>
                    <li>
                        @if($alreadyPurchasedCompulsoryItems)
                            Additional Items
                        @else
                            Compulsory Items
                        @endif
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="container mt-5">
    <form id="cartForm" method="POST" action="{{ route('student.cart.add_all') }}">
        @csrf

        {{-- Show message if compulsory items already purchased --}}
        @if($alreadyPurchasedCompulsoryItems)
            <div class="alert alert-success d-flex align-items-center mb-4" role="alert">
                <i class="bi bi-check-circle-fill me-2" style="font-size: 1.5rem;"></i>
                <div>
                    <strong>Compulsory items already ordered!</strong> You can now browse and purchase additional add-ons below.
                </div>
            </div>
        @endif

        {{-- Show compulsory items only if not purchased --}}
        @if(!$alreadyPurchasedCompulsoryItems)
            <h3 class="mb-4 fw-bold">
                <i class="bi bi-basket3 me-2"></i>Order Compulsory Items
            </h3>

            @if($items->count() > 0)
                <div class="table-responsive">
                    <table class="table table-bordered align-middle">
                        <thead class="table-light">
                            <tr>
                                <th width="50px">
                                    <input type="checkbox" id="selectAll" checked disabled>
                                </th>
                                <th width="80px">Image</th>
                                <th>Item Name</th>
                                <th>School</th>
                                <th width="100px">Price</th>
                                <th width="100px">MRP</th>
                                <th width="120px">Quantity</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($items as $item)
                                <tr>
                                    <td class="text-center">
                                        <input type="checkbox" name="items[]" value="{{ $item->id }}" checked disabled>
                                    </td>
                                    <td>
                                        @if ($item->image)
                                            <img src="{{ asset('storage/compulsary/' . $item->image) }}" alt="{{ $item->name }}"
                                                 class="img-thumbnail" style="width: 60px; height: 60px; object-fit: cover;">
                                        @else
                                            <div class="text-center text-muted small">No Image</div>
                                        @endif
                                    </td>
                                    <td>
                                        <strong>{{ $item->name }}</strong>
                                        @if($item->stock_status != 'in_stock')
                                            <span class="badge bg-danger ms-2">Out of Stock</span>
                                        @endif
                                    </td>
                                    <td>{{ $item->school ? $item->school->name : '-' }}</td>
                                    <td>
                                        <span class="fw-bold text-success">&#8377;{{ number_format($item->price, 2) }}</span>
                                    </td>
                                    <td>
                                        <span class="text-danger text-decoration-line-through">&#8377;{{ number_format($item->mrp, 2) }}</span>
                                    </td>
                                    <td>
                                        <input type="number" name="quantities[{{ $item->id }}]" value="1"
                                               class="form-control" min="1" max="10"
                                               {{ $item->stock_status != 'in_stock' ? 'disabled' : '' }}>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="alert alert-info">
                    <i class="bi bi-info-circle me-2"></i>No compulsory items available for your standard/gender.
                </div>
            @endif
        @endif

        {{-- Always show Add Ons section --}}
        <div class="card shadow-lg border-0 rounded-4 {{ !$alreadyPurchasedCompulsoryItems ? 'mt-5' : '' }}">
            <div class="card-header bg-info bg-gradient text-white rounded-top-4 d-flex align-items-center">
                <i class="bi bi-plus-circle me-2" style="font-size: 1.3rem;"></i>
                <h5 class="fw-semibold mb-0">Add-Ons Available (School Specific)</h5>
            </div>
            <div class="card-body p-4">
                @if($addons->count())
                    <div class="row g-3">
                        @foreach ($addons as $add)
                            <div class="col-12 col-md-6 col-lg-4">
                                <div class="border rounded-3 p-3 h-100 d-flex flex-column justify-content-between shadow-sm hover-shadow">
                                    <div class="d-flex align-items-center mb-2">
                                        <input
                                            class="form-check-input me-2 flex-shrink-0"
                                            type="checkbox"
                                            name="addons[]"
                                            value="{{ $add->id }}"
                                            id="addonCheck{{ $add->id }}">
                                        <label class="form-check-label flex-grow-1 cursor-pointer" for="addonCheck{{ $add->id }}">
                                            <span class="fw-semibold">{{ $add->name }}</span>
                                        </label>
                                        @if($add->image)
                                            <img src="{{ asset($add->image) }}" alt="{{ $add->name }}"
                                                 class="ms-3 img-thumbnail" style="height:40px; width:40px; object-fit:cover; border-radius:7px;">
                                        @else
                                            <span class="text-muted ms-3 small">No Image</span>
                                        @endif
                                    </div>
                                    <div class="d-flex flex-wrap align-items-center justify-content-between px-1 mt-2">
                                        <div>
                                            <span class="text-primary fw-semibold">Price:</span>
                                            @if(isset($add->sp))
                                                <span class="text-success fw-bold">&#8377;{{ number_format($add->sp, 2) }}</span>
                                            @else
                                                <span class="text-muted">N/A</span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="alert alert-info mb-0">
                        <i class="bi bi-info-circle me-2"></i>No add-ons available for this school at the moment.
                    </div>
                @endif
            </div>
        </div>

        {{-- Submit button with dynamic text and state --}}
        <div class="mt-4 text-end mb-5">
            @php
                $hasItemsToOrder = false;

                // Check if there are in-stock compulsory items
                if (!$alreadyPurchasedCompulsoryItems && $items->where('stock_status', 'in_stock')->count() > 0) {
                    $hasItemsToOrder = true;
                }

                // Check if there are addons available
                if ($addons->count() > 0) {
                    $hasItemsToOrder = true;
                }
            @endphp

            <button type="submit" class="btn btn-primary btn-lg px-5" {{ !$hasItemsToOrder ? 'disabled' : '' }}>
                <i class="bi bi-cart-plus me-2"></i>
                @if($alreadyPurchasedCompulsoryItems)
                    Add Selected Add-Ons to Cart
                @else
                    Add All Items to Cart
                @endif
            </button>

            @if(!$hasItemsToOrder)
                <div class="text-muted mt-2 small">
                    <i class="bi bi-exclamation-circle me-1"></i>
                    @if($alreadyPurchasedCompulsoryItems)
                        No add-ons available to order
                    @else
                        No items available to order
                    @endif
                </div>
            @endif
        </div>
    </form>
</div>

@push('styles')
<style>
    .hover-shadow {
        transition: box-shadow 0.3s ease;
    }
    .hover-shadow:hover {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }
    .cursor-pointer {
        cursor: pointer;
    }
</style>
@endpush
@endsection