// Copyright (c) 2023, Connect 4 Systems and contributors
// For license information, please see license.txt

frappe.ui.form.on('Rent', {
    refresh: function(frm) {
        initialize_slider(frm);
        if (frm.doc.item_group) {
            load_items(frm, frm.doc.item_group);
        }

// اﻻريد الاستغناء عن الازرار التي في البطائق داخل السلايدرات وان تقوم بعملها عند الظغط على الصوره

    },
    item_group: function(frm) {
        load_items(frm,frm.doc.item_group); // Load items based on the selected item group
    }
});

frappe.ui.form.on("Rent", {
    refresh: function(frm, cdt, cdn) {
        if (frm.doc.docstatus == 1) {
            frm.add_custom_button(__("Sales Invoice"), function() {
                frappe.route_options = {
                    "rent": frm.doc.name,
                    "customer": frm.doc.customer,
                    "branch": frm.doc.branch,
                    "cost_center": frm.doc.cost_center,
                    "from_warehouse": frm.doc.target_warehouse,
                    "to_warehouse": frm.doc.source_warehouse,
                    "selling_price_list": "Daily"
                };
                frappe.new_doc("Sales Invoice");
            }, __("Create"));
        }
    }
});

frappe.ui.form.on("Rent", {
    refresh: function(frm, cdt, cdn) {
        if (frm.doc.docstatus == 1) {
            frm.add_custom_button(__("Payment Entry"), function() {
                frappe.route_options = {
                    "payment_type": "Receive",
                    "party_type": "Customer",
                    "party": frm.doc.customer,
                };
                frappe.new_doc("Payment Entry");
            }, __("Create"));
        }
    }
});

frappe.ui.form.on("Rent", "validate", function() {
    for (var i = 0; i < cur_frm.doc.time_logs.length; i++) {
        cur_frm.doc.time_logs[i].uom = cur_frm.doc.rent_type;
    }
    cur_frm.refresh_field('time_logs');
});

frappe.ui.form.on("Rent Detail", "rate", function(frm, doctype, name) {
    let row = locals[doctype][name];
    row.amount = row.rate * row.qty; 
    refresh_field("time_logs");
});

frappe.ui.form.on("Rent", "validate", function(frm, cdt, cdn) {
    $.each(frm.doc.time_logs || [], function(i, d) {
        d.source_warehouse = frm.doc.source_warehouse;
    });
    cur_frm.refresh_field('time_logs');
});

// Removed the following validate function because it's making asynchronous calls within a validate event, 
// which can lead to inconsistent data.  It's better to handle this logic in a different way or at a different time.
/*frappe.ui.form.on("Rent", "validate", function(frm, cdt, cdn) {
    $.each(frm.doc.time_logs || [], function(i, d) {
        frappe.call({
            'method': 'frappe.client.get_value',
            'args': {
                'doctype': 'Bin',
                'fieldname': 'actual_qty',
                'filters': {
                    'item_code': d.item_code,
                    "warehouse": cur_frm.doc.source_warehouse
                }
            },
            callback: function(r) {
                d.actual_qty = r.message.actual_qty;
            }
        });
    });
});*/

// Modified the following 'item_code' event to correctly update the rate field in the 'Rent Detail' table.
frappe.ui.form.on("Rent Detail", "item_code", function(frm, cdt, cdn) {
    const row = locals[cdt][cdn]; // Get current row
    const priceList = cur_frm.doc.rent_type == "Daily" ? "Daily" : "Monthly";

    if (row.item_code) {
        frappe.call({
            'method': 'frappe.client.get_value',
            'args': {
                'doctype': 'Item Price',
                'fieldname': 'price_list_rate',
                'filters': {
                    'item_code': row.item_code,
                    "price_list": priceList
                }
            },
            callback: function(r) {
                if (r.message) {
                    frappe.model.set_value(cdt, cdn, 'rate', r.message.price_list_rate); // Set the rate
                    frappe.model.set_value(cdt, cdn, 'amount', r.message.price_list_rate * row.qty); // Calculate and set amount
                } else {
                    frappe.model.set_value(cdt, cdn, 'rate', 0); // Set rate to 0 if no price found
                    frappe.model.set_value(cdt, cdn, 'amount', 0); // Set amount to 0 if no price found
                }
                cur_frm.refresh_field('time_logs');
            }
        });
    }
});

//----------------------------------------------------------------------------------
// سلايدر مجموعات الأصناف
//----------------------------------------------------------------------------------

function initialize_slider(frm) {
    let html_field = frm.get_field('item_group_html');
    if (!html_field || html_field.slider_initialized) return;

    html_field.slider_initialized = true;

    if (!html_field.$wrapper.find('.swiper-container').length) {
        html_field.$wrapper.html(`
            <div class="swiper-container">
                <div class="swiper-wrapper" id="item_group-container"></div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-pagination"></div>
            </div>
        `);
    }

    load_item_group(frm);
}

