@extends('website.layouts.app')
@section('content')
    <section id="breadcrumb">
        <div class="container-fluid fixedwidth">
            <div class="row d-flex justify-content-lg-center justify-content-md-center align-item-center">
                <div class="col-xl-10 col-lg-11 col-md-11 col-12">
                    <nav aria-label="breadcrumb" style="position: relative; z-index:1;">
                        <ol class="breadcrumb mt-lg-3 pt-4 pt-lg-0">
                            <li class="breadcrumb-item">
                                <a href="{{ route('website.home') }}">
                                    @if (session('app_language', 'en') == 'en')
                                        Home
                                    @else
                                        بيت
                                    @endif
                                </a>
                            </li>
                            <li class="breadcrumb-item active">
                                <a href="{{ route('website.gift.card') }}">
                                    @if (session('app_language', 'en') == 'en')
                                        Gift Cards
                                    @else
                                        بطاقات الهدايا
                                    @endif
                                </a>
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </section>


    <section id="gift-detail">
        <div class="container-fluid mt-lg-2 mb-lg-5 my-2 fixedwidth">
            <div class="row d-flex justify-content-center align-items-center">
                <div class="col-xl-10 col-lg-11 col-md-11 col-12">
                    <div class="row gy-2 d-flex justify-content-center align-items-start g-lg-5">
                        <div class="col-lg-6 col-md-6 col-12">
                            <div class="display-img">
                                <div class="top-title text-center d-flex justify-content-between align-items-center">
                                    <h3 class=" text-start mb-0">
                                        {{ session('app_language', 'en') == 'en' ? $preference->gift_card_title_en : $preference->gift_card_title_ar }}
                                    </h3>
                                </div>
                                <img src="{{ asset('uploads/preferences/' . $preference->gift_card_image) }}"
                                    alt="Gift Card Image" class="img-fluid gift-image w-100">

                            </div>

                        </div>
                        <div class="col-lg-6 col-md-6 col-12 pt-lg-5 pt-md-5">
                            <div class="top-title text-center d-flex justify-content-between align-items-center">
                                <h3 class="text-start mb-0">
                                    {{ session('app_language', 'en') == 'en' ? $preference->gift_card_title_en : $preference->gift_card_title_ar }}
                                </h3>

                                {{-- <a href="#"><i class="far fa-heart"></i></a> --}}
                                {{-- <a href="javascript:void(0)" class="add-to-wishlist-btn" data-id="001"><i
                                        class="bi bi-suit-heart"></i></a> --}}
                            </div>
                            <div class="price-heart">
                                <h4 class="actual-price">
                                    @if (session('app_language', 'en') == 'en')
                                        {{ display_price($preference->gift_card_ammount1) }} -
                                        {{ display_price($preference->gift_card_ammount4) }}
                                    @else
                                        {{ display_price($preference->gift_card_ammount1, false) }}
                                        {{ getCurrentCurrency()?->code }}
                                        -
                                        {{ display_price($preference->gift_card_ammount4, false) }}
                                        {{ getCurrentCurrency()?->code }}
                                    @endif
                                </h4>

                                <p>
                                    {{ session('app_language', 'en') == 'en' ? $preference->gift_card_des_en : $preference->gift_card_des_ar }}
                                </p>

                                <h4 class="amount">
                                    @if (session('app_language', 'en') == 'en')
                                        Amount
                                    @else
                                        كمية
                                    @endif
                                </h4>
                            </div>
                            <form action="{{ route('giftcard.buy') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                @php
                                    $amounts = [
                                        $preference->gift_card_ammount1,
                                        $preference->gift_card_ammount2,
                                        $preference->gift_card_ammount3,
                                        $preference->gift_card_ammount4,
                                    ];
                                @endphp
                                <input type="hidden" name="selected_amount" id="selected_amount" value="">
                                <input type="hidden" name="gift_name" id="gift_name"
                                    value="{{ $preference->gift_card_title_en }}">
                                {{-- <div class="row d-flex justify-content-between align-items-center">
                                    @foreach ($amounts as $index => $amount)
                                        @if ($amount)
                                            @php
                                                $inputId = 'gift-amount-' . $index;
                                            @endphp
                                            <div class="col-lg-3 col-md-3 col-3 mb-3 pe-0 text-center">
                                                <input type="radio" class="btn-check" name="gift_amount"
                                                    id="{{ $inputId }}" autocomplete="off"
                                                    value="{{ $amount }}">
                                                <label class="btn btn-outline-primary agcbtn w-100"
                                                    for="{{ $inputId }}">
                                                    {{ display_price($amount) }}
                                                </label>
                                            </div>
                                        @endif
                                    @endforeach
                                    <p class="text-danger"></p>
                                </div> --}}
                                <div class="row d-flex justify-content-between align-items-center">
                                    @foreach ($amounts as $index => $amount)
                                        @if ($amount)
                                            @php
                                                $inputId = 'gift-amount-' . $index;
                                            @endphp
                                            <div class="col-lg-3 col-md-3 col-3 mb-3 pe-0 text-center">
                                                <input type="radio" class="btn-check" name="gift_amount"
                                                    id="{{ $inputId }}" autocomplete="off"
                                                    value="{{ $amount }}" {{ $loop->first ? 'required' : '' }}>
                                                <label class="btn btn-outline-primary agcbtn w-100"
                                                    for="{{ $inputId }}">
                                                    {{ display_price($amount) }}
                                                </label>
                                            </div>
                                        @endif
                                    @endforeach
                                    <p class="text-danger" id="selected_amount_error"></p>
                                </div>

                                <input type="hidden" name="product_id" value="{{ $preference->id }}">
                                <input type="hidden" name="product_name"
                                    value="{{ session('app_language', 'en') == 'en' ? $preference->gift_card_title_en : $preference->gift_card_title_ar }}">
                                <div id="form-display">
                                    <div class="row">
                                        <div class="col-lg-12 mb-3">
                                            <label class="form-label">
                                                @if (session('app_language', 'en') == 'en')
                                                    Recipient Email
                                                @else
                                                    البريد الإلكتروني للمستلم
                                                @endif <span class="text-danger">*</span>
                                            </label>
                                            <input type="email" name="recipient_email" id="recipient_email"
                                                class="form-control" placeholder="">
                                            {{-- <p id="recipient_email_error" class="text-danger mt-1 mb-0"
                                                style="display:none;"></p> --}}
                                            <p class="text-danger"></p>
                                        </div>
                                        @php
                                            $today = \Carbon\Carbon::today()->format('Y-m-d');
                                        @endphp

                                        <div class="col-lg-12 mb-3">
                                            <label class="form-label">
                                                @if (session('app_language', 'en') == 'en')
                                                    Choose a delivery date
                                                @else
                                                    اختر تاريخ التسليم
                                                @endif
                                            </label>
                                            <input type="date" name="delivery_date" id="delivery_date"
                                                class="form-control" min="{{ $today }}"
                                                onfocus="this.showPicker ? this.showPicker() : null"> {{-- Ensures calendar opens in supported browsers --}}
                                            <p class="text-danger"></p>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-6 mb-3">
                                            <label class="form-label">
                                                @if (session('app_language', 'en') == 'en')
                                                    Recipient Name
                                                @else
                                                    اسم المستلم
                                                @endif <span class="text-danger">*</span>
                                            </label>
                                            <input type="text" name="recipient_name" id="recipient_name"
                                                class="form-control"
                                                placeholder="{{ session('app_language', 'en') == 'en' ? 'Recipient Name ' : 'اسم المستلم' }}">
                                            <p class="text-danger"></p>
                                        </div>
                                        <div class="col-lg-6 mb-3">
                                            <label class="form-label">
                                                @if (session('app_language', 'en') == 'en')
                                                    Sender Name
                                                @else
                                                    اسم المرسل
                                                @endif
                                                <span class="text-danger">
                                                    *</span>
                                            </label>
                                            <input type="text" name="sender_name" id="sender_name" class="form-control"
                                                placeholder="{{ session('app_language', 'en') == 'en' ? 'Sender Name' : ' اسم المرسل' }}">
                                            <p class="text-danger"></p>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">
                                            @if (session('app_language', 'en') == 'en')
                                                Gift Message
                                            @else
                                                رسالة الهدية
                                            @endif
                                        </label>
                                        <textarea name="gift_message" id="gift_message" class="form-control" rows="5"
                                            placeholder="{{ session('app_language', 'en') == 'en' ? 'Gift Message' : ' رسالة الهدية' }}"></textarea>
                                    </div>
                                    <div class="upload-section my-4">
                                        {{-- <label class="form-label fw-bold">
                                            @if (session('app_language', 'en') == 'en')
                                                Here you can add music link
                                            @else
                                                هنا يمكنك إضافة رابط الموسيقى
                                            @endif
                                        </label>
                                        <p class="text-muted">
                                            @if (session('app_language', 'en') == 'en')
                                                You can add music - your favorite song - picture
                                            @else
                                                يمكنك إضافة موسيقى - أغنيتك المفضلة - صورة
                                            @endif
                                        </p> --}}
                                        <label class="form-label fw-bold">
                                            @if (session('app_language', 'en') == 'en')
                                                Here you can add a photo or music link.
                                            @else
                                                هنا يمكنك إضافة رابط صورة أو موسيقى.
                                            @endif
                                        </label>
                                        <p class="text-muted mb-1">
                                            @if (session('app_language', 'en') == 'en')
                                                You can add your favorite image or song.
                                            @else
                                                يمكنك إضافة صورتك أو أغنيتك المفضلة.
                                            @endif
                                        </p>
                                        <input type="file" id="file" class="form-control">
                                    </div>
                                </div>
                                <div class="mb-3 g-count-btn row d-flex justify-content-between align-items-center gy-3">
                                    <div class="col-lg-4 col-md-4">
                                        <input type="number" name="quantity" id="quantity"
                                            class="form-control count rounded-3" min="1" value="1">
                                    </div>
                                    <div class="col-lg-4 col-md-4">
                                        <div class="cart_button ">
                                            <a href="javascript:void(0)" class="add-to-cart-btn py-0" data-id="001">
                                                @if (session('app_language', 'en') == 'en')
                                                    Add to cart
                                                @else
                                                    أضف إلى السلة
                                                @endif
                                            </a>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-4">
                                        <div class="buy_button">
                                            <a href="javascript:void(0)" class="buy-now-btn py-0" data-id="001">
                                                @if (session('app_language', 'en') == 'en')
                                                    Buy Now
                                                @else
                                                    اشتري الآن
                                                @endif
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        </div>
    </section>
