{{-- @extends('layout')
@section('content')
<div class="page-container purchase-order-page">
    <div class="container py-5">
        <div class="position-relative mb-4">
            <h2 class="text-center text-black">รถเข็นของฉัน</h2>
        </div>

        <div class="card custom-card">
            <div class="mb-4">
                <h3 class="mb-4">รายการในรถเข็น</h3>
                
                <div class="row align-items-center mb-3">
                    <div class="col-auto">
                        <input type="checkbox" id="select-all">
                    </div>
                    <div class="col">
                        <label for="select-all">เลือกทั้งหมด / ยกเลิกทั้งหมด</label>
                    </div>
                </div>
                
                <div class="row align-items-center">
                    <div class="col-auto">
                        <input type="checkbox" class="item-checkbox" checked>
                    </div>
                    <div class="col-md-2">
                        <img src="{{asset('images/m-course-1.png')}}" alt="course" class="w-100">
                    </div>
                    <div class="col">
                        รมผ223 หลักการโสตสัมผัสวิทยา
                    </div>
                    <div class="col-auto">
                        200.00 บาท
                    </div>
                    <div class="col-auto">
                        <a href="#" class="btn text-danger"><i class="bi bi-trash"></i></a>
                    </div>
                </div>
                <div class="row align-items-center mt-3">
                    <div class="col-auto">
                        <input type="checkbox" class="item-checkbox">
                    </div>
                    <div class="col-md-2">
                        <img src="{{asset('images/m-course-2.png')}}" alt="course" class="w-100">
                    </div>
                    <div class="col">
                        SCGE150 คิดแบบนักวิทยาศาสตร์
                    </div>
                    <div class="col-auto">
                        200.00 บาท
                    </div>
                    <div class="col-auto">
                        <a href="#" class="btn text-danger"><i class="bi bi-trash"></i></a>
                    </div>
                </div>
                <div class="mt-3  align-items-center row g-5">                    
                    <div class="text-end mt-3 text-black col text-end">
                    รวมทั้งหมด: <strong> 200.00 บาท</strong>
                    </div>
                    <div class="text-center mt-3 col-auto">
                        <button class="btn green-btn">ยืนยันคำสั่งซื้อ</button>
                    </div>
                </div>
            </div>
        </div>
        </di>
    </div>
</div>
<div class="modal fade" id="paymentModal" tabindex="-1" aria-labelledby="paymentModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body text-center border-0 pt-5">
                <i class="bi bi-check-circle-fill text-green fs-1 text-blue"></i>
                <div class="fs-4 text-blue">
                    แจ้งผลการชำระเงินเรียบร้อยแล้ว
                </div>
                <div>แจ้งผลการชำระเงินเรียบร้อยแล้ว</div>
                <p>จะมีแจ้งเตือนไปที่อีเมลของคุณเมื่อเอกสารอนุมัติสำเร็จ</p>
            </div>
            <div class="modal-footer justify-content-center border-0">
                <button type="button" class="btn green-btn w-50" data-bs-dismiss="modal">ตกลง</button>
            </div>
        </div>
    </div>
</div>

<script>
    document.getElementById('select-all').addEventListener('change', function() {
        const checkboxes = document.querySelectorAll('.item-checkbox');
        checkboxes.forEach(checkbox => {
            checkbox.checked = this.checked;
        });
    });
</script>

@endsection --}}
@extends('layout')
@section('content')

<div class="page-container purchase-order-page">
    <div class="container py-5">
        <div class="position-relative mb-4">
            <h2 class="text-center text-black">รถเข็นของฉัน</h2>
        </div>

    <form action="{{ route('purchase-order') }}" method="POST">
        @csrf
        <div class="card custom-card">
            <div class="mb-4">
                <h3 class="mb-4">รายการในรถเข็น</h3>
                
                <div class="row align-items-center mb-3">
                    <div class="col-auto">
                        <input type="checkbox" id="select-all">
                    </div>
                    <div class="col">
                        <label for="select-all">เลือกทั้งหมด / ยกเลิกทั้งหมด</label>
                    </div>
                </div>
                
                @foreach ($cartItems as $item)
                <div class="row align-items-center mt-3">
                     <div class="col-auto">
                            <input type="checkbox" name="selected_items[]" value="{{ json_encode($item) }}" data-price="{{$item['price']}}" class="item-checkbox" checked>
                        </div>
                        <div class="col-md-2">
                            <img src="{{ asset($item['image']) }}" alt="course" class="w-100">
                        </div>
                        <div class="col">
                            {{ $item['name'] }}
                        </div>
                        <div class="col-auto">
                            {{ number_format($item['price'], 2) }} บาท
                        </div>
                    <div class="col-auto">
                        <a href="#" class="btn text-danger"><i class="bi bi-trash"></i></a>
                    </div>
                </div>
                @endforeach

                <div class="mt-3 align-items-center row g-5">                    
                    <div class="text-end mt-3 text-black col text-end">
                        รวมทั้งหมด: <strong id="total-price">0.00 บาท</strong>
                    </div>
                    <div class="text-center mt-3 col-auto">
                        <button type="submit" class="btn green-btn" >ยืนยันคำสั่งซื้อ</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
    </div>
</div>

{{-- <div class="modal fade" id="paymentModal" tabindex="-1" aria-labelledby="paymentModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body text-center border-0 pt-5">
                <i class="bi bi-check-circle-fill text-green fs-1 text-blue"></i>
                <div class="fs-4 text-blue">
                    แจ้งผลการชำระเงินเรียบร้อยแล้ว
                </div>
                <div>แจ้งผลการชำระเงินเรียบร้อยแล้ว</div>
                <p>จะมีแจ้งเตือนไปที่อีเมลของคุณเมื่อเอกสารอนุมัติสำเร็จ</p>
            </div>
            <div class="modal-footer justify-content-center border-0">
                <button type="button" class="btn green-btn w-50" data-bs-dismiss="modal">ตกลง</button>
            </div>
        </div>
    </div>
</div> --}}

<script>
    function calculateTotalPrice() {
        const checkboxes = document.querySelectorAll('.item-checkbox:checked');
        let total = 0;

        checkboxes.forEach(checkbox => {
            total += parseFloat(checkbox.getAttribute('data-price'));
        });

        document.getElementById('total-price').textContent = total.toFixed(2) + ' บาท';
    }

    document.getElementById('select-all').addEventListener('change', function() {
        const checkboxes = document.querySelectorAll('.item-checkbox');
        checkboxes.forEach(checkbox => {
            checkbox.checked = this.checked;
        });
        calculateTotalPrice();
    });

    document.querySelectorAll('.item-checkbox').forEach(checkbox => {
        checkbox.addEventListener('change', calculateTotalPrice);
    });

    // Calculate the total price on page load
    window.onload = calculateTotalPrice;
</script>

@endsection