function load_item_group(frm) {
    frappe.call({
        doc: frm.doc,
        method: "get_item_group",
        callback: function(r) {
            if (r.message) {
                const container = frm.get_field('item_group_html').$wrapper.find('#item_group-container');
                container.empty();

                if (frm.doc.docstatus === 1) {
                    const selected_item_group = frm.doc.item_group;
                    if (!selected_item_group) {
                        container.html("<p>لم يتم اختيار مجموعة الاصناف.</p>");
                        return;
                    }

                    frappe.call({
                        doc: frm.doc,
                        method: "get_item_group_details",
                        args: {
                            item_group: selected_item_group
                        },
                        callback: function(res) {
                            if (res.message) {
                                let ig = res.message;
                                let image_src = ig.image ? frappe.utils.get_file_link(ig.image) : '/assets/your_app/images/default.png';

                                const slide = `
                                    <div class="swiper-slide">
                                        <div class="card">
                                            <img src="${image_src}" class="card-img-top fixed-image select_item_group_image" data-item_group="${ig.name}" alt="${ig.name}" style="width: 100%; object-fit: contain; cursor: pointer;">
                                            <div class="card-body">
                                                <h5 class="card-title">${ig.name}</h5>

                                            </div>
                                        </div>
                                    </div>
                                `;
                                container.append(slide);
                                initialize_swiper(frm, true);
                            } else {
                                container.html("<p>مجموعة الاصناف المختارة غير موجودة.</p>");
                            }
                        }
                    });
                } else {
                    if (r.message.length === 0) {
                        container.html("<p>لا توجد مجموعة اصناف متاحة.</p>");
                        return;
                    }

                    r.message.forEach(ig => {
                        let image_src = ig.image ? frappe.utils.get_file_link(ig.image) : '/assets/your_app/images/default.png';

                        const slide = `
                            <div class="swiper-slide">
                                <div class="card">
                                    <img src="${image_src}" class="card-img-top fixed-image select_item_group_image" data-item_group="${ig.name}" alt="${ig.name}" style="width: 100%; object-fit: contain; cursor: pointer;">
                                    <div class="card-body">
                                        <h5 class="card-title">${ig.name}</h5>

                                    </div>
                                </div>
                            </div>
                        `;
                        container.append(slide);
                    });

                    initialize_swiper(frm, false);
                }
            } else {
                frappe.msgprint(__("لم يتم العثور على مجموعة الاصناف لعرضها."));
            }
        }
    });
}