@endsection

@section('scriptJs')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Handle clicking on amount buttons
            document.querySelectorAll('.select-amount-btn').forEach(function(button) {
                button.addEventListener('click', function() {
                    const selectedAmount = this.getAttribute('data-amount');
                    document.getElementById('selected_amount').value = selectedAmount;

                    // Optional: Highlight selected button
                    document.querySelectorAll('.select-amount-btn').forEach(btn => btn.classList
                        .remove('selected'));
                    this.classList.add('selected');
                });
            });

            // Validate selected amount before form submission
            const form = document.querySelector('form');
            if (form) {
                form.addEventListener('submit', function(e) {
                    let amount = document.getElementById('selected_amount').value;
                    if (!amount) {
                        e.preventDefault();
                        alert('Please select a gift amount.');
                    }
                });
            }
        });

        $(document).on('click', '.add-to-cart-btn', function() {
            var id = $(this).data('id');

            // Get input values
            var recipientName = $('#recipient_name').val();
            var recipientEmail = $('#recipient_email').val();
            var deliveryDate = $('#delivery_date').val();
            var giftName = $("#gift_name").val();
            var senderName = $('#sender_name').val();
            var giftSrc = $('.gift-image').attr('src');
            var personalMessage = $('#gift_message').val();
            var quantity = $('#quantity').val();
            var amount = $('#selected_amount').val();
            var fileInput = $('#file')[0];

            // Clear previous error messages
            $('#gift_amount_error',
                    '#recipient_name_error, #recipient_email_error, #delivery_date_error, #sender_name_error, #quantity_error, #selected_amount_error'
                )
                .text('').hide();

            // Create FormData
            var formData = new FormData();
            formData.append('id', id);
            formData.append('recipient_name', recipientName);
            formData.append('recipient_email', recipientEmail);
            formData.append('delivery_date', deliveryDate);
            formData.append('gift_src', giftSrc);
            formData.append('gift_name', giftName);
            formData.append('sender_name', senderName);
            formData.append('personal_message', personalMessage);
            formData.append('amount', amount);
            formData.append('quantity', quantity);

            if (fileInput && fileInput.files.length > 0) {
                formData.append('file', fileInput.files[0]);
            }

            // Send AJAX request
            $.ajax({
                url: '/add-to-cart-gift',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.status === true) {
                        toastr.success(response.message, "Success");
                        setTimeout(() => {
                            window.location.reload();
                        }, 1000);
                    } else {
                        let errors = response['errors'];
                        $("button[type=submit]").prop('disabled', false);
                        $(".error").removeClass('invalid-feedback').html('');
                        $("input, select").removeClass('is-invalid');
                        $.each(errors, function(key, value) {
                            $(`#${key}`).addClass('is-invalid')
                                .siblings('p')
                                .addClass('invalid-feedback')
                                .html(value);
                        });
                        if (response.errors.amount) {
                            $('#selected_amount_error').text(response.errors.amount[0]).show();
                        } else {
                            $('#selected_amount_error').hide();
                        }
                        toastr.error(response.message, "Required");
                    }
                },
                error: function() {
                    toastr.error("Please Try Again...", "Error");
                }
            });
        });

        $(document).on('click', '.buy-now-btn', function() {
            var id = $(this).data('id');

            // Get input values
            var recipientName = $('#recipient_name').val();
            var recipientEmail = $('#recipient_email').val();
            var deliveryDate = $('#delivery_date').val();
            var giftName = $("#gift_name").val();
            var senderName = $('#sender_name').val();
            var personalMessage = $('#gift_message').val();
            var quantity = $('#quantity').val();
            var amount = $('#selected_amount').val();
            var fileInput = $('#file')[0]; // Get the file input element

            // Create FormData object
            var formData = new FormData();
            formData.append('id', id);
            formData.append('recipient_name', recipientName);
            formData.append('recipient_email', recipientEmail);
            formData.append('delivery_date', deliveryDate);
            formData.append('gift_name', giftName);
            formData.append('sender_name', senderName);
            formData.append('personal_message', personalMessage);
            formData.append('amount', amount);
            formData.append('quantity', quantity);

            // Check if a file is selected and append it
            if (fileInput && fileInput.files.length > 0) {
                formData.append('file', fileInput.files[0]);
            }

            // AJAX request
            $.ajax({
                url: '/add-to-cart-gift', // Your endpoint URL
                type: 'POST',
                data: formData,
                processData: false, // Important for file upload
                contentType: false, // Important for file upload
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr(
                        'content') // For Laravel CSRF protection
                },
                success: function(response) {
                    if (response.status === true) {
                        // toastr.success(response.message, "Success");

                        // setTimeout(() => {
                        //     window.location.reload();
                        // }, 1000);
                        setTimeout(() => {
                            // window.location.reload();
                            window.location.href = '/account/checkout';
                        }, 1000);
                    } else {
                        let errors = response['errors'];
                        $("button[type=submit]").prop('disabled', false);
                        $(".error").removeClass('invalid-feedback').html('');
                        $("input, select").removeClass('is-invalid');
                        $.each(errors, function(key, value) {
                            $(`#${key}`).addClass('is-invalid')
                                .siblings('p')
                                .addClass('invalid-feedback')
                                .html(value);
                        });
                        if (response.errors.amount) {
                            $('#selected_amount_error').text(response.errors.amount[0]).show();
                        } else {
                            $('#selected_amount_error').hide();
                        }
                        toastr.error(response.message, "Required");
                    }
                },
                error: function(jqXHR, exception) {
                    toastr.error("Please Try Again...", "Error");
                }
            });
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Sync selected value to hidden field
            const radioButtons = document.querySelectorAll('input[name="gift_amount"]');
            const selectedInput = document.getElementById('selected_amount');
            radioButtons.forEach(function(radio) {
                radio.addEventListener('change', function() {
                    if (this.checked) {
                        selectedInput.value = this.value;
                    }
                });
            });
            // Validate before submit
            const form = document.querySelector('form');
            if (form) {
                form.addEventListener('submit', function(e) {
                    if (!selectedInput.value) {
                        e.preventDefault();
                        alert('Please select a gift amount.');
                    }
                });
            }
        });
    </script>



    <style>
        .select-amount-btn.selected {
            background-color: #0d6efd;
            color: #fff;
        }
    </style>
@endsection