@extends('frontend.layout.app')

@section('content')

<!-- Breadcrumb -->
<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">Student Cart</h1>
            <ul class="breadcumb-menu">
                <li><a href="{{ route('index') }}">Home</a></li>
                <li>Student Cart</li>
            </ul>
        </div>
    </div>
</div>

<div class="container py-5">

    {{-- Alerts --}}
    @if ($errors->any())
        <div class="alert alert-danger shadow-sm">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    @if (session('success'))
        <div class="alert alert-success shadow-sm">
            {{ session('success') }}
        </div>
    @endif

    <div class="row g-4">

        <!-- LEFT SIDE -->
        <div class="col-lg-8">

            {{-- Student Details --}}
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-light fw-semibold">
                    Registered Student Details
                </div>

                <div class="card-body">
                    <div class="row g-3">

                        <div class="col-md-4">
                            <label class="form-label small text-muted">Student ID</label>
                            <input class="form-control" value="{{ $student->student_id }}" readonly>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label small text-muted">Student Name</label>
                            <input class="form-control" value="{{ $student->student_name }}" readonly>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label small text-muted">Parent Name</label>
                            <input class="form-control" value="{{ $student->parent_name }}" readonly>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label small text-muted">Mobile</label>
                            <input class="form-control" value="{{ $student->phone }}" readonly>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label small text-muted">Email</label>
                            <input class="form-control" value="{{ $student->email }}" readonly>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label small text-muted">School</label>
                            <input class="form-control"
                                   value="{{ $student->school->name ?? ($student->school_name ?? '-') }}"
                                   readonly>
                        </div>

                    </div>
                </div>
            </div>

            {{-- Cart Items --}}
            <div class="card shadow-sm border-0">
                <div class="card-header bg-light fw-semibold">
                    Cart Items
                </div>

                <div class="card-body">

                    @if (!$cart || $cart->items->count() === 0)

                        <div class="text-center py-5">
                            <h5 class="fw-semibold">Your cart is empty</h5>
                            <p class="text-muted">
                                Please go to store and add items to your cart.
                            </p>

                            <a href="{{ route('store') }}" class="btn btn-primary">
                                Go To Store
                            </a>
                        </div>

                    @else

                        <div class="table-responsive">
                            <table class="table align-middle table-hover">
                                <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Item</th>
                                    <th>Type</th>
                                    <th class="text-end">Price</th>
                                    <th class="text-center">Qty</th>
                                    <th class="text-end">Total</th>
                                    <th class="text-center">Action</th>
                                </tr>
                                </thead>

                                <tbody>

                                @foreach ($cart->items as $index => $item)

                                    <tr>
                                        <td>{{ $index + 1 }}</td>

                                        <td>
                                            <div class="fw-semibold">{{ $item->name }}</div>

                                            @if($item->description)
                                                <small class="text-muted">
                                                    {{ $item->description }}
                                                </small>
                                            @endif
                                        </td>

                                        <td>
                                            @if ($item->item_type === 'compulsary')
                                                <span class="text-success">
                                                    Compulsary
                                                </span>
                                            @elseif ($item->item_type === 'addon')
                                                <span class="text-danger">
                                                    Add On
                                                </span>
                                            @else
                                                <span>
                                                    {{ ucfirst($item->item_type) }}
                                                </span>
                                            @endif
                                        </td>

                                        <td class="text-end">
                                            ₹{{ number_format($item->unit_price, 2) }}
                                        </td>

                                        <td class="text-center">
                                            {{ $item->quantity }}
                                        </td>

                                        <td class="text-end fw-semibold">
                                            ₹{{ number_format($item->line_total, 2) }}
                                        </td>

                                        <td class="text-center">

                                            @if($item->item_type === 'addon')
                                                <form method="get"
                                                      action="{{ route('student.cart.removeItem') }}"
                                                      onsubmit="return confirm('Remove this addon from cart?')">
                                                    <input type="hidden" name="item_id" value="{{ $item->id }}">
                                                    <button type="submit" class="btn btn-sm btn-outline-danger">
                                                        <i class="fa fa-trash"></i>
                                                    </button>
                                                </form>
                                            @else
                                                <span class="text-muted small">Locked</span>
                                            @endif

                                        </td>
                                    </tr>

                                @endforeach

                                </tbody>
                            </table>
                        </div>

                        <div class="text-end small text-muted mt-2">
                            Only add-ons can be removed from your cart.
                        </div>

                    @endif

                </div>
            </div>

        </div>

        <!-- RIGHT SIDE SUMMARY -->
        <div class="col-lg-4">

            <div class="card shadow-sm border-0 sticky-top" style="top: 90px;">

                <div class="card-header bg-light fw-semibold">
                    Order Summary
                </div>

                <div class="card-body">

                    <div class="d-flex justify-content-between mb-2">
                        <span>Subtotal</span>
                        <span class="fw-semibold">
                            ₹{{ number_format($cart->subtotal ?? 0, 2) }}
                        </span>
                    </div>


                    <hr>

                    <div class="d-flex justify-content-between mb-4">
                        <strong>Total</strong>
                        <strong class="text-primary">
                            ₹{{ number_format($cart->total ?? 0, 2) }}
                        </strong>
                    </div>

                    {{-- Payment --}}
                    @if($cart && $cart->items->count() > 0)

                        <form method="POST" action="{{ route('student.cart.submit') }}" target="_blank">
                            @csrf

                            <div class="mb-3">
                                <label class="form-label fw-semibold">
                                    Payment Method
                                </label>

                                <select class="form-select" name="payment_method" required>
                                    <option value="phonepe">PhonePe</option>
                                </select>
                            </div>

                            <button class="btn btn-primary w-100">
                                Proceed To Payment
                            </button>

                        </form>

                    @endif

                </div>
            </div>

        </div>

    </div>
</div>

@endsection