function initialize_swiper(frm, read_only) {
    const html_field = frm.get_field('item_group_html');
    let swiperElement = html_field.$wrapper.find('.swiper-container')[0];

    if (html_field.swiper_instance) {
        html_field.swiper_instance.destroy(true, true);
    }

    html_field.swiper_instance = new Swiper(swiperElement, {
        slidesPerView: 5,
        spaceBetween: 10,
        loop: !read_only,
        pagination: {
            el: html_field.$wrapper.find('.swiper-pagination')[0],
            clickable: true,
        },
        navigation: {
            nextEl: html_field.$wrapper.find('.swiper-button-next')[0],
            prevEl: html_field.$wrapper.find('.swiper-button-prev')[0],
            enabled: !read_only
        },
        keyboard: {
            enabled: !read_only,
            onlyInViewport: true,
        },
        mousewheel: {
            invert: false,
            enabled: !read_only,
        },
        // width: html_field.$wrapper.find('.swiper-container').width(),
        breakpoints: {
                320: {
                    slidesPerView: 2,
                    spaceBetween: 5
                },
                480: {
                    slidesPerView: 3,
                    spaceBetween: 5
                },
                640: {
                    slidesPerView: 4,
                    spaceBetween: 10
                },
                768: {       /* added this breakpoint  */
                    slidesPerView: 3,  /* adjusted the number of cards */
                    spaceBetween: 5
                },
                992: {
                    slidesPerView: 5,
                    spaceBetween: 10
                }
        }
    });
    html_field.$wrapper.find('.select_item_group_image').on('click', function() {
        const itemGroupName = $(this).data('item_group');
        if (itemGroupName) {
            frm.set_value('item_group', itemGroupName);

            frm.save().then(() => {
                frappe.msgprint(__("تم اختيار : " + itemGroupName + " وتم حفظ المستند بنجاح."));
                load_item_group(frm);
            }).catch(err => {
                console.error("خطأ في حفظ المستند: ", err);
                frappe.msgprint(__("حدث خطأ أثناء حفظ المستند."));
            });
        } else {
            console.error("لا يوجد قيمة لاسم مجموعة الأصناف");
        }
    });
    if (read_only) {
        html_field.$wrapper.find('.swiper-button-next, .swiper-button-prev').hide();
    } else {
        html_field.$wrapper.find('.selected_item_group').remove();
    }

    if (!document.getElementById('slider-styles')) {
        let style = document.createElement('style');
        style.id = 'slider-styles';
        style.innerHTML = `
            /* توحيد مقاسات البطاقات */
            .card {
                width: 100%;
                max-width: 180px; /*  Reduced Max Width */
                height: auto;        /*  Changed to auto */
                min-height: auto;   /*  Changed to auto */
                border: 1px solid #E0E0E0;
                border-radius: 8px;
                overflow: hidden;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); /*  Subtle Box Shadow */
                transition: transform 0.2s, box-shadow 0.2s;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                background-color: #fff; /* Use a solid background */
            }

            .card:hover {
                transform: translateY(-2px); /*  Reduced Hover Lift */
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /*  Reduced Hover Shadow */
            }

            .card img.fixed-image {
                width: 100%;
                height: 90px;        /* Reduced height */
                object-fit: contain; /* Modified to contain */
                border-bottom: 1px solid #E0E0E0; /* Add a subtle border below image */
                object-position: center; /* Optional: center the image if it doesn't fill the space */
            }

            .card-body {
                padding: 6px;           /* More Reduced Padding */
                display: flex;
                flex-direction: column;
                justify-content: flex-start; /* Changed to flex-start */
                text-align: center;
                height: auto; /* Adjust height automatically */
            }

            .card-title {
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern font */
                font-size: 0.8rem;     /*  Even more reduced font size */
                color: #333;
                margin-bottom: 2px;     /* Even more Reduced Margin */
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .card-text {
                font-size: 0.75rem;
                color: #666;
                flex-grow: 1;
            }

            .selected_item_group {
                width: 80%;
                margin-top: 8px;
                background-color: #7E546F; /* A more modern green */
                color: white;
                border: none;
                border-radius: 4px;
                padding: 8px 12px;
                transition: background-color 0.3s;
                font-weight: 500;
                cursor: pointer;
                font-size: 0.9rem;
                outline: none;
            }

            .selected_item_group:hover {
                background-color: #388E3C;
            }

            .swiper-container {
                width: 100%;
                overflow: hidden;
                padding-top: 5px;      /*  Reduced padding */
                padding-bottom: 5px;     /*  Reduced padding */
            }
			.swiper-pagination {
			  margin-top: 4px; /* Reduced spacing for pagination */
			}
            .swiper-slide {
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .swiper-button-next,
            .swiper-button-prev {
                color: #757575;
                border-radius: 50%;
                width: 30px;
                height: 30px;
                background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
                transition: all 0.3s;
            }

            .swiper-button-next:hover,
            .swiper-button-prev:hover {
                background-color: rgba(255, 255, 255, 1); /* Fully opaque on hover */
                color: #212121;
            }

            .swiper-pagination-bullet {
                background: #BDBDBD;
                opacity: 1;
            }

            .swiper-pagination-bullet-active {
                background: #424242;
            }

            /* Responsive adjustments using percentages */
            @media (max-width: 768px) {  /* At 768px or smaller  */
                .card {
                    max-width: 30%;
                    min-height: auto;
                }

                .card img.fixed-image {
                    height: 70px;
                }

                .card-title {
                    font-size: 0.7rem;  /* Smallest font size */
                }

                .selected_item_group {
                    font-size: 0.7rem;
                }
            }

            @media (max-width: 480px) {
                .card {
                    max-width: 45%;
                    min-height: auto;
                }

                .card img.fixed-image {
                    height: 60px;
                }

                .card-title {
                    font-size: 0.6rem;
                }

                .selected_item_group {
                    font-size: 0.6rem;
                }
            }
        `;
        document.head.appendChild(style);
    }
}

//----------------------------------------------------------------------------------
// سلايدر الأصناف
//----------------------------------------------------------------------------------

