@extends('layouts.contentNavbarLayout')

@section('title', 'Food Dashboard')

@section('vendor-style')
<style>
    .product-card {
        background-color: #FFFFFF;
        padding: 15px;
        margin: 10px;
        border-radius: 15px;
        text-align: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s;
    }
    .product-card:hover {
        transform: translateY(-5px);
    }
    .product-image {
        max-width: 100%;
        height: auto;
        margin-bottom: 10px;
        border-radius: 10px;
        overflow: hidden;
    }
    .product-image img {
        width: 100%;
        height: 150px;
        object-fit: cover;
    }
    .product-name {
        font-size: 1.1em;
        margin-bottom: 5px;
        font-weight: bold;
        color: #212529;
    }
    .product-price {
        color: #007BFF;
        font-size: 1.2em;
        margin-bottom: 10px;
    }
    .buy-button {
        background-color: #007BFF;
        color: #FFFFFF;
        border: none;
        border-radius: 20px;
        padding: 10px 20px;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    .buy-button:hover {
        background-color: #0056b3;
    }
    .recent-orders {
        background-color: #FFFFFF;
        padding: 20px;
        border-radius: 15px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    .recent-orders h4 {
        color: #007BFF;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .order-card {
        padding: 15px;
        margin-bottom: 15px;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        background-color: #FFFFFF;
    }
    .order-card h5 {
        color: #212529;
        font-weight: bold;
    }
    .order-card h6 {
        color: #495057;
    }
    .order-card .text-info {
        color: #007BFF !important;
    }
</style>
@endsection

@if (session('message'))
<script>
    document.addEventListener('DOMContentLoaded', function () {
        Swal.fire({
            title: '{{ session("color") === "success" ? "Success!" : "Error!" }}',
            text: '{{ session("message") }}',
            icon: '{{ session("color") === "success" ? "success" : "error" }}',
            confirmButtonText: 'OK'
        });
    });
</script>
@endif

@section('content')
<div class="container mt-4">
    <div class="row">
        <div class="col-lg-8 order-lg-2">
            <div class="row justify-content-center">
                @foreach($products as $product)
                <div class="col-md-6 col-lg-4 product-card">
                    <div class="product-image">
                        <img src="{{ asset('storage/images/'.$product->image) }}" alt="{{ $product['name'] }}">
                    </div>
                    @php
                        $encrypted = Crypt::encryptString($product->id);
                    @endphp
                    <div class="product-name">{{ $product['name'] }}</div>
                    <div class="product-price">₱{{ $product['price'] }}</div>
                    <button type="button" class="buy-button w-100" data-id="{{ $encrypted }}">Buy Now</button>
                    <form id="buy-form-{{ $encrypted }}" action="{{ route('order.buy') }}" method="POST" style="display: none;">
                        @csrf
                        @method('post')
                        <input type="hidden" name="id" value="{{ $encrypted }}">
                        <input type="hidden" name="qty" id="qty-{{ $encrypted }}" value="">
                    </form>
                </div>
                @endforeach
            </div>
        </div>
        <div class="col-lg-4 order-lg-1">
            <div class="recent-orders">
                <h4>Recent Orders</h4>
                <div class="row">
                    @foreach($mypurchase as $purchase)
                    <div class="col-12 order-card">
                        <h5 class="mb-2 text-capitalize">{{ $purchase->food }}</h5>
                        <h6 class="mb-1">Quantity: <span class="text-info">{{ $purchase->quantity }}</span></h6>
                        <h6 class="mb-1">Price: <span class="text-info">₱{{ $purchase->price }}</span></h6>
                        <h6 class="mb-1">Total: <span class="text-info">₱{{ $purchase->total }}</span></h6>
                        <h6 class="mb-1 text-capitalize">Status: <span class="text-info">{{ $purchase->status }}</span></h6>
                        <h6 class="mb-1">Order Date: <span class="text-info">{{ $purchase->date_purchased }}</span></h6>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('vendor-script')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const buyButtons = document.querySelectorAll('.buy-button');
        buyButtons.forEach(button => {
            button.addEventListener('click', function() {
                const productId = this.getAttribute('data-id');
                Swal.fire({
                    title: 'Enter Quantity',
                    input: 'number',
                    inputAttributes: {
                        min: 1
                    },
                    showCancelButton: true,
                    confirmButtonText: 'Buy',
                    cancelButtonText: 'Cancel',
                    reverseButtons: true, // Swap the buttons
                    preConfirm: (qty) => {
                        return new Promise((resolve, reject) => {
                            if (!qty || qty <= 0) {
                                Swal.showValidationMessage('Please enter a valid quantity');
                                resolve(false);
                            } else {
                                resolve(qty);
                            }
                        });
                    }
                }).then((result) => {
                    if (result.isConfirmed && result.value) {
                        const qty = result.value;
                        Swal.fire({
                            title: 'Confirm Purchase',
                            text: `You are about to buy ${qty} of this product.`,
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonText: 'Yes',
                            cancelButtonText: 'No',
                            reverseButtons: true // Swap the buttons
                        }).then((confirmResult) => {
                            if (confirmResult.isConfirmed) {
                                document.getElementById('qty-' + productId).value = qty;
                                document.getElementById('buy-form-' + productId).submit();
                            }
                        });
                    }
                });
            });
        });
    });
</script>
@endsection