function load_items(frm, item_group) {
    if (!item_group) return;

    frappe.call({
        doc: frm.doc,
        method: "get_items",
        args: { item_group: item_group },
        callback: function(response) {
            const items = response.message;
            const container = frm.get_field('item_html').$wrapper;

            // إعداد بنية HTML للسلايدر
            container.html(`
                <div class="swiper-container">
                    <div class="swiper-wrapper" id="item-container"></div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-pagination"></div>
                </div>
            `);

            const itemContainer = container.find('#item-container');

            if (items && items.length) {
                items.forEach(function(item) {
                    const slide = `
                    <div class="swiper-slide">
                        <div class="card">
                            <img src="${item.image || '/assets/your_app/images/default.png'}" class="card-img-top fixed-image select_item_image" data-item_code="${item.name}" alt="${item.item_name}" style="width: 100%; object-fit: contain; cursor: pointer;">
                            <div class="card-body">
                                <h5 class="card-title">${item.item_name}</h5>

                            </div>
                        </div>
                    </div>
                `;
                    itemContainer.append(slide);
                });

                // تهيئة سلايدر العناصر
                initialize_item_slider(frm ,container);
            } else {
                itemContainer.html("<p>لا توجد عناصر مرتبطة بمجموعة الأصناف المختارة.</p>");
            }
        },
        error: function(error) {
            console.error("Error loading items: ", error);
            frm.get_field('item_html').$wrapper.html("<p>حدث خطأ أثناء جلب العناصر.</p>");
        }
    });
}
// تهيئة سلايدر العناصر
function initialize_item_slider(frm, container) {
    const swiperContainer = container.find('.swiper-container')[0];

    const swiper = new Swiper(swiperContainer, {
        slidesPerView: 5,
        spaceBetween: 10,
        loop: false,
        pagination: {
            el: container.find('.swiper-pagination')[0],
            clickable: true,
        },
        navigation: {
            nextEl: container.find('.swiper-button-next')[0],
            prevEl: container.find('.swiper-button-prev')[0],
            breakpoints: {
                // when window width is >= 320px
                320: {
                    slidesPerView: 2,
                    spaceBetween: 5
                },
                // when window width is >= 480px
                480: {
                    slidesPerView: 3,
                    spaceBetween: 5
                },
                // when window width is >= 640px
                640: {
                    slidesPerView: 4,
                    spaceBetween: 10
                },
                // when window width is >= 992px
                992: {
                    slidesPerView: 5,
                    spaceBetween: 10
                }
            }
        },
        navigation: {
            nextEl: container.find('.swiper-button-next')[0],
            prevEl: container.find('.swiper-button-prev')[0],
        }
    });
    container.find('.select_item_image').on('click', (function(current_frm) { // Create a closure
        return function() {
            const itemCode = $(this).data('item_code');

            if (itemCode) {
                add_item_to_table(current_frm, itemCode); // Use the captured 'current_frm'
            }
        };
    })(frm));

    container.find('.select_item').remove();
}

//----------------------------------------------------------------------------------
// Add item to sub-table
//----------------------------------------------------------------------------------

function add_item_to_table(frm, item_code) {
    const priceList = frm.doc.rent_type === "Daily" ? "Daily" : "Monthly";
    frappe.call({
        method: 'frappe.client.get',
        args: {
            doctype: 'Item',
            name: item_code
        },
        callback: function(item_response) {
            const item_details = item_response.message;

            if (item_details) {
                frappe.call({
                    method: 'frappe.client.get_value',
                    args: {
                        doctype: 'Item Price',
                        filters: {
                            item_code: item_details.name,
                            price_list: priceList
                        },
                        fieldname: 'price_list_rate'
                    },
                    callback: function(price_response) {
                        const price = price_response.message ? price_response.message.price_list_rate : 0;

                        let item_found = false;
                        let row_name = null;

                        // Search for existing item in the table and store the row name if found
                        for (let i = 0; i < frm.doc.time_logs.length; i++) {  // Use a for loop for better control
                            const log = frm.doc.time_logs[i];
                            if (log.item_code === item_details.name) {
                                item_found = true;
                                row_name = log.name;
                                break; // Exit loop once found
                            }
                        }

                        if (item_found && row_name) {
                            // Get the existing row by name to update it
                            const current_qty = frappe.model.get_value('Rent Detail', row_name, 'qty');
                            const new_qty = current_qty + 1;

                            frappe.model.set_value(
                                'Rent Detail', row_name, 'qty', new_qty
                            );

                            frappe.model.set_value(
                                'Rent Detail', row_name, 'amount', new_qty * price
                            );
                        } else {
                            // Add a new row if the item is not found
                            const new_row = frm.add_child('time_logs');
                            new_row.item_code = item_details.name;
                            new_row.item_name = item_details.item_name;
                            new_row.rate = price;
                            new_row.qty = 1;
                            new_row.amount = new_row.qty * new_row.rate;
                        }

                        // Refresh the field to show updated data
                        frm.refresh_field('time_logs');

                        // Save the form
                        frm.save_or_update().then(() => {
                            frappe.msgprint(__('تم حفظ التغييرات بنجاح.'));
                        }).catch(err => {
                            frappe.msgprint(__('حدث خطأ أثناء حفظ التغييرات.'));
                        });
                    },
                    error: function(err) {
                        console.error("Error fetching item price: ", err);
                        frappe.msgprint(__('Could not fetch item price.'));
                    }
                });
            } else {
                frappe.msgprint(__('Item not found or invalid item code.'));
            }
        },
        error: function(err) {
            console.error("Error fetching item details: ", err);
            frappe.msgprint(__('Could not fetch item details.'));
        }
    });
}