myLists = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
]

def to_one_list(myLists):
    myList = []
    for _list in myLists:
        for l in _list:
            myList.append(l)

    return myList

print(to_one_list(myLists = myLists))

import React, { useState, useEffect, useRef } from 'react';
import { NavLink, useNavigate } from 'react-router-dom';

import NavList from '../NavList';
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
import { Chart, CategoryScale, LinearScale, LineController, PointElement, LineElement, Title } from 'chart.js/auto';
import { PersianNumber } from "persian-number-converter";
import FindingComponent from './finding_box'; 
import TableComponent from './table';

import LalezarFont from '../../../../fonts/Lalezar-Regular.ttf'; // Adjust the path accordingly
import Top1 from "../../../../assets/top1.png"
import Top2 from "../../../../assets/top2.png"
import Down1 from "../../../../assets/down1.png"
import Down2 from "../../../../assets/down2.png"


Chart.register(CategoryScale, LinearScale, LineController, PointElement, LineElement, Title); // Register necessary components


const englishToPersianNumber = (number) => {
  const persianDigits = '۰۱۲۳۴۵۶۷۸۹';
  return String(number).replace(/[0-9]/g, (match) => persianDigits[parseInt(match)]);
};

const FirstReport = () => {
  const [reportData, setReportData] = useState(null);
  const [editableData, setEditableData] = useState(null);
  const [isEditing, setIsEditing] = useState(false);
  const [editedData, setEditedData] = useState({});
  const [isLoading, setIsLoading] = useState(true);
  const [chartInstance, setChartInstance] = useState(null);
  const chartCanvasRef = useRef(null);
  const pieChart1CanvasRef = useRef(null);
  const pieChart2CanvasRef = useRef(null);
  const navigate = useNavigate(); // Use useNavigate hook



  useEffect(() => {
    fetchReportData();
  }, []);
  
  useEffect(() => {
    if (reportData) {
      createChart(); // Call createChart when reportData is available
    }
    
  }, [reportData]);

  


  const fetchReportData = async () => {
    try {
      const response = await fetch("http://188.121.99.245:8080/api/report/fake_data", {
       // headers: {
        //  Authorization: `Bearer ${localStorage.getItem('accessToken')}`
       // }
      });
      if (response.ok) {
        const data = await response.json();
        setReportData(data);
        setEditableData(data);
        setEditedData(data); // Initialize editedData with fetched data
      } else {
        console.error('Failed to fetch report data:', response.statusText);
      }
    } catch (error) {
      console.error('Error fetching report data:', error);
    } finally {
      setIsLoading(false); // Update loading state after fetching data
    }
  };



  const createChart = () => {
    const ctx = chartCanvasRef.current.getContext('2d');
    const persianLabels = reportData.Chart_1.x_axis_labels.map(label => englishToPersianNumber(label));
    const persianPerformanceData = reportData.Chart_1.data.map(item => englishToPersianNumber(item.performance));
    const persianBudgetData = reportData.Chart_1.data.map(item => englishToPersianNumber(item.premium_budget));
    const performanceDataEnglish = reportData.Chart_1.data.map(item => item.performance); // Keep data in English
    const BudgetDataEnglish = reportData.Chart_1.data.map(item => item.premium_budget); // Keep data in English

    console.log('Persian Labels:', persianLabels);
    console.log('Persian Performance Data:', persianPerformanceData);
    console.log('Persian Budget Data:', persianBudgetData);

    Chart.defaults.font.size = 20;
    Chart.defaults.font.family = "Lalezar"
    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: reportData.Chart_1.x_axis_labels,
        datasets: [
          {
            label: 'کارایی',
            data: performanceDataEnglish,
            backgroundColor: 'rgba(255, 99, 132, 0.5)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1
          },
          {
            label: 'بودجه ممتاز',
            data: BudgetDataEnglish,
            backgroundColor: 'rgba(54, 162, 235, 0.5)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
          }
        ]
      },
      options: {
        maintainAspectRatio: false,
        scales: {
          x: {
            type: 'category',

            font: {
              size: 25 // Larger font size for x-axis labels
            },
            
            grid: {
              display: false
            }
          },
          y: {
            type: 'linear',
            beginAtZero: true,
            ticks: {
              callback: function(value, index, values) {
                return englishToPersianNumber(value);
              },
              font: {
                size: 25 // Larger font size for y-axis ticks
              }
            }
          }
        },
        plugins: {
          tooltip: {
            callbacks: {
              label: function(context) {
                let label = context.dataset.label || '';
                if (label) {
                  label += ': ';
                }
                label += englishToPersianNumber(context.parsed.y);
                return label;
              }
            },
            title: {
              font: {
                size: 25 // Larger font size for tooltip title
              }
            },
            body: {
              font: {
                size: 25 // Larger font size for tooltip body
              }
            }
          },
          legend: {
            display: true,
            labels: {
              fontSize: 25 // Larger font size for legend labels
            },
            title: {
              font: {
                size: 25 // Larger font size for legend labels
              }
            }
          }
        },
        animation: {
          duration: 2000,
          easing: 'easeInOutQuart'
        },
        legend: {
          display: true,
          labels: {
            font: {
              size: 25 // Larger font size for legend labels
            }
          }
        }
      }
      
    });
    
    

    // Next, create the first pie chart
    const pieChart1Ctx = pieChart1CanvasRef.current.getContext('2d');
    const pieChart1 = new Chart(pieChart1Ctx, {
        type: 'pie',
        data: {
            labels: reportData.Chart_2.x_axis_labels,
            datasets: [{
                label: reportData.Chart_2.caption,
                data: reportData.Chart_2.data.map(item => item.value),
                backgroundColor:  [
                  '#FF5252', // Color for خودرو شخص ثالث
                  '#FFC352', // Color for عمر گروهی
                  '#EFFF52', // Color for آتش سوزی
                  '#89FF52', // Color for بدنه اتومبیل
                  '#52FFB8', // Color for باربری
                  '#52CDFF', // Color for درمان
                  '#5C52FF', // Color for حوادث
                  '#A352FF', // Color for مسئولیت
                  '#E552FF', // Color for مهندسی
                  '#FF52D0', // Color for سایر (کشتی)
                  '#52FF77', // Color for عمر و سرمایه گذاری
                 
              ],
                borderColor: 'rgba(255, 255, 255)',
                borderWidth: 1
            }]
        },
        options: {
            // Options for the first pie chart...
        }
    });

    // Finally, create the second pie chart
    const pieChart2Ctx = pieChart2CanvasRef.current.getContext('2d');
    const pieChart2 = new Chart(pieChart2Ctx, {
        type: 'pie',
        data: {
            labels: reportData.Chart_3.x_axis_labels,
            datasets: [{
                label: reportData.Chart_3.caption,
                data: reportData.Chart_3.data.map(item => item.value),
                backgroundColor: [
                  '#FF5252', // Color for خودرو شخص ثالث
                  '#FFC352', // Color for عمر گروهی
                  '#EFFF52', // Color for آتش سوزی
                  '#89FF52', // Color for بدنه اتومبیل
                  '#52FFB8', // Color for باربری
                  '#52CDFF', // Color for درمان
                  '#5C52FF', // Color for حوادث
                  '#A352FF', // Color for مسئولیت
                  '#E552FF', // Color for مهندسی
                  '#FF52D0', // Color for سایر (کشتی)
                  '#52FF77', // Color for عمر و سرمایه گذاری
                 
              ],
                borderWidth: 1
            }]
        },
        options: {
            // Options for the second pie chart...
        }
    });
};


  const handleEdit = () => {
    setIsEditing(true);
  };

  const handleSave = () => {
    setEditableData(editedData); // Update editableData with edited data
    setIsEditing(false);
  };

  const handleDownloadPDF = () => {
    const input = document.getElementById('reportContent');
    const pdf = new jsPDF('p', 'mm', 'a4');
    const pdfWidth = 210;
    const pdfHeight = 200;

    html2canvas(input, { scrollY: -window.scrollY }).then((canvas) => {
      const imgData = canvas.toDataURL('image/png');
      const imageHeight = (canvas.height * pdfWidth) / canvas.width;
  
      const Top1ImageUrl = Top1;
      const Top1ImageWidth = 210;
      const Top1ImageHeight = 100;
  
      const Top2ImageUrl = Top2;
      const Top2ImageWidth = 210;
      const Top2ImageHeight = 20;
  
      pdf.addImage(Top1ImageUrl, 'PNG', 0, 0, Top1ImageWidth, Top1ImageHeight, undefined, 'FAST');
  
      const down1ImageUrl = Down1;
      const down1Width = 210;
      const down1Height = 100;
  
      const down2ImageUrl = Down2;
      const down2Width = 210;
      const down2Height = 20;
  
      pdf.addImage(down1ImageUrl, 'PNG', 0, pdfHeight, down1Width, down1Height, undefined, 'FAST');
  
      const remainingHeight = pdfHeight - imageHeight;
  
      if (remainingHeight >= 0) {
        if (imageHeight > pdfHeight) {
          const ratio = pdfHeight / imageHeight;
          pdf.addImage(imgData, 'PNG', 0, 100, pdfWidth, 80, undefined, 'FAST');
        } else {
          pdf.addImage(imgData, 'PNG', 0, 100, pdfWidth, 80, undefined, 'FAST');
        }
      } else {
        pdf.addPage();
        pdf.addImage(imgData, 'PNG', 0,100, pdfWidth, 80, undefined, 'FAST');
      }
  
      pdf.addFileToVFS('Lalezar-Regular.ttf', LalezarFont);
      pdf.addFont('Lalezar-Regular.ttf', 'Lalezar', 'normal');
      pdf.setFont('Lalezar');
  
      const introHeader = document.querySelector('.new_page2 h4');
      if (introHeader) {
        const introHeaderPos = introHeader.getBoundingClientRect().top;
        if (introHeaderPos > pdfHeight) {
          pdf.addPage();
        }
      }
  
      // Render content for the second page
      const secondPageDiv = document.getElementById('page2');
      html2canvas(secondPageDiv, { scrollY: -window.scrollY }).then((secondCanvas) => {
        const secondDataUrl = secondCanvas.toDataURL('image/png');
        const secondImageHeight = (secondCanvas.height * pdfWidth) / secondCanvas.width;
        pdf.addPage();
        pdf.addImage(secondDataUrl, 'PNG', 0, 10, pdfWidth, secondImageHeight, undefined, 'FAST');
  
        // Render content for the third page
        if (reportData && reportData.personnel) {
          const thirdPageDiv = document.getElementById('page3');
          html2canvas(thirdPageDiv, { scrollY: -window.scrollY }).then((thirdCanvas) => {
            const thirdDataUrl = thirdCanvas.toDataURL('image/png');
            const thirdImageHeight = (thirdCanvas.height * pdfWidth) / thirdCanvas.width;
            pdf.addPage();
            pdf.addImage(thirdDataUrl, 'PNG', 0, 10, pdfWidth, 230, undefined, 'FAST');
  
            // Render content for the fourth page
            const fourthPageDiv = document.getElementById('page4');
            console.log("Fourth Page Div:", fourthPageDiv); // Debugging statement
            html2canvas(fourthPageDiv, { scrollY: -window.scrollY }).then((fourthCanvas) => {
              console.log("Fourth Canvas Dimensions:", fourthCanvas.width, fourthCanvas.height); // Debugging statement
              const fourthDataUrl = fourthCanvas.toDataURL('image/png');
              const fourthImageHeight = (fourthCanvas.height * pdfWidth) / fourthCanvas.width;
              console.log("fourthCanvas:", fourthCanvas); // Debugging statement
              pdf.addPage();
              pdf.addImage(fourthDataUrl, 'PNG', 3, 20, 190,200, undefined, 'FAST');
  

                // Add fifth page content
              const fifthPageDiv = document.getElementById('page5');
              html2canvas(fifthPageDiv, { scrollY: -window.scrollY }).then((fifthCanvas) => {
              const fifthDataUrl = fifthCanvas.toDataURL('image/png');
              const fifthImageHeight = (fifthCanvas.height * pdfWidth) / fifthCanvas.width;
          
              pdf.addPage();
              
              pdf.addImage(fifthDataUrl, 'PNG', 10, 20, 190, fifthImageHeight, undefined, 'FAST');
/*
            // Render content for the sixth page
            const sixthPageDiv = document.getElementById('page6');
            html2canvas(sixthPageDiv, { scrollY: -window.scrollY }).then((sixthCanvas) => {
              const sixthDataUrl = sixthCanvas.toDataURL('image/png');
              const sixthImageHeight = (sixthCanvas.height * pdfWidth) / sixthCanvas.width;
              pdf.addPage();
              pdf.addImage(sixthDataUrl, 'PNG', 10, 20, 190, sixthImageHeight, undefined, 'FAST');
            
            // Render content for the seventh page
            const seventhPageDiv = document.getElementById('page7');
            html2canvas(seventhPageDiv, { scrollY: -window.scrollY }).then((seventhCanvas) => {
              const seventhDataUrl = seventhCanvas.toDataURL('image/png');
              const seventhImageHeight = (seventhCanvas.height * pdfWidth) / seventhCanvas.width;
              pdf.addPage();
              pdf.addImage(seventhDataUrl, 'PNG', 10, 20, 190, seventhImageHeight, undefined, 'FAST');
           
           
              // Render content for the eighthpage
            const eighthPageDiv = document.getElementById('page8');
            html2canvas(eighthPageDiv, { scrollY: -window.scrollY }).then((eighthCanvas) => {
              const eighthDataUrl = eighthCanvas.toDataURL('image/png');
              const eighthImageHeight = (eighthCanvas.height * pdfWidth) / eighthCanvas.width;
              pdf.addPage();
              pdf.addImage(eighthDataUrl, 'PNG', 10, 20, 190, eighthImageHeight, undefined, 'FAST');
            
              
              const ninethPageDiv = document.getElementById('page9');
            html2canvas(ninethPageDiv, { scrollY: -window.scrollY }).then((ninethCanvas) => {
              const ninethDataUrl = ninethCanvas.toDataURL('image/png');
              const ninethImageHeight = (ninethCanvas.height * pdfWidth) / ninethCanvas.width;
              pdf.addPage();
              pdf.addImage(ninethDataUrl, 'PNG', 10, 20, 190, ninethImageHeight, undefined, 'FAST');
              

              const tenthPageDiv = document.getElementById('page10');
            html2canvas(tenthPageDiv, { scrollY: -window.scrollY }).then((tenthCanvas) => {
              const tenthDataUrl = tenthCanvas.toDataURL('image/png');
              const tenthImageHeight = (tenthCanvas.height * pdfWidth) / tenthCanvas.width;
              pdf.addPage();
              pdf.addImage(tenthDataUrl, 'PNG', 10, 20, 190, tenthImageHeight, undefined, 'FAST');
                
              const eleventhPageDiv = document.getElementById('page11');
            html2canvas(eleventhPageDiv, { scrollY: -window.scrollY }).then((eleventhCanvas) => {
              const eleventhDataUrl = eleventhCanvas.toDataURL('image/png');
              const eleventhImageHeight = (eleventhCanvas.height * pdfWidth) / eleventhCanvas.width;
              pdf.addPage();
              pdf.addImage(eleventhDataUrl, 'PNG', 10, 20, 190, eleventhImageHeight, undefined, 'FAST');

              const twelvethPageDiv = document.getElementById('page12');
            html2canvas(twelvethPageDiv, { scrollY: -window.scrollY }).then((twelvethCanvas) => {
              const twelvethDataUrl = twelvethCanvas.toDataURL('image/png');
              const twelvethImageHeight = (twelvethCanvas.height * pdfWidth) / twelvethCanvas.width;
              pdf.addPage();
              pdf.addImage(twelvethDataUrl, 'PNG', 10, 20, 190, twelvethImageHeight, undefined, 'FAST');

              */
              // Add image to the top of every page except the first one
              const totalPages = pdf.internal.getNumberOfPages();
              for (let i = 2; i <= totalPages; i++) {
                pdf.setPage(i);
                pdf.addImage(Top2ImageUrl, 'PNG', 0, 0, Top2ImageWidth, Top2ImageHeight, undefined, 'FAST');
                pdf.addImage(down2ImageUrl, 'PNG', 0, 280, down2Width, down2Height, undefined, 'FAST');
              }
            
              pdf.save('report.pdf');
            });
          });
        });
            //});
          //});
          
            
           
           
            } else {
            pdf.save('report.pdf');
            }
            });
            });
            };
  
const handleInputChange = (e, key) => {
  const value = e.target.value;
  setEditedData(prevState => {
    const newState = { ...prevState };
    let currentState = newState;
    const keys = key.split('.');
    keys.forEach((key, index) => {
      if (index === keys.length - 1) {
        currentState[key] = value;
      } else {
        currentState[key] = { ...currentState[key] };
        currentState = currentState[key];
      }
    });
    return newState;
  });
};




console.log('editedData', editedData);
console.log('reportData', reportData);


const handleGoBack = () => {
  navigate('/Reporttable'); // Navigate back to the OngoingFiles component
};


  return (
    <>
      <NavList />

     


      <div className="container mx-auto p-6" dir='rtl'>
      <button
                            onClick={handleGoBack}
                            className="bg-[color:var(--color-primary-variant-02)] py-1 px-3 rounded-lg"
                        >
                            بازگشت به گزارش
                        </button>
        {isLoading ? (
          <p>Loading...</p>
        ) : (
          <>
          <br/>
          <div className='flex mt-5 mb-5'>
              <button
                className="mt-8 bg-[color:var(--color-bg-variant)]  hover:bg-[color:var(--color-primary)] text-white font-bold py-2 px-4 mx-2 rounded"
                onClick={handleDownloadPDF}
              >
                دانلود 
              </button>
              {isEditing ? (
                <button
                  className="mt-8 bg-[color:var(--color-bg-variant)]  hover:bg-[color:var(--color-primary)] text-white font-bold py-2 px-4 mx-2 rounded"
                  onClick={handleSave}
                >
                  ذخیره
                </button>
              ) : (
                <button
                  className="mt-8 bg-[color:var(--color-bg-variant)]  hover:bg-[color:var(--color-primary)] text-white font-bold py-2 px-4 mx-2 rounded"
                  onClick={handleEdit}
                >
                  ویرایش
                </button>
              )}
            </div>

            <div id="reportContent" className="text-center" style={{ fontSize: '16px', lineHeight: '1.5' }}>
  {/* Content for the first page */}

  <h1 className=" text-5xl font-bold my-9 mb-[200px] text-center">
  {isEditing ? (
    <textarea
      className="w-full p-2 rounded-lg border border-gray-300"
      rows={6}
      value={editedData.first_page?.branch_name}
      onChange={(e) => handleInputChange(e, 'first_page.branch_name')}
    />
  ) : (
    editableData.first_page?.branch_name
  )}
</h1>
<h2 className="text-xl my-[200px] text-center ">
  {isEditing ? (
    <textarea
      className="w-full p-2 rounded-lg border border-gray-300"
      rows={6}
      value={editedData.first_page?.report_period}
      onChange={(e) => handleInputChange(e, 'first_page.report_period')}
    />
  ) : (
    editableData.first_page?.report_period
  )}
</h2>
<h3 className="text-lg my-4 text-center">
  {isEditing ? (
    <textarea
      className="w-full p-2 rounded-lg border border-gray-300"
      rows={6}
      value={editedData.first_page?.date_title}
      onChange={(e) => handleInputChange(e, 'first_page.date_title')}
    />
  ) : (
    editableData.first_page?.date_title
  )}
</h3>
  <br/>
    
</div>

{/* Content for the second page */}

<div id="page2" className="new_page2 p-[60px] ">
<h4 className="text-2xl font-bold my-10">مقدمه:</h4>
{isEditing ? (
  <textarea
    className="w-full p-[60px] rounded-lg border border-gray-300"
    rows={12}
    value={editedData.introduction?.content}
    onChange={(e) => handleInputChange(e, 'introduction.content')}
  />
) : (
  <div>
    <p>{editableData.introduction?.content}</p>
  </div>
)}
<h4 className="text-2xl font-bold my-10">اهداف ارزیابی:</h4>
{isEditing ? (
  <textarea
    className="w-full p-[60px] rounded-lg border border-gray-300"
    rows={12}
    value={editedData.evaluation_goals?.content}
    onChange={(e) => handleInputChange(e, 'evaluation_goals.content')}
  />
) : (
  <div>
    <p>{editableData.evaluation_goals?.content}</p>
  </div>
)}
<h4 className="text-2xl font-bold my-10">دامنه رسیدگی:</h4>
{isEditing ? (
  <textarea
    className="w-full p-[60px] rounded-lg border border-gray-300"
    rows={12}
    value={editedData.domain?.content}
    onChange={(e) => handleInputChange(e, 'domain.content')}
  />
) : (
  <div>
    <p>{editableData.domain?.content}</p>
  </div>
)}
<h4 className="text-2xl font-bold my-10">اهداف:</h4>

<br/>
</div>
    
 {/* Content for the third page */}
 {reportData && reportData.personnel && reportData.personnel.table && (
  <div id="page3" className="personnel_page p-[60px] ">
    <h4 className="text-2xl font-bold my-10">{reportData.personnel.title}</h4>
    {isEditing ? (
      <textarea
        className="w-full p-[60px] rounded-lg border border-gray-300"
        rows={12}
        value={editedData.introduction?.content}
        onChange={(e) => handleInputChange(e, 'introduction.content')}
      />
      
    ) : (
      <div>
        <p>{editableData.introduction?.content}</p>
      </div>
    )}
    <br/>
    {reportData.personnel.table && (
      <table className="table-auto w-full mt-8">
        <caption className="text-lg font-semibold mb-12">{reportData.personnel.table.caption}</caption>
        <thead>
          <tr className="bg-gray-200">
            {Object.values(reportData.personnel.table.column_names).map((columnName, index) => (
              <th key={index} className="px-4 py-2">{columnName}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {isEditing ? (
  reportData.personnel?.table?.data.map((rowData, rowIndex) => (
    <tr key={rowIndex} className="bg-white">
      <td className="px-4 py-2">
        <input
          type="text"
          className="w-full p-2 rounded-lg border border-gray-300"
          value={editedData.personnel.table.data[rowIndex].first_name
          }
          onChange={(e) =>
            handleInputChange(e, `personnel.table.data[${rowIndex}].first_name`)
          }
        />
      </td>
      <td className="px-4 py-2">
        <input
          type="text"
          className="w-full p-2 rounded-lg border border-gray-300"
          value={editedData.personnel?.table?.data[rowIndex]?.last_name}
          onChange={(e) =>
            handleInputChange(e, `personnel.table.data[${rowIndex}].last_name`)
          }
        />
        
      </td>
      <td className="px-4 py-2">
        <input
          type="text"
          className="w-full p-2 rounded-lg border border-gray-300"
          value={editedData.personnel?.table?.data[rowIndex]?.degree}
          onChange={(e) =>
            handleInputChange(e, `personnel.table.data[${rowIndex}].degree`)
          }
        />
      </td>
      <td className="px-4 py-2">
        <input
          type="text"
          className="w-full p-2 rounded-lg border border-gray-300"
          value={editedData.personnel?.table?.data[rowIndex]?.major}
          onChange={(e) =>
            handleInputChange(e, `personnel.table.data[${rowIndex}].major`)
          }
        />
      </td>
      <td className="px-4 py-2">
        <input
          type="text"
          className="w-full p-2 rounded-lg border border-gray-300"
          value={editedData.personnel?.table?.data[rowIndex]?.hiring_date_jalali}
          onChange={(e) =>
            handleInputChange(e, `personnel.table.data[${rowIndex}].hiring_date_jalali`)
          }
        />
      </td>
      <td className="px-4 py-2">
        <input
          type="text"
          className="w-full p-2 rounded-lg border border-gray-300"
          value={editedData.personnel?.table?.data[rowIndex]?.position}
          onChange={(e) =>
            handleInputChange(e, `personnel.table.data[${rowIndex}].position`)
          }
        />
      </td>
      <td className="px-4 py-2">
        <input
          type="text"
          className="w-full p-2 rounded-lg border border-gray-300"
          value={editedData.personnel?.table?.data[rowIndex]?.experience_relative}
          onChange={(e) =>
            handleInputChange(e, `personnel.table.data[${rowIndex}].experience_relative`)
          }
        />
      </td>
      <td className="px-4 py-2">
        <input
          type="text"
          className="w-full p-2 rounded-lg border border-gray-300"
          value={editedData.personnel?.table?.data[rowIndex]?.experience_semi_relative}
          onChange={(e) =>
            handleInputChange(e, `personnel.table.data[${rowIndex}].experience_semi_relative`)
          }
        />
      </td>
      <td className="px-4 py-2">
        <input
          type="text"
          className="w-full p-2 rounded-lg border border-gray-300"
          value={editedData.personnel?.table?.data[rowIndex]?.experience_not_relative}
          onChange={(e) =>
            handleInputChange(e, `personnel.table.data[${rowIndex}].experience_not_relative`)
          }
        />
      </td>
    </tr>
  ))
) : (
  // Render plain text for non-editing mode
  reportData.personnel?.table?.data.map((rowData, rowIndex) => (
    <tr key={rowIndex} className={rowIndex % 2 === 0 ? "bg-gray-100" : "bg-white"}>
      <td className="px-4 py-2 text-center">{rowData.first_name}</td>
      <td className="px-4 py-2 text-center">{rowData.last_name}</td>
      <td className="px-4 py-2 text-center">{rowData.degree}</td>
      <td className="px-4 py-2 text-center">{rowData.major}</td>
      <td className="px-4 py-2 text-center">{rowData.hiring_date_jalali}</td>
      <td className="px-4 py-2 text-center">{rowData.position}</td>
      <td className="px-4 py-2 text-center">{rowData.experience_relative}</td>
      <td className="px-4 py-2 text-center">{rowData.experience_semi_relative}</td>
      <td className="px-4 py-2 text-center">{rowData.experience_not_relative}</td>
    </tr>
  ))
)}
                </tbody>
              </table>
              
            )}
             <h4 className="text-2xl font-bold my-10">{reportData.performance_control.title}</h4>
    <p className="mb-6">{reportData.performance_control.description}</p>
    <table className="table-auto w-full">
      <caption className="text-lg font-semibold mb-6">{reportData.performance_control.table.caption}</caption>
      <thead>
        <tr className="bg-gray-200 ">
          {Object.values(reportData.performance_control.table.column_names).map((columnName, index) => (
            <th key={index} className="px-4 py-2">{columnName}</th>
          ))}
        </tr>
      </thead>
      <tbody> 
      {isEditing ? (
          reportData.performance_control.table.data.map((rowData, rowIndex) => (
            <tr key={rowIndex} className="bg-white  ">
              <td className="px-4 py-2  ">
                <input
                  type="number"
                  className="w-full p-2 rounded-lg border border-gray-300 "
                  value={editedData.performance_control.table.data[rowIndex].insurance_revenue}
                  onChange={(e) => handleInputChange(e, `performance_control.table.data[${rowIndex}].insurance_revenue`)}
                />
              </td>
              <td className="px-4 py-2 ">
                <input
                  type="number"
                  className="w-full p-2 rounded-lg border border-gray-300"
                  value={editedData.performance_control.table.data[rowIndex].loss}
                  onChange={(e) => handleInputChange(e, `performance_control.table.data[${rowIndex}].losse`)}
                />
              </td>
              <td className="px-4 py-2">
                <input
                  type="number"
                  className="w-full p-2 rounded-lg border border-gray-300"
                  value={editedData.performance_control.table.data[rowIndex].commission_cost}
                  onChange={(e) => handleInputChange(e, `performance_control.table.data[${rowIndex}].commission_cost`)}
                />
              </td>
              <td className="px-4 py-2">
                <input
                  type="number"
                  className="w-full p-2 rounded-lg border border-gray-300"
                  value={editedData.performance_control.table.data[rowIndex].administrative_costs}
                  onChange={(e) => handleInputChange(e, `performance_control.table.data[${rowIndex}].administrative_costs`)}
                />
              </td>
              <td className="px-4 py-2">
                <input
                  type="number"
                  className="w-full p-2 rounded-lg border border-gray-300"
                  value={editedData.performance_control.table.data[rowIndex].other_operational_costs}
                  onChange={(e) => handleInputChange(e, `performance_control.table.data[${rowIndex}].other_operational_costs`)}
                />
              </td>
              <td className="px-4 py-2">
                <input
                  type="number"
                  className="w-full p-2 rounded-lg border border-gray-300"
                  value={editedData.performance_control.table.data[rowIndex].non_operational_costs}
                  onChange={(e) => handleInputChange(e, `performance_control.table.data[${rowIndex}].non_operational_costs`)}
                />
              </td>
              <td className="px-4 py-2">
                <input
                  type="number"
                  className="w-full p-2 rounded-lg border border-gray-300"
                  value={editedData.performance_control.table.data[rowIndex].personnel_costs}
                  onChange={(e) => handleInputChange(e, `performance_control.table.data[${rowIndex}].personnel_costs`)}
                />
              </td>
              <td className="px-4 py-2">
                <input
                  type="number"
                  className="w-full p-2 rounded-lg border border-gray-300"
                  value={editedData.performance_control.table.data[rowIndex].depreciation_costs}
                  onChange={(e) => handleInputChange(e, `performance_control.table.data[${rowIndex}].depreciation_costs`)}
                />
              </td>
              <td className="px-4 py-2">
                <input
                  type="number"
                  className="w-full p-2 rounded-lg border border-gray-300"
                  value={editedData.performance_control.table.data[rowIndex].cost_ratio}
                  onChange={(e) => handleInputChange(e, `performance_control.table.data[${rowIndex}].cost_ratio`)}
                />
              </td>
              <td className="px-4 py-2">
                <input
                  type="number"
                  className="w-full p-2 rounded-lg border border-gray-300"
                  value={editedData.performance_control.table.data[rowIndex].profit_lost}
                  onChange={(e) => handleInputChange(e, `performance_control.table.data[${rowIndex}].profit_lost`)}
                />
              </td>
              
            </tr>
          ))
        ) : (
        reportData.performance_control.table.data.map((rowData, rowIndex) => (
          <tr key={rowIndex} className={rowIndex % 2 === 0 ? "bg-gray-100 item" : "bg-white"}>
            <td className={`px-4 py-2 text-center ${rowData.insurance_revenue < 0 ? 'text-red-500' : ''}`}>{PersianNumber(rowData.insurance_revenue)}</td>
            <td className={`px-4 py-2 text-center ${rowData.loss < 0 ? 'text-red-500' : ''}`}>{rowData.loss}</td>
            <td className={`px-4 py-2 text-center ${rowData.commission_cost < 0 ? 'text-red-500' : ''}`}>{PersianNumber(rowData.commission_cost)}</td>
            <td className={`px-4 py-2 text-center ${rowData.administrative_costs < 0 ? 'text-red-500' : ''}`}>{PersianNumber(rowData.administrative_costs)}</td>
            <td className={`px-4 py-2 text-center ${rowData.other_operational_costs< 0 ? 'text-red-500' : ''}`}>{PersianNumber(rowData.other_operational_costs)}</td>
            <td className={`px-4 py-2 text-center ${rowData.non_operational_costs < 0 ? 'text-red-500' : ''}`}>{PersianNumber(rowData.non_operational_costs)}</td>
            <td className={`px-4 py-2 text-center ${rowData.personnel_costs < 0 ? 'text-red-500' : ''}`}>{PersianNumber(rowData.personnel_costs)}</td>
            <td className={`px-4 py-2 text-center ${rowData.depreciation_costs < 0 ? 'text-red-500' : ''}`}>{PersianNumber(rowData.depreciation_costs)}</td>
            <td className={`px-4 py-2 text-center ${rowData.cost_ratio < 0 ? 'text-red-500' : ''}`}>{PersianNumber(rowData.cost_ratio)}</td>
            <td className={`px-4 py-2 text-center ${rowData.profit_lost < 0 ? 'text-red-500' : ''}`}>{PersianNumber(rowData.profit_lost)}</td>
            </tr>
          ))
        )}
        
      </tbody>
    </table>

    {reportData.FinancialPerformanceIssueLossCompareBudget && (
  <div id="page3" className="financial_performance_page p-[60px] mx-[-60px] " dir='rtl'>
    <h4 className="text-2xl font-bold my-10 ">{reportData.FinancialPerformanceIssueLossCompareBudget.title}</h4>
    <p className="mb-6">{reportData.FinancialPerformanceIssueLossCompareBudget.description}</p>
    <table className="table-auto w-full">
      <caption className="text-lg font-semibold mb-6">{englishToPersianNumber(reportData.FinancialPerformanceIssueLossCompareBudget.table.caption)}</caption>
      <thead>
        <tr className="bg-gray-200">
          {Object.values(reportData.FinancialPerformanceIssueLossCompareBudget.table.column_names).map((columnName, index) => (
            <th key={index} className="px-4 py-2">{columnName}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {isEditing ? (
          editedData.FinancialPerformanceIssueLossCompareBudget.table.data.map((rowData, rowIndex) => (
            <tr key={rowIndex} className="bg-white">
              {Object.keys(rowData).map((key, index) => (
                <td key={index} className="px-4 py-2">
                  <input
                    type="text"
                    className="w-full p-2 rounded-lg border border-gray-300"
                    value={rowData[key]}
                    onChange={(e) => handleInputChange(e, `FinancialPerformanceIssueLossCompareBudget.table.data[${rowIndex}].${key}`)}
                  />
                </td>
              ))}
            </tr>
          ))
        ) : (
          reportData.FinancialPerformanceIssueLossCompareBudget.table.data.map((rowData, rowIndex) => (
            <tr key={rowIndex} className={rowIndex % 2 === 0 ? "bg-gray-100" : "bg-white"}>
              {Object.values(rowData).map((value, index) => (
                <td key={index} className={`px-4 py-2 text-center ${value < 0 ? 'text-red-500' : ''}`}>{PersianNumber(value)}</td>
              ))}
            </tr>
          ))
        )}
      </tbody>
    </table>
  </div>
)}


          </div>
        )}

 {/* Content for the four page */}
 
 <div id="page4" className="">
  
 <caption className="text-lg font-semibold my-6 w-[800px]">{reportData.Chart_1.caption}</caption>

  <div className=" text-lg " style={{ width: '1350px', height: '690px' }}>

    <canvas className=' text-5x' ref={chartCanvasRef}></canvas>
  </div>
  <caption className="text-lg font-semibold my-6 w-[800px] ">{reportData.Chart_2.caption}</caption>

  <div className=" mr-[400px]" style={{ width: '600px', height: '450px' }}>
      <canvas ref={pieChart1CanvasRef}></canvas>
    </div>
    <caption className="text-lg font-semibold my-6 w-[800px]">{reportData.Chart_3.caption}</caption>

    <div className="mr-[400px]" style={{ width: '600px', height: '450px' }}>
      <canvas ref={pieChart2CanvasRef}></canvas>
    </div>
 
</div>

 {/* Content for the five page */}
 <div id="page5" className="">

 <FindingComponent
  finding="Finding_1"
  editedData={editedData}
  isEditing={isEditing}
  handleInputChange={handleInputChange}
/>

<div className=''>
        <h4 className="text-2xl font-bold my-10  p-5">{reportData.SalesPerformance.title}</h4>
        <p className='px-5 pb-5'>{reportData.SalesPerformance.description}</p>
        <table className="table-auto w-full">
  <caption className="text-lg font-semibold mb-6">{englishToPersianNumber(reportData.SalesPerformance.table.caption)}</caption>
  <thead>
    <tr className="bg-gray-200">
      {Object.values(reportData.SalesPerformance.table.column_names).map((columnName, index) => (
        <th key={index} className="px-4 py-2">{columnName}</th>
      ))}
    </tr>
  </thead>
  <tbody>
    {isEditing ? (
      editedData.SalesPerformance.table.data.map((rowData, rowIndex) => (
        <tr key={rowIndex} className="bg-white">
          {Object.keys(rowData).map((key, cellIndex) => (
            <td key={cellIndex} className="px-4 py-2">
              <input
                type="text"
                className="w-full p-2 rounded-lg border border-gray-300"
                value={rowData[key]}
                onChange={(e) => handleInputChange(e, `SalesPerformance.table.data[${rowIndex}].${key}`)}
              />
            </td>
          ))}
        </tr>
      ))
    ) : (
      reportData.SalesPerformance.table.data.map((rowData, rowIndex) => (
        <tr key={rowIndex} className={rowIndex % 2 === 0 ? "bg-gray-100" : "bg-white"}>
        {Object.keys(rowData).map((key, cellIndex) => (
  <td key={cellIndex} className={`px-4 py-2 text-center ${rowData[key] < 0 ? 'text-red-500' : ''}`}>
    {typeof rowData[key] === 'number' ? PersianNumber(rowData[key]) : rowData[key]}
  </td>
))}
        </tr>
      ))
    )}
  </tbody>
</table>
    </div>
</div>


{/* Content for the sixth page */}
<div id="page6" className="page-content" style={{ width: '420mm', height: '594mm', fontSize: '16px', lineHeight: '1.5' , padding: '30px', marginTop: '50px'}}>
    <FindingComponent finding="Finding_2" editedData={editedData} isEditing={isEditing} handleInputChange={handleInputChange} />
    <div className="my-8 px-5">
        <table className="table-auto w-full">
            <caption className="text-lg font-semibold mb-6">{editedData.AgentsSales.table.caption}</caption>
            <thead>
                <tr className="bg-gray-200">
                    {Object.values(editedData.AgentsSales.table.column_names).map((columnName, index) => (
                        <th key={index} className="px-4 py-2">{columnName}</th>
                    ))}
                </tr>
            </thead>
            <tbody>
                {editedData.AgentsSales.table.data.map((rowData, rowIndex) => (
                    <tr key={rowIndex} className={rowIndex % 2 === 0 ? "bg-gray-100" : "bg-white"}>
                        {Object.values(rowData).map((cellData, cellIndex) => (
                            <td key={cellIndex} className={`px-4 py-2 text-center ${cellData < 0 ? 'text-red-500' : ''}`}>
                                {typeof cellData === 'number' ? PersianNumber(cellData) : cellData}
                            </td>
                        ))}
                    </tr>
                ))}
            </tbody>
        </table>
    </div>
    <div className="my-8 px-5">
        <table className="table-auto w-full">
            <caption className="text-lg font-semibold mb-6">{editedData.AgentsLoss.table.caption}</caption>
            <thead>
                <tr className="bg-gray-200">
                    {Object.values(editedData.AgentsLoss.table.column_names).map((columnName, index) => (
                        <th key={index} className="px-4 py-2">{columnName}</th>
                    ))}
                </tr>
            </thead>
            <tbody>
                {editedData.AgentsLoss.table.data.map((rowData, rowIndex) => (
                    <tr key={rowIndex} className={rowIndex % 2 === 0 ? "bg-gray-100" : "bg-white"}>
                        {Object.values(rowData).map((cellData, cellIndex) => (
                            <td key={cellIndex} className={`px-4 py-2 text-center ${cellData < 0 ? 'text-red-500' : ''}`}>
                                {typeof cellData === 'number' ? PersianNumber(cellData) : cellData}
                            </td>
                        ))}
                    </tr>
                ))}
            </tbody>
        </table>
    </div>
</div>

{/* Content for the seventh page */}
<div id="page7" className="text-center" style={{ width: '420mm', height: '594mm', fontSize: '16px', lineHeight: '1.5' , padding: '30px', marginTop: '50px'}}>
    <h4 className="text-2xl font-bold my-8 p-2">{editedData.OperationalPlan.title}</h4>
    <div className="px-5 pb-2">
        <p>{editedData.OperationalPlan.content}</p>
    </div>
    <FindingComponent finding="Finding_3" editedData={editedData} isEditing={isEditing} handleInputChange={handleInputChange} />
    <div>
        <h4 className="text-2xl font-bold my-6 p-2">{editedData.Claims.title}</h4>
        <p className="px-5 pb-2">{editedData.Claims.content}</p>
    </div>
    <table className="table-auto w-full my-8">
        <caption className="text-lg font-semibold mb-6">{editedData.ClaimRemain.table.caption}</caption>
        <thead>
            <tr className="bg-gray-200">
                {Object.values(editedData.ClaimRemain.table.column_names).map((columnName, index) => (
                    <th key={index} className="px-4 py-2">{columnName}</th>
                ))}
            </tr>
        </thead>
        <tbody>
            {editedData.ClaimRemain.table.data.map((rowData, rowIndex) => (
                <tr key={rowIndex} className={rowIndex % 2 === 0 ? "bg-gray-100" : "bg-white"}>
                    {Object.values(rowData).map((cellData, cellIndex) => (
                        <td key={cellIndex} className="px-4 py-2 text-center">
                            {typeof cellData === 'number' ? cellData.toLocaleString() : cellData}
                        </td>
                    ))}
                </tr>
            ))}
        </tbody>
    </table>
    <table className="table-auto w-full my-8">
        <caption className="text-lg font-semibold mb-6">{editedData.ClaimsDecomByAge.table.caption}</caption>
        <thead>
            <tr className="bg-gray-200">
                {Object.values(editedData.ClaimsDecomByAge.table.column_names).map((columnName, index) => (
                    <th key={index} className="px-4 py-2">{columnName}</th>
                ))}
            </tr>
        </thead>
        <tbody>
            {editedData.ClaimsDecomByAge.table.data.map((rowData, rowIndex) => (
                <tr key={rowIndex} className={rowIndex % 2 === 0 ? "bg-gray-100" : "bg-white"}>
                    {Object.values(rowData).map((cellData, cellIndex) => (
                        <td key={cellIndex} className="px-4 py-2 text-center">
                            {typeof cellData === 'number' ? cellData.toLocaleString() : cellData}
                        </td>
                    ))}
                </tr>
            ))}
        </tbody>
    </table>
</div>

{/* Content for the eighth page */}
<div id="page8" className="text-center" style={{ width: '420mm', height: '594mm', fontSize: '16px', lineHeight: '1.5', padding: '30px', marginTop: '50px' }}>
    <table className="table-auto w-full my-8">
        <caption className="text-lg font-semibold mb-6">{editedData.ClaimsDecomByInsuranceType.table.caption}</caption>
        <thead>
            <tr className="bg-gray-200">
                {Object.values(editedData.ClaimsDecomByInsuranceType.table.column_names).map((columnName, index) => (
                    <th key={index} className="px-4 py-2">{columnName}</th>
                ))}
            </tr>
        </thead>
        <tbody>
            {editedData.ClaimsDecomByInsuranceType.table.data.map((rowData, rowIndex) => (
                <tr key={rowIndex} className={rowIndex % 2 === 0 ? "bg-gray-100" : "bg-white"}>
                    {Object.values(rowData).map((cellData, cellIndex) => (
                        <td key={cellIndex} className="px-4 py-2 text-center">
                            {typeof cellData === 'number' ? cellData.toLocaleString() : cellData}
                        </td>
                    ))}
                </tr>
            ))}
        </tbody>
    </table>
    <FindingComponent finding="Finding_4" editedData={editedData} isEditing={isEditing} handleInputChange={handleInputChange} />
</div>


<div id="page9" className="">
<h4 className="text-2xl font-bold my-8 p-2">{editedData.SalesNetwork.title}</h4>
<div className='px-5 pb-2'>
    <p></p>
  </div>

  <h5 className="text-2xl font-bold my-8 p-2">{editedData.AgentsRevenue.title}</h5>
<div className='px-5 pb-2'>
    <p></p>
  </div>


  {/* AgentsRevenueMonthlyTable */}
  <div>
    <table className="table-auto w-full my-8">
      <caption className="text-lg font-semibold mb-6">{editedData.AgentsRevenueMonthlyTable.table.caption}</caption>
      <thead>
        <tr className="bg-gray-200">
          {Object.values(editedData.AgentsRevenueMonthlyTable.table.column_names).map((columnName, index) => (
            <th key={index} className="px-4 py-2">{columnName}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {editedData.AgentsRevenueMonthlyTable.table.data.map((rowData, rowIndex) => (
          <tr key={rowIndex} className={rowIndex % 2 === 0 ? "bg-gray-100" : "bg-white"}>
            {Object.values(rowData).map((cellData, cellIndex) => (
              <td key={cellIndex} className="px-4 py-2 text-center">
                {typeof cellData === 'number' ? cellData.toLocaleString() : cellData}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  </div>


</div>

<div id="page10" className="">

  <FindingComponent
  finding="Finding_6"
  editedData={editedData}
  isEditing={isEditing}
  handleInputChange={handleInputChange}
/>

<div id="page11" className="">
<h4 className="text-2xl font-bold my-8 p-2">{editedData.PerformanceControlOfBranch.title}</h4>
<div className='px-2 pb-1'>
   
  </div>

  <h5 className="text-2xl font-bold my-8 p-2">{editedData.PerformanceControlOfBranch_CarThird.title}</h5>
<div className='px-5 pb-2'>
    <p></p>
  </div>


  {/* PerformanceControlOfBranch_CarThirdTable */}
  <div>
    <table className="table-auto w-full my-8">
      <caption className="text-lg font-semibold mb-6">{editedData.PerformanceControlOfBranch_CarThirdTable.table.caption}</caption>
      <thead>
        <tr className="bg-gray-200">
          {Object.values(editedData.PerformanceControlOfBranch_CarThirdTable.table.column_names).map((columnName, index) => (
            <th key={index} className="px-4 py-2">{columnName}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {editedData.PerformanceControlOfBranch_CarThirdTable.table.data.map((rowData, rowIndex) => (
          <tr key={rowIndex} className={rowIndex % 2 === 0 ? "bg-gray-100" : "bg-white"}>
            {Object.values(rowData).map((cellData, cellIndex) => (
              <td key={cellIndex} className="px-4 py-2 text-center">
                {typeof cellData === 'number' ? cellData.toLocaleString() : cellData}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  </div>

  <div>
    <table className="table-auto w-full my-8">
      <caption className="text-lg font-semibold mb-6">{editedData.PerformanceControlOfBranch_CarThirdTableOther.table.caption}</caption>
      <thead>
        <tr className="bg-gray-200">
          {Object.values(editedData.PerformanceControlOfBranch_CarThirdTableOther.table.column_names).map((columnName, index) => (
            <th key={index} className="px-4 py-2">{columnName}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {editedData.PerformanceControlOfBranch_CarThirdTableOther.table.data.map((rowData, rowIndex) => (
          <tr key={rowIndex} className={rowIndex % 2 === 0 ? "bg-gray-100" : "bg-white"}>
            {Object.values(rowData).map((cellData, cellIndex) => (
              <td key={cellIndex} className="px-4 py-2 text-center">
                {typeof cellData === 'number' ? cellData.toLocaleString() : cellData}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  </div>
</div>

</div>

             <div className='flex mt-5 mb-5'>
              <button
                className="mt-8 bg-[color:var(--color-bg-variant)]  hover:bg-[color:var(--color-primary)] text-white font-bold py-2 px-4 mx-2 rounded"
                onClick={handleDownloadPDF}
              >
                دانلود 
              </button>
              {isEditing ? (
                <button
                  className="mt-8 bg-[color:var(--color-bg-variant)]  hover:bg-[color:var(--color-primary)] text-white font-bold py-2 px-4 mx-2 rounded"
                  onClick={handleSave}
                >
                  ذخیره
                </button>
              ) : (
                <button
                  className="mt-8 bg-[color:var(--color-bg-variant)]  hover:bg-[color:var(--color-primary)] text-white font-bold py-2 px-4 mx-2 rounded"
                  onClick={handleEdit}
                >
                  ویرایش
                </button>
              )}
            </div>


 <br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>
          </>
        )}
         <br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>
      </div>
      <br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>
    </>
  );
};

export default FirstReport;

<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>Furstore - Furniture Home Decor Shopify 2.0 Theme</title>
    <meta name="keywords" content="shopify, shopify theme, single product shopify, POD tshirt shopify, shopify drop shipping, dropshipping, best shopify theme, amazon dropshipping, ebay dropshipping, alibaba dropshipping, teemate, mate shopify, shopify 2.0"
    />
    <meta name="description" content="Furstore - High Converting eCommerce Shopify 2.0 Theme includes over 09 Unique Pre-Made Homepages with great attention to details, flexibility and performance" />

    <meta property="og:url" content="https://vinovathemes.com/" />
    <meta property="fb:app_id" content="1471668526185306" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Furstore - Furniture Home Decor Shopify 2.0 Theme" />
    <meta property="og:image" content="https://vinovathemes.com/shopify/furstore/assets/img/preview.png" />
    <meta property="og:image:type" content="image/png" />
    <meta property="og:description" content="Furstore - High Converting eCommerce Shopify 2.0 Theme includes over 09 Unique Pre-Made Homepages with great attention to details, flexibility and performance" />
    <link rel="canonical" target="_blank" href="https://vinovathemes.com/" />
    <meta name="og:image:alt" content="Furstore - Furniture Home Decor Shopify 2.0 Theme" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/image/png" href="assets/img/favicon.png" />
    <link rel="shortcut icon" type="image/png" href="assets/img/favicon.png" />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;500;600;700&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="assets/css/animate.css" type="text/css" media="all" />
    <link rel="stylesheet" href="assets/css/slick.css" type="text/css" media="all" />
    <link rel="stylesheet" href="assets/css/tailwind.css" type="text/css" media="all" />
    <link rel="stylesheet" href="assets/css/style.css" type="text/css" media="all" />
    <link rel="stylesheet" href="assets/css/style-icon.css" type="text/css" media="all">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" />


    <script type="text/javascript" async="" src="https://www.google-analytics.com/analytics.js"></script>

    <script src="assets/js/jquery-3.2.1.min.js"></script>
    <script src="assets/js/jquery.lazy.min.js"></script>
    <script src="assets/js/wow.min.js"></script>
    <script src="assets/js/isotope.js"></script>
    <script src="assets/js/slick.min.js"></script>
    <script src="assets/js/parallax.js"></script>
    <script src="assets/js/global.js"></script>

    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-169364993-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }
        gtag("js", new Date());

        gtag("config", "UA-169364993-1");
    </script>
</head>

<body>
    <!-- Header -->
    <header class="header sticky-menu relative">
        <div class="container mx-auto header_top header_content text-center">
            <div class="site_header md:h-[80px] h-[auto] flex justify-center md:justify-start items-center flex-wrap md:flex-nowrap">
                <div class="xl:block inline-block md:mt-0 md:mb-0 mt-5 mb-2">
                    <a href="#">
                  <img src="assets/img/logo.png" alt="Logo" />
               </a>
                </div>
                <div class="xl:ml-56 md:ml-14 overflow-hidden mt-2 mb-4 md:mt-0 md:mb-0">
                    <div class="header_nav text-center">
                        <ul class="md:flex justify-center font-bold text-[#000000] text-sm">
                            <li class="2xl:pr-[40px] pr-6">
                                <a href="#">Demos</a>
                            </li>
                            <li class="2xl:pr-[40px] pr-6">
                                <a href="#">Features</a>
                            </li>
                            <li class="2xl:pr-[40px] pr-6">
                                <a href="#">Testimonial</a>
                            </li>
                            <li class="2xl:pr-[40px] pr-6"><a href="#">FAQs</a>
                            </li>
                            <li class="2xl:pr-[40px] pr-6"><a href="https://documents.vinovathemes.com/furstore-documentation">Online Documentation</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="header-sticky bg-white">
                <div class="site_header h-[50px] leading-[50px] items-center flex container mx-auto">
                    <div class="2xl:px-[94] px-7">
                        <div class="flex flex-nowrap items-center">
                            <div class="block">
                                <a href="#">
                           <img src="assets/img/logo.png" alt="Logo" />
                        </a>
                            </div>
                            <div class="xl:ml-56 ml-12">
                                <div class="header_nav text-center">
                                    <ul class="flex font-bold text-sm">
                                        <li class="2xl:pr-[40px] pr-6">
                                            <a href="#">Demos</a>
                                        </li>
                                        <li class="2xl:pr-[40px] pr-6">
                                            <a href="#">Features</a>
                                        </li>
                                        <li class="2xl:pr-[40px] pr-6">
                                            <a href="#">Testimonial</a>
                                        </li>
                                        <li class="2xl:pr-[40px] pr-6">
                                            <a href="#">FAQs</a>
                                        </li>
                                        <li class="2xl:pr-[40px] pr-6">
                                            <a href="https://documents.vinovathemes.com/furstore-documentation">Online Documentation</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- End Header -->
    <!-- Main Content -->
    <main class="main">
        <div class="banner-top md:overflow-hidden relative bg-[#eff4f0]">
            <div class="container mx-auto grid lg:grid-cols-12 md:grid-cols-12 grid-cols-1 lg:gap-[30px] gap-[10px]">
                <div class="lg:col-span-5 md:col-span-6 col-span-12 text-[#082e21]">
                    <div class="content-left 2xl:py-[297px] lg:py-[200px] md:py-[80px] pt-[50px] pb-[40px] ">
                        <h2 class="xl:text-[36px] text-[20px] font-bold md:text-left text-center 2xl:leading-[60px] leading-9 text-[#082e21] wow fadeInBottomLeft" data-wow-delay="0.2s"><span class="text-[#082e21]">Furniture</span> & <span class="text-[#082e21]">Home Decor</span> <br>Shopify Theme</h2>
                        <ul class="md:block hidden text-[#082e21] font-bold lg:pt-10 pt-8">
                            <li class="flex wow fadeInBottomLeft" data-wow-delay="0.4s">
                                <i class="rbb-icon-check-9 title text-base md:pr-[25px] pr-[15px] text-[#082e21]"></i><span class="text-[13px]">Shopify OS 2.0</span>
                            </li>
                            <li class="flex wow fadeInBottomLeft" data-wow-delay="0.5s">
                                <i class="rbb-icon-check-9 title text-base md:pr-[25px] pr-[15px] text-[#082e21]"></i><span class="text-[13px]">NO coding knowledge required</span>
                            </li>
                            <li class="flex wow fadeInBottomLeft" data-wow-delay="0.6s">
                                <i class="rbb-icon-check-9 title text-base md:pr-[25px] pr-[15px] text-[#082e21]"></i><span class="text-[13px]">NO Monthly charge</span>
                            </li>
                            <li class="flex wow fadeInBottomLeft" data-wow-delay="0.7s">
                                <i class="rbb-icon-check-9 title text-base md:pr-[25px] pr-[15px] text-[#082e21]"></i><span class="text-[13px]">High Converting Shopify Theme</span>
                            </li>
                            <li class="flex wow fadeInBottomLeft" data-wow-delay="0.8s">
                                <i class="rbb-icon-check-9 title text-base md:pr-[25px] pr-[15px] text-[#082e21]"></i><span class="text-[13px]">Maximum Customizability</span>
                            </li>
                            <li class="flex wow fadeInBottomLeft" data-wow-delay="0.9s">
                                <i class="rbb-icon-check-9 title text-base md:pr-[25px] pr-[15px] text-[#082e21]"></i><span class="text-[13px]">Premium Support</span>
                            </li>
                        </ul>
                        <div class="flex items-center md:justify-start justify-center md:flex-nowrap flex-wrap mt-[55px] wow fadeInBottomLeft" data-wow-delay="1s">
                            <button>
                        <a class="button-home md:w-[166px] w-[130px] h-[50] leading-[50px] rounded-[3px] bg-white text-[#000000] inline-block text-xs font-bold mr-[10px] hover:bg-[#010d16] hover:text-white transition-all shadow-[7px_7px_15px_0_rgba(0,0,0,0.2)]"
                           href="#">View Demos</a>
                     </button>
                            <button class="button-top">
                        <a class="md:w-[166px] w-[130px] h-[50] leading-[50px] rounded-[3px] bg-white text-[#000000] inline-block text-xs font-bold hover:bg-[#010d16] hover:text-white transition-all shadow-[7px_7px_15px_0_rgba(0,0,0,0.2)]"
                           href="https://1.envato.market/vinovathemes">Our Portfolio</a>
                     </button>
                        </div>
                    </div>
                </div>
                <div class="slide-content lg:col-span-7 md:col-span-6 col-span-12 md:h-full h-[300px]">
                    <div class="item-background relative w-full h-full">
                        <div class="img-slider img-slide-1 absolute z-30 left-0 bottom-0 shadow-[22px_21px_35px_0px_rgba(0,0,0,0.20)] xl:max-w-[536px] lg:max-w-[420px] md:max-w-[260px] wow fadeInUp" data-wow-delay="1.3s">
                            <img class="" src="assets/img/banner1-1.jpg" alt="slide2">
                        </div>
                        <div class="img-slider img-slide-2 absolute z-20 top-0 right-0 shadow-[22px_21px_35px_0px_rgba(0,0,0,0.20)] xl:max-w-[410px] lg:max-w-[240px] md:max-w-[180px] wow fadeInDown" data-wow-delay="1.3s">
                            <img src="assets/img/banner1-2.jpg" alt="slide2">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
        <!--  Project -->
        <div class="project bg-[#091017] md:pt-[140px] pt-20 text-center item overflow-hidden">
            <div class="container mx-auto px-[15px]">
                <p class="text-white font-semibold text-lg pb-4 wow fadeInUp" data-wow-delay="0.3s">
                    Choosing a Furstore Theme for
                </p>
                <h2 class="text-white font-extrabold md:text-4xl text-2xl pb-5 wow fadeInUp" data-wow-delay="0.4s">
                    Your Next Project?
                </h2>
                <p class="text-white text-sm text-[0.9375] pb-12 leading-[25px] max-w-[895px] inline-block wow fadeInUp" data-wow-delay="0.5s">
                    Furstore Shopify Theme is a clean and minimalistic style design, perfect for various types of stores, such as Furniture, Home Decor, Fashion, Gardening Supplies, Gifts, Canvas Painting, Jewelry Stores and more. It covers multiple categories and products
                    and has 09 different homepage layouts to meet all your requirements.
                </p>
                <div class="project-center text-[0.9375rem] pb-14 mt-1 md:flex grid justify-center text-white font-bold wow fadeInUp" data-wow-delay="0.5s">
                    <span class="flex items-center lg:mr-[70px] mr-8">
                  <span class="icon"><i class="zmdi zmdi-check"></i></span>Sections On Every Page
                    </span>
                    <span class="flex items-center lg:mr-[70px] mr-8 md:py-0 py-5">
                  <span class="icon"><i class="zmdi zmdi-check"></i></span> Drag & Drop Shopify Theme Sections
                    </span>
                    <span class="flex items-center">
                  <span class="icon"><i class="zmdi zmdi-check"></i></span> Support Filter Collection ver 2.0
                    </span>
                </div>
                <div class="text-center wow fadeInUp" data-wow-delay="0.5s">
                    <img class="inline-block lazyload" data-src="assets/img/project.png" alt="project" />
                </div>
            </div>
        </div>
        <!-- Pre-Build Demos  --->
        <div class="tab-homepage bg-[#e8eef1] xl:pt-[195px] pt-[100px] xl:pb-[180px] pb-[100px] 2xl:px-20 lg:pl-12 lg:pr-10 px-[15px] grid grid-cols-1 gap-0 relative" id="homepage-demo">
            <div class="col-span-1 tab-right main-tab-homepage lg:mt-0 mt-12">
                <h2 class="px-[15px] font-extrabold uppercase md:text-3xl text-xl text-[#010101] wow fadeInUp text-center" data-wow-delay="0.4s">
                    <span class="text-[#082e21]">09</span> Pre-Build Demos
                </h2>
                <p class="px-[15px] text-[0.9375rem] pt-6 pb-10 text-[#424242] wow fadeInUp text-center" data-wow-delay="0.4s">
                    Comes with 06 homepages availabvle with multi style that better for your choice. Furstore is one of the best Shopify Theme for your store.
                </p>
                <h2 class="text-center pb-14">
                    <span class="icon"><i class="zmdi zmdi-check bg-custom"></i></span><span class="text-base font-semibold">Please enter password " <span class="text-[#082e21]">1</span> " to view live demo</span>
                </h2>
                <div class="container content-tab-homepage mx-auto">
                    <div class="content-homepage grid lg:grid-cols-3 grid-cols-2 lg:gap-[30px] gap-[15px]">
                        <div class="item hover:-translate-y-4 transition-all">
                            <div class="img-homepage p-[15px] bg-white wow fadeInUp rounded-lg shadow-[0_15px_25px_0px_rgba(0,0,0,0.15)] " data-wow-delay="0.2s">
                                <a target="_blank" href="https://vinova-furstore.myshopify.com/?preview_theme_id=161788068115">
                           <img class="inline-block lazyload" data-src="assets/img/i-1.jpg" alt="Furstore- Shopify" />
                           <div class="px-[5px] pt-8 pb-[14px]">
                              <h2 class="text-[#222] hover:text-[#082e21] text-base font-bold pb-[11px]">
                                 Furstore - Homepage 1
                              </h2>
                              <span class="text-[#666] text-sm">Furniture Home Decor Shopify 2.0 Theme</span>
                           </div>
                        </a>
                            </div>
                        </div>
                        <div class="item hover:-translate-y-4 transition-all">
                            <div class="img-homepage p-[15px] bg-white wow fadeInUp rounded-lg shadow-[0_15px_25px_0px_rgba(0,0,0,0.15)]" data-wow-delay="0.2s">
                                <a target="_blank" href="https://vinova-furstore.myshopify.com/?preview_theme_id=161638449427">
                           <img class="inline-block lazyload" data-src="assets/img/i-2.jpg"
                              alt="Furniture Home Decor Shopify 2.0 Theme" />
                           <div class="px-[5px] pt-8 pb-[14px]">
                              <h2 class="text-[#222] hover:text-[#082e21] text-base font-bold pb-[11px]">
                                 Furstore - Homepage 2
                              </h2>
                              <span class="text-[#666] text-sm">Furniture Home Decor Shopify Theme</span>
                           </div>
                        </a>
                            </div>
                        </div>
                        <div class="item hover:-translate-y-4 transition-all">
                            <div class="img-homepage p-[15px] bg-white wow fadeInUp rounded-lg shadow-[0_15px_25px_0px_rgba(0,0,0,0.15)]" data-wow-delay="0.2s">
                                <a target="_blank" href="https://vinova-furstore.myshopify.com/?preview_theme_id=159910527251">
                           <img class="inline-block lazyload" data-src="assets/img/i-3.jpg"
                              alt="Furniture Home Decor Shopify Theme" />
                           <div class="px-[5px] pt-8 pb-[14px]">
                              <h2 class="text-[#222] hover:text-[#082e21] text-base font-bold pb-[11px]">
                                 Furstore - Homepage 3
                              </h2>
                              <span class="text-[#666] text-sm">Furniture Home Decor Shopify Theme</span>
                           </div>
                        </a>
                            </div>
                        </div>
                        <div class="item hover:-translate-y-4 transition-all">
                            <div class="img-homepage p-[15px] bg-white wow fadeInUp rounded-lg shadow-[0_15px_25px_0px_rgba(0,0,0,0.15)]" data-wow-delay="0.3s">
                                <a target="_blank" href="https://vinova-furstore.myshopify.com/?preview_theme_id=161432076563">
                           <img class="inline-block lazyload" data-src="assets/img/i-4.jpg"
                              alt="Furniture Home Decor Shopify Theme" />
                           <div class="px-[5px] pt-8 pb-[14px]">
                              <h2 class="text-[#222] hover:text-[#082e21] text-base font-bold pb-[11px]">
                                 Furstore - Homepage 4
                              </h2>
                              <span class="text-[#666] text-sm">Furniture Home Decor Shopify Theme</span>
                           </div>
                        </a>
                            </div>
                        </div>
                        <div class="item hover:-translate-y-4 transition-all">
                            <div class="img-homepage p-[15px] bg-white wow fadeInUp rounded-lg shadow-[0_15px_25px_0px_rgba(0,0,0,0.15)]" data-wow-delay="0.3s">
                                <a target="_blank" href="https://vinova-furstore.myshopify.com/?preview_theme_id=160980533523">
                           <img class="inline-block lazyload" data-src="assets/img/i-5.jpg"
                              alt="Furniture Home Decor Shopify Theme" />
                           <div class="px-[5px] pt-8 pb-[14px]">
                              <h2 class="text-[#222] hover:text-[#082e21] text-base font-bold pb-[11px]">
                                 Furstore - Homepage 5
                              </h2>
                              <span class="text-[#666] text-sm">Furniture Home Decor Shopify Theme</span>
                           </div>
                        </a>
                            </div>
                        </div>
                        <div class="item hover:-translate-y-4 transition-all">
                            <div class="img-homepage p-[15px] bg-white wow fadeInUp rounded-lg shadow-[0_15px_25px_0px_rgba(0,0,0,0.15)]" data-wow-delay="0.3s">
                                <a target="_blank" href="https://vinova-furstore.myshopify.com/?preview_theme_id=161970946323">
                           <img class="inline-block lazyload" data-src="assets/img/i-6.jpg"
                              alt="Furniture Home Decor Shopify Theme" />
                           <div class="px-[5px] pt-8 pb-[14px]">
                              <h2 class="text-[#222] hover:text-[#082e21] text-base font-bold pb-[11px]">
                                 Furstore - Homepage 6
                              </h2>
                              <span class="text-[#666] text-sm">Furniture Home Decor Shopify Theme</span>
                           </div>
                        </a>
                            </div>
                        </div>
                        <div class="item hover:-translate-y-4 transition-all">
                            <div class="img-homepage p-[15px] bg-white wow fadeInUp rounded-lg shadow-[0_15px_25px_0px_rgba(0,0,0,0.15)]" data-wow-delay="0.3s">
                                <a target="_blank" href="https://vinova-furstore.myshopify.com/?preview_theme_id=163890462995">
                           <img class="inline-block lazyload" data-src="assets/img/i-7.jpg"
                              alt="Furniture Home Decor Shopify Theme" />
                           <div class="px-[5px] pt-8 pb-[14px]">
                              <h2 class="text-[#222] hover:text-[#082e21] text-base font-bold pb-[11px]">
                                 Furstore - Homepage 7
                              </h2>
                              <span class="text-[#666] text-sm">Furniture Home Decor Shopify Theme</span>
                           </div>
                        </a>
                            </div>
                        </div>
                        <div class="item hover:-translate-y-4 transition-all">
                            <div class="img-homepage p-[15px] bg-white wow fadeInUp rounded-lg shadow-[0_15px_25px_0px_rgba(0,0,0,0.15)]" data-wow-delay="0.3s">
                                <a target="_blank" href="https://vinova-furstore.myshopify.com/?preview_theme_id=163941646611">
                           <img class="inline-block lazyload" data-src="assets/img/i-8.jpg"
                              alt="Furniture Home Decor Shopify Theme" />
                           <div class="px-[5px] pt-8 pb-[14px]">
                              <h2 class="text-[#222] hover:text-[#082e21] text-base font-bold pb-[11px]">
                                 Furstore - Homepage 8
                              </h2>
                              <span class="text-[#666] text-sm">Furniture Home Decor Shopify Theme</span>
                           </div>
                        </a>
                            </div>
                        </div>
                        <div class="item hover:-translate-y-4 transition-all">
                            <div class="img-homepage p-[15px] bg-white wow fadeInUp rounded-lg shadow-[0_15px_25px_0px_rgba(0,0,0,0.15)]" data-wow-delay="0.3s">
                                <a target="_blank" href="https://vinova-furstore.myshopify.com/?preview_theme_id=164032905491">
                           <img class="inline-block lazyload" data-src="assets/img/i-9.jpg"
                              alt="Furniture Home Decor Shopify Theme" />
                           <div class="px-[5px] pt-8 pb-[14px]">
                              <h2 class="text-[#222] hover:text-[#082e21] text-base font-bold pb-[11px]">
                                 Furstore - Homepage 9
                              </h2>
                              <span class="text-[#666] text-sm">Furniture Home Decor Shopify Theme</span>
                           </div>
                        </a>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>
        <!-- MAIN FEATURES -->
        <div class="main_features md:pt-[140px] pt-20 pb-[85px] xl:px-[65px] md:px-[30px] px-[5px] overflow-hidden text-center">
            <div class="text-black md:pb-[58px] pt-8">
                <h2 class="font-extrabold md:text-4xl text-2xl wow fadeInUp" data-wow-delay="0.4s">
                    Main Features
                </h2>
                <p class="text-[0.9375rem] pt-[30px] wow fadeInUp" data-wow-delay="0.4s">
                    What Makes Mate Shopify Theme so Power Full ?
                </p>
            </div>
            <div class="grid lg:grid-cols-4 grid-cols-2">
                <div class="item px-[15px] wow fadeInUp" data-wow-delay="0.2s">
                    <div class="icon_box">
                        <img class="inline-block xl:max-w-full md:max-w-[70%] lazyload" data-src="assets/img/box-1.png" alt="box1" />
                    </div>
                    <div class="title">Shopify OS 2.0</div>
                    <p class="max-w-[280px]">
                        Theme is built on Shopify 2.0 platform with many newly upgraded functions. Mate allowing you to use sections anywhere.
                    </p>
                </div>
                <div class="item px-[15px] wow fadeInUp" data-wow-delay="0.4s">
                    <div class="icon_box">
                        <img class="inline-block xl:max-w-full md:max-w-[70%] lazyload" data-src="assets/img/box-2.png" alt="box2" />
                    </div>
                    <div class="title">Compatible with Judge.me Review App</div>
                    <p class="max-w-[317px]">
                        The Best Reviews App on the market. This is a powerful application, with a free or paid plan. Boost sales with product reviews!
                    </p>
                </div>
                <div class="item px-[15px] wow fadeInUp" data-wow-delay="0.6s">
                    <div class="icon_box">
                        <img class="inline-block xl:max-w-full md:max-w-[70%] lazyload" data-src="assets/img/box-3.png" alt="box3" />
                    </div>
                    <div class="title">No Coding Required</div>
                    <p class="max-w-[280px]">
                        All done with 1 click, very intuitive and you hardly need to change the code.
                    </p>
                </div>
                <div class="item px-[15px] wow fadeInUp" data-wow-delay="0.8s">
                    <div class="icon_box">
                        <img class="inline-block xl:max-w-full md:max-w-[70%] lazyload" data-src="assets/img/box-4.png" alt="box4" />
                    </div>
                    <div class="title">Search Auto Suggestion</div>
                    <p class="max-w-[250px]">
                        As soon as a customer types in the search field, the module will show the search results as suggestions.
                    </p>
                </div>
                <div class="item px-[15px] wow fadeInUp" data-wow-delay="0.2s">
                    <div class="icon_box">
                        <img class="inline-block xl:max-w-full md:max-w-[70%] lazyload" data-src="assets/img/box-5.png" alt="box5" />
                    </div>
                    <div class="title">RTL Ready</div>
                    <p class="max-w-[260px]">
                        Some languages of the world (Arabic, Hebrew etc.) are RTL, meaning they are read right-to-left, instead of left-to-right. Our theme supports RTL for all layouts
                    </p>
                </div>
                <div class="item px-[15px] wow fadeInUp" data-wow-delay="0.4s">
                    <div class="icon_box">
                        <img class="inline-block xl:max-w-full md:max-w-[70%] lazyload" data-src="assets/img/box-6.png" alt="box6" />
                    </div>
                    <div class="title">Multi-Language</div>
                    <p class="max-w-[280px]">
                        Allow your website to use multiple languages. If your online store is available in more than one country, this is an indispensable function
                    </p>
                </div>
                <div class="item px-[15px] wow fadeInUp" data-wow-delay="0.6s">
                    <div class="icon_box">
                        <img class="inline-block xl:max-w-full md:max-w-[70%] lazyload" data-src="assets/img/box-7.png" alt="box7" />
                    </div>
                    <div class="title">Calculate Free Shipping Bar</div>
                    <p class="max-w-[260px]">
                        Free shipping threshold bar will encourage customers to add more items to their cart, increasing your AOV (average order value) and profits.
                    </p>
                </div>
                <div class="item px-[15px] wow fadeInUp" data-wow-delay="0.8s">
                    <div class="icon_box">
                        <img class="inline-block xl:max-w-full md:max-w-[70%] lazyload" data-src="assets/img/box-8.png" alt="box8" />
                    </div>
                    <div class="title">Product 360, 3D & video</div>
                    <p class="max-w-[250px]">
                        Display products in the most impressive, and most intuitive way. Customers cannot refuse to buy
                    </p>
                </div>
            </div>
        </div>
        <!-- What Customers Say About Us -->
        <div class="main_customers pt-[140px] lg:px-[65px] md:px-[30] px-[15px] overflow-hidden text-center bg-[#f1f1f1]">
            <div class="max-w-[1320px] mx-auto">
                <div class="text-black pb-[58px]">
                    <h2 class="font-extrabold md:text-4xl text-2xl wow fadeInUp" data-wow-delay="0.4s">
                        What Customers Say About Us
                    </h2>
                    <p class="text-[0.9375rem] pt-[33px] wow fadeInUp" data-wow-delay="0.4s">
                        See Why Thousands of Customer Love Us!
                    </p>
                </div>
                <div class="content-customers pb-[100px]">
                    <div class="grid grid-cols-2 gap-x-[15px] lg:grid-cols-4 md:grid-cols-3 md:gap-x-[30px]">
                        <div class="customer_1">
                            <div class="content px-[15px] md:px-[30px] pt-[20px] pb-[30px] rounded-[20px] wow fadeInUp flex flex-col" data-wow-delay="0.4s">
                                <div class="icon">
                                    <img class="inline-block lazyload" src="assets/img/icon.png" alt="icon" />
                                </div>
                                <p>
                                    This Theme was easy to install and configure. When I got stuck, I reached out to support and Alex provided super easy screenshots showing where to go to configure areas I wanted to modify. Fast and friendly support and a beautiful theme to work with.
                                    It was money well spent (and way cheaper than comparable themes bought through shopify).
                                </p>
                                <div class="author flex items-center mt-[60px] sm:mt-[30px]">
                                    <div class="overflow-hidden rounded-full cursor-pointer">
                                        <img class="inline-block lazyload" data-src="assets/img/about.png" alt="icon" />
                                    </div>
                                    <div class="entry-content ml-[10px] text-left">
                                        <div class="text-sm font-semibold">
                                            Customer
                                        </div>
                                        <span class="text-xs">
                                 <p>From Envato</p>
                              </span>
                                    </div>
                                </div>
                            </div>
                            <div class="content px-[15px] md:px-[30px] pt-[20px] pb-[30px] rounded-[20px] wow fadeInUp flex flex-col" data-wow-delay="0.4s">
                                <div class="icon">
                                    <img class="inline-block lazyload" data-src="assets/img/icon.png" alt="icon" />
                                </div>
                                <p>Thanks and again sorry what i early said.</p>
                                <p>
                                    I want to add one more thing please if possible than make video about this theme feature like how to add product search and much more it really help people to know more about theme.
                                </p>
                                <div class="author flex items-center mt-[60px] sm:mt-[30px]">
                                    <div class="overflow-hidden rounded-full cursor-pointer">
                                        <img class="inline-block lazyload" src="assets/img/about.png" alt="icon" />
                                    </div>
                                    <div class="entry-content ml-[10px] text-left">
                                        <div class="text-sm font-semibold">
                                            Customer
                                        </div>
                                        <span class="text-xs">
                                 <p>From Envato</p>
                              </span>
                                    </div>
                                </div>
                            </div>
                            <div class="content px-[15px] md:px-[30px] pt-[20px] pb-[30px] rounded-[20px] wow fadeInUp flex flex-col" data-wow-delay="0.4s">
                                <div class="icon">
                                    <img class="inline-block lazyload" data-src="assets/img/icon.png" alt="icon" />
                                </div>
                                <p>
                                    Our experience with the theme developer was great! Alex was very helpful in guiding us with the theme and accommodating to our requests. Very responsive (within a couple of business days) and straightforward with responses. Thanks again for the great
                                    theme and excellent customer service.
                                </p>
                                <div class="author flex items-center mt-[60px] sm:mt-[30px]">
                                    <div class="overflow-hidden rounded-full cursor-pointer">
                                        <img class="inline-block lazyload" src="assets/img/about.png" alt="icon" />
                                    </div>
                                    <div class="entry-content ml-[10px] text-left">
                                        <div class="text-sm font-semibold">
                                            Customer
                                        </div>
                                        <span class="text-xs">
                                 <p>From Envato</p>
                              </span>
                                    </div>
                                </div>
                            </div>
                            <div class="content px-[15px] md:px-[30px] pt-[20px] pb-[30px] rounded-[20px] wow fadeInUp flex flex-col cus-none" data-wow-delay="0.4s">
                                <div class="icon">
                                    <img class="inline-block lazyload" src="assets/img/icon.png" alt="icon" />
                                </div>
                                <p class="pb-[23px]">
                                    Now i am really happy with My purchase.
                                </p>
                                <p>
                                    First of all sorry what i early say about theme.This theme is really good with excellent support.the team members are very helping and very fast to solve whatever issue i face.
                                </p>
                                <div class="author flex items-center mt-[55px] sm:mt-[30px]">
                                    <div class="overflow-hidden rounded-full cursor-pointer">
                                        <img class="inline-block lazyload" data-src="assets/img/about.png" alt="icon" />
                                    </div>
                                    <div class="entry-content ml-[10px]">
                                        <div class="text-sm font-semibold mb-[6px]">
                                            Customer
                                        </div>
                                        <span class="text-xs">
                                 <p>From Envato</p>
                              </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="customer_2">
                            <div class="content px-[15px] md:px-[30px] pt-[20px] pb-[30px] rounded-[20px] wow fadeInUp flex flex-col" data-wow-delay="0.4s">
                                <div class="icon">
                                    <img class="inline-block lazyload" data-src="assets/img/icon.png" alt="icon" />
                                </div>
                                <p>
                                    Amazing Design. Very thoughtful and easy to navigate. I am also particularly satisfied with the support system. It is very efficient. Enabling Customers upload screenshots for some issues would be a great Plus too!
                                </p>
                                <div class="author flex items-center mt-[60px] sm:mt-[30px]">
                                    <div class="overflow-hidden rounded-full cursor-pointer">
                                        <img class="inline-block lazyload" src="assets/img/about.png" alt="icon" />
                                    </div>
                                    <div class="entry-content ml-[10px] text-left">
                                        <div class="text-sm font-semibold">
                                            Customer
                                        </div>
                                        <span class="text-xs">
                                 <p>From Envato</p>
                              </span>
                                    </div>
                                </div>
                            </div>
                            <div class="content px-[15px] md:px-[30px] pt-[20px] pb-[30px] rounded-[20px] wow fadeInUp flex flex-col" data-wow-delay="0.4s">
                                <div class="icon">
                                    <img class="inline-block lazyload" data-src="assets/img/icon.png" alt="icon" />
                                </div>
                                <p>
                                    Not only a great Shopify theme, Alex fixed our issue wihtin 24h. Thank you very much for help.
                                </p>
                                <div class="author flex items-center mt-[55px] sm:mt-[30px]">
                                    <div class="overflow-hidden rounded-full cursor-pointer">
                                        <img class="inline-block lazyload" src="assets/img/about.png" alt="icon" />
                                    </div>
                                    <div class="entry-content ml-[10px] text-left">
                                        <div class="text-sm font-semibold">
                                            Customer
                                        </div>
                                        <span class="text-xs">
                                 <p>From Envato</p>
                              </span>
                                    </div>
                                </div>
                            </div>
                            <div class="content px-[15px] md:px-[30px] pt-[20px] pb-[30px] rounded-[20px] wow fadeInUp flex flex-col" data-wow-delay="0.4s">
                                <div class="icon">
                                    <img class="inline-block lazyload" data-src="assets/img/icon.png" alt="icon" />
                                </div>
                                <p>
                                    3 Months before i purchased sale hub E-commerce shopify theme. it is very easy customized themes, and support team is also nice response. Thank you sale hub team
                                </p>
                                <div class="author flex items-center mt-[55px] sm:mt-[30px]">
                                    <div class="overflow-hidden rounded-full cursor-pointer">
                                        <img class="inline-block lazyload" src="assets/img/about.png" alt="icon" />
                                    </div>
                                    <div class="entry-content ml-[10px] text-left">
                                        <div class="text-sm font-semibold">
                                            Customer
                                        </div>
                                        <span class="text-xs">
                                 <p>From Envato</p>
                              </span>
                                    </div>
                                </div>
                            </div>
                            <div class="content px-[15px] md:px-[30px] pt-[20px] pb-[30px] rounded-[20px] wow fadeInUp flex flex-col" data-wow-delay="0.4s">
                                <div class="icon">
                                    <img class="inline-block lazyload" data-src="assets/img/icon.png" alt="icon" />
                                </div>
                                <p>
                                    I had a problem with a feature of the website and the support team fixed it right away. The theme is awesome!!
                                </p>
                                <div class="author flex items-center mt-[55px] sm:mt-[30px]">
                                    <div class="overflow-hidden rounded-full cursor-pointer">
                                        <img class="inline-block lazyload" src="assets/img/about.png" alt="icon" />
                                    </div>
                                    <div class="entry-content ml-[10px] text-left">
                                        <div class="text-sm font-semibold">
                                            Customer
                                        </div>
                                        <span class="text-xs">
                                 <p>From Envato</p>
                              </span>
                                    </div>
                                </div>
                            </div>
                            <div class="content px-[15px] md:px-[30px] pt-[20px] pb-[30px] rounded-[20px] wow fadeInUp flex flex-col cus-none" data-wow-delay="0.4s">
                                <div class="icon">
                                    <img class="inline-block lazyload" data-src="assets/img/icon.png" alt="icon" />
                                </div>
                                <p>
                                    Customer service is really fast, and this developer makes great quality themes! I would recommend this theme for all Shopify platforms.
                                </p>
                                <div class="author flex items-center mt-[55px] sm:mt-[30px]">
                                    <div class="overflow-hidden rounded-full cursor-pointer">
                                        <img class="inline-block lazyload" data-src="assets/img/about.png" alt="icon" />
                                    </div>
                                    <div class="entry-content ml-[10px]">
                                        <div class="text-sm font-semibold mb-[6px]">
                                            Customer
                                        </div>
                                        <span class="text-xs">
                                 <p>From Envato</p>
                              </span>
                                    </div>
                                </div>
                            </div>
                            <div class="content px-[15px] md:px-[30px] pt-[20px] pb-[30px] rounded-[20px] wow fadeInUp flex flex-col cus-none" data-wow-delay="0.4s">
                                <div class="icon">
                                    <img class="inline-block lazyload" data-src="assets/img/icon.png" alt="icon" />
                                </div>
                                <p>
                                    Great theme, support and help reply very quickly, thank you, cost-effective theme and service, thank you sincerely
                                </p>
                                <div class="author flex items-center mt-[55px] sm:mt-[30px]">
                                    <div class="overflow-hidden rounded-full cursor-pointer">
                                        <img class="inline-block lazyload" data-src="assets/img/about.png" alt="icon" />
                                    </div>
                                    <div class="entry-content ml-[10px]">
                                        <div class="text-sm font-semibold mb-[6px]">
                                            Customer
                                        </div>
                                        <span class="text-xs">
                                 <p>From Envato</p>
                              </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="customer_3">
                            <div class="content px-[15px] md:px-[30px] pt-[20px] pb-[30px] rounded-[20px] wow fadeInUp flex flex-col" data-wow-delay="0.4s">
                                <div class="icon">
                                    <img class="inline-block lazyload" data-src="assets/img/icon.png" alt="icon" />
                                </div>
                                <p>
                                    I’m very satisfied with this theme, especially its design freedom for users choices: so many possibilities at any step you can imagine for your business. But beyond such qualities (that anyone can see just looking theme page/demo), I must to mention my
                                    satisfaction with the support team: very professional. They clarified many doubts, solved little problems in my configuration and made easier and safer all the process. Thank you!
                                </p>
                                <div class="author flex items-center mt-[55px] sm:mt-[30px]">
                                    <div class="overflow-hidden rounded-full cursor-pointer">
                                        <img class="inline-block lazyload" src="assets/img/about.png" alt="icon" />
                                    </div>
                                    <div class="entry-content ml-[10px] text-left">
                                        <div class="text-sm font-semibold">
                                            Customer
                                        </div>
                                        <span class="text-xs">
                                 <p>From Envato</p>
                              </span>
                                    </div>
                                </div>
                            </div>
                            <div class="content px-[15px] md:px-[30px] pt-[20px] pb-[30px] rounded-[20px] wow fadeInUp flex flex-col" data-wow-delay="0.4s">
                                <div class="icon">
                                    <img class="inline-block lazyload" data-src="assets/img/icon.png" alt="icon" />
                                </div>
                                <p>Great support Alex!</p>
                                <p>
                                    Shopify is a solid platform but once a theme is applied, the templates, assets, and liquid files can be changed and functions shuffled. Alex and Nova-Creative are quick to respond and very efficient. Thanks again Alex.
                                </p>
                                <div class="author flex items-center mt-[55px] sm:mt-[30px]">
                                    <div class="overflow-hidden rounded-full cursor-pointer">
                                        <img class="inline-block lazyload" data-src="assets/img/about.png" alt="icon" />
                                    </div>
                                    <div class="entry-content ml-[10px] text-left">
                                        <div class="text-sm font-semibold">
                                            Customer
                                        </div>
                                        <span class="text-xs">
                                 <p>From Envato</p>
                              </span>
                                    </div>
                                </div>
                            </div>
                            <div class="content px-[15px] md:px-[30px] pt-[20px] pb-[30px] rounded-[20px] wow fadeInUp flex flex-col" data-wow-delay="0.4s">
                                <div class="icon">
                                    <img class="inline-block lazyload" src="assets/img/icon.png" alt="icon" />
                                </div>
                                <p>
                                    Alex Nguyen who is the tech support for the theme settings. We have written 53 emails until now. He is helpful and effective, responsible. Theme is simple and just have basic function, but they can be customized and easy to learn. In all, good and professional.
                                </p>
                                <div class="author flex items-center mt-[55px] sm:mt-[30px]">
                                    <div class="overflow-hidden rounded-full cursor-pointer">
                                        <img class="inline-block lazyload" data-src="assets/img/about.png" alt="icon" />
                                    </div>
                                    <div class="entry-content ml-[10px] text-left">
                                        <div class="text-sm font-semibold">
                                            Customer
                                        </div>
                                        <span class="text-xs">
                                 <p>From Envato</p>
                              </span>
                                    </div>
                                </div>
                            </div>
                            <div class="content px-[15px] md:px-[30px] pt-[20px] pb-[30px] rounded-[20px] wow fadeInUp flex flex-col cus-none" data-wow-delay="0.4s">
                                <div class="icon">
                                    <img class="inline-block lazyload" data-src="assets/img/icon.png" alt="icon" />
                                </div>
                                <p>
                                    Customer service is really fast, and this developer makes great quality themes! I would recommend this theme for all Shopify platforms.
                                </p>
                                <div class="author flex items-center mt-[55px] sm:mt-[30px]">
                                    <div class="overflow-hidden rounded-full cursor-pointer">
                                        <img class="inline-block lazyload" data-src="assets/img/about.png" alt="icon" />
                                    </div>
                                    <div class="entry-content ml-[10px]">
                                        <div class="text-sm font-semibold mb-[6px]">
                                            Customer
                                        </div>
                                        <span class="text-xs">
                                 <p>From Envato</p>
                              </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="customer_4">
                            <div class="content px-[15px] md:px-[30px] pt-[20px] pb-[30px] rounded-[20px] wow fadeInUp flex flex-col" data-wow-delay="0.4s">
                                <div class="icon">
                                    <img class="inline-block lazyload" src="assets/img/icon.png" alt="icon" />
                                </div>
                                <p class="pb-[23px]">
                                    Now i am really happy with My purchase.
                                </p>
                                <p>
                                    First of all sorry what i early say about theme.This theme is really good with excellent support.the team members are very helping and very fast to solve whatever issue i face.
                                </p>
                                <div class="author flex items-center mt-[55px] sm:mt-[30px]">
                                    <div class="overflow-hidden rounded-full cursor-pointer">
                                        <img class="inline-block lazyload" data-src="assets/img/about.png" alt="icon" />
                                    </div>
                                    <div class="entry-content ml-[10px]">
                                        <div class="text-sm font-semibold mb-[6px]">
                                            Customer
                                        </div>
                                        <span class="text-xs">
                                 <p>From Envato</p>
                              </span>
                                    </div>
                                </div>
                            </div>
                            <div class="content px-[15px] md:px-[30px] pt-[20px] pb-[30px] rounded-[20px] wow fadeInUp flex flex-col" data-wow-delay="0.4s">
                                <div class="icon">
                                    <img class="inline-block lazyload" data-src="assets/img/icon.png" alt="icon" />
                                </div>
                                <p>
                                    Customer service is really fast, and this developer makes great quality themes! I would recommend this theme for all Shopify platforms.
                                </p>
                                <div class="author flex items-center mt-[55px] sm:mt-[30px]">
                                    <div class="overflow-hidden rounded-full cursor-pointer">
                                        <img class="inline-block lazyload" data-src="assets/img/about.png" alt="icon" />
                                    </div>
                                    <div class="entry-content ml-[10px]">
                                        <div class="text-sm font-semibold mb-[6px]">
                                            Customer
                                        </div>
                                        <span class="text-xs">
                                 <p>From Envato</p>
                              </span>
                                    </div>
                                </div>
                            </div>
                            <div class="content px-[15px] md:px-[30px] pt-[20px] pb-[30px] rounded-[20px] wow fadeInUp flex flex-col" data-wow-delay="0.4s">
                                <div class="icon">
                                    <img class="inline-block lazyload" data-src="assets/img/icon.png" alt="icon" />
                                </div>
                                <p>
                                    Great theme, support and help reply very quickly, thank you, cost-effective theme and service, thank you sincerely
                                </p>
                                <div class="author flex items-center mt-[55px] sm:mt-[30px]">
                                    <div class="overflow-hidden rounded-full cursor-pointer">
                                        <img class="inline-block lazyload" data-src="assets/img/about.png" alt="icon" />
                                    </div>
                                    <div class="entry-content ml-[10px]">
                                        <div class="text-sm font-semibold mb-[6px]">
                                            Customer
                                        </div>
                                        <span class="text-xs">
                                 <p>From Envato</p>
                              </span>
                                    </div>
                                </div>
                            </div>
                            <div class="content px-[15px] md:px-[30px] pt-[20px] pb-[30px] rounded-[20px] wow fadeInUp flex flex-col" data-wow-delay="0.4s">
                                <div class="icon">
                                    <img class="inline-block lazyload" data-src="assets/img/icon.png" alt="icon" />
                                </div>
                                <p>
                                    Customer service is really fast, and this developer makes great quality themes! I would recommend this theme for all Shopify platforms.
                                </p>
                                <div class="author flex items-center mt-[55px] sm:mt-[30px]">
                                    <div class="overflow-hidden rounded-full cursor-pointer">
                                        <img class="inline-block lazyload" data-src="assets/img/about.png" alt="icon" />
                                    </div>
                                    <div class="entry-content ml-[10px]">
                                        <div class="text-sm font-semibold mb-[6px]">
                                            Customer
                                        </div>
                                        <span class="text-xs">
                                 <p>From Envato</p>
                              </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Frequently Asked Questions  -->
        <div class="frequently pt-[140px]">
            <div class="max-w-[1320px] mx-auto">
                <div class="text-black pb-[68px] text-center">
                    <h2 class="font-extrabold md:text-4xl text-2xl wow fadeInUp" data-wow-delay="0.4s">
                        Frequently Asked Questions
                    </h2>
                </div>
                <div class="policy grid lg:grid-cols-5 grid-cols-2 text-center font-bold overflow-hidden relative text-[#000] text-sm">
                    <div class="item wow fadeInUp" data-wow-delay="0.1s">
                        <div class="icon_policy">
                            <img class="inline-block lazyload" data-src="assets/img/policy-1.png" alt="policy1" />
                        </div>
                        <div class="pt-[31]">
                            <a href="https://documents.vinovathemes.com/furstore-documentation">Documentation</a>
                        </div>
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="0.3s">
                        <div class="icon_policy">
                            <img class="inline-block lazyload" data-src="assets/img/policy-2.png" alt="policy2" />
                        </div>
                        <div class="pt-[31]">
                            <a href="https://1.envato.market/licensepolicy">License Policy</a>
                        </div>
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="0.5s">
                        <div class="icon_policy">
                            <img class="inline-block lazyload" data-src="assets/img/policy-3.png" alt="policy3" />
                        </div>
                        <div class="pt-[31]">
                            <a href="https://1.envato.market/refundpolicy">Refund Policy</a>
                        </div>
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="0.7s">
                        <div class="icon_policy">
                            <img class="inline-block lazyload" data-src="assets/img/policy-4.png" alt="policy4" />
                        </div>
                        <div class="pt-[31]">
                            <a href="https://1.envato.market/vinovathemes">Our Portfolio</a>
                        </div>
                    </div>
                    <div class="item lg:col-span-1 col-span-2 wow fadeInUp" data-wow-delay="0.9s">
                        <div class="icon_policy">
                            <img class="inline-block lazyload" data-src="assets/img/policy-5.png" alt="policy5" />
                        </div>
                        <div class="pt-[31]">
                            <a href="https://documents.vinovathemes.com/furstore-documentation/greeting/full-theme-features">Full Theme Features</a>
                        </div>
                    </div>
                </div>
                <div class="nov-accordion mb-20 pt-[70px] px-[15px] relative overflow-hidden wow fadeInUp" data-wow-delay="0.4s">
                    <div class="accordion-item">
                        <div class="nov-accordion__title cursor-pointer font-semibold act">
                            Error message: zip does not contain a valid theme: missing template “layout/theme.liquid”
                            <span class="font-normal">OR</span> “Unfortunately it gives the error that it exceeds the 50MB transferlimit and doesnt allow it to upload.”
                        </div>
                        <div class="nov-accordion__content" style="display: block">
                            This is a common error when customers download the theme package and upload it immediately with this theme package. First, please
                            <strong class="text-sm font-semibold">extract/unzip</strong> the theme package you download from themeforest. The installation file is located in the
                            <strong class="text-sm font-semibold">Theme folder.</strong>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <div class="nov-accordion__title cursor-pointer font-semibold">
                            I bought the wrong theme, can I get a refund?
                        </div>
                        <div class="nov-accordion__content" style="display: none">
                            When purchasing the wrong theme, please do not download it and immediately submit a refund request. We will check the theme status, if you haven’t downloaded the theme we will refund you. If you have downloaded the theme, you will not receive a refund.
                            Even if we agree to refund you and during that time you download the theme, the refund decision will be reversed.
                        </div>
                    </div>
                    <div class="accordion-item">
                        <div class="nov-accordion__title cursor-pointer font-semibold">
                            What Is The Support Time?
                        </div>
                        <div class="nov-accordion__content" style="display: none">
                            All of your emails will be reviewed and checked manually carefully. However, based on the number support tickets and the nature of the request itself, the response time can be up to 12 – 24 hours (Monday to Friday).
                            <strong class="text-sm font-semibold">Our timezone is GMT+7</strong>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <div class="nov-accordion__title cursor-pointer font-semibold">
                            After installing the theme, will my site be installed with sample data?
                        </div>
                        <div class="nov-accordion__content" style="display: none">
                            Images used and included in this theme are for demo purpose only. COMMERCIAL USAGE IS NOT ALLOWED AND IS AT YOUR OWN RISK.
                        </div>
                    </div>
                    <div class="accordion-item">
                        <div class="nov-accordion__title cursor-pointer font-semibold">
                            Why am I not getting a response after sending support?
                        </div>
                        <div class="nov-accordion__content" style="display: none">
                            Normally we never respond more than 12 - 24 hours after you submit a support request (Except Saturday and Sunday). However, there are some cases where we have responded but customers reflect in the comment that they have not received any emails. Please
                            check some issues:
                            <p>
                                1 - All emails we respond to you are answered via the email you registered for a Themeforest account
                            </p>
                            <p>
                                2 - Please double check the Spam Box section, it is possible that for some reason the email has been queued as spam mail.
                            </p>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <div class="nov-accordion__title cursor-pointer font-semibold">
                            Is the license I bought used forever or has a monthly fee ?
                        </div>
                        <div class="nov-accordion__content" style="display: none">
                            You only need to pay once, no monthly payments
                        </div>
                    </div>
                    <div class="accordion-item">
                        <div class="nov-accordion__title cursor-pointer font-semibold">
                            Do I have to pay for any apps you integrate in the theme?
                        </div>
                        <div class="nov-accordion__content" style="display: none">
                            <p>
                                1 - Save $3200+ with our built-in theme features for Free.You don’t need to pay more for additional Apps
                            </p>
                            <p>
                                2 - There is an app we partner with 3rd party judge.me review, which is a free and paid plan app. If you just use our demo-like features, it's completely free.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="contact pt-[50px] pb-[250px]">
            <div class="max-w-[1320px] mx-auto text-center text-[1.375rem] font-black">
                <h2 class="pb-[9px]">
                    Can't find the answer you are looking for? We're Here to Help!
                </h2>
                <h1 class="uppercase pb-[30px]">We're Here to Help!</h1>
                <div class="content_bottom2 flex justify-center text-[0.6875rem] wow fadeInUp" data-wow-delay="0.4s">
                    <a class="text-[#082e21] min-w-[238px] h-12 leading-[48px] rounded-[3px] bg-white" href="#">
                  <span class="uppercase font-semibold">Contact us now</span>
               </a>
                </div>
            </div>
        </div>
    </main>
    <!-- Footer -->
    <footer id="footer" class="bg-[#091017] relative">
        <div class="max-w-[940px] pb-14 mx-auto text-center">
            <div class="m-5 drop-shadow-footer -translate-y-[100px] rounded-[9px] bg-white justify-center items-center grid md:grid-cols-4 grid-cols-1 md:gap-[30px] p-[30px]">
                <div class="justify-center md:text-left md:pb-[10px] pb-7">
                    <img class="inline-block wow zoomIn lazyload" data-src="assets/img/icon-footer.png" alt="foter" />
                </div>
                <div class="col-span-2 md:text-left md:pb-0 pb-7">
                    <h2 class="pb-[9px] text-[1.375rem] font-extrabold text-[#000] wow fadeInUp" data-wow-delay="0.4s">
                        Suggest Demo That You Love
                    </h2>
                    <span class="text-[#222] font-light wow fadeInUp" data-wow-delay="0.6s">Send us your idea, it may appear
                  on Mate <br />in the next
                  update!</span>
                </div>
                <div class="content_bottom2 flex md:justify-end justify-center text-[0.6875rem] wow fadeInUp" data-wow-delay="0.4s">
                    <a class="text-[#00616a] min-w-[170px] h-12 leading-[48px] rounded-[3px] bg-white" target="_blank" href="#">
                  <span class="font-bold uppercase">Submit your idea</span>
               </a>
                </div>
            </div>
            <div class="footer-center pb-[50px] -mt-5 mx-5 md:flex grid justify-center text-white text-[0.9375rem] font-bold wow fadeInUp" data-wow-delay="0.4s">
                <span class="flex items-center md:mr-[70px]"><span class="icon"><i class="zmdi zmdi-check"></i></span>NO monthly charge</span>
                <span class="flex items-center md:mr-[70px] md:py-0 py-5"><span class="icon"><i
                     class="zmdi zmdi-check"></i></span>No coding knowledge required</span>
                <span class="flex items-center"><span class="icon"><i class="zmdi zmdi-check"></i></span>Premium support
                </span>
            </div>
            <div class="content_bottom flex justify-center font-semibold text-[0.6875rem] wow fadeInUp" data-wow-delay="0.4s">
                <a class="text-[#00616a] min-w-[238px] h-[50px] leading-[50px] rounded-[3px] bg-white" href="https://1.envato.market/vinovathemes">
               <span>EXPLORE ALL OF OUR THEMES</span>
            </a>
            </div>
        </div>
    </footer>
    <script>
        if ($(window).width() > 1023) {
            var scene = $(".scene");
            scene.parallax();
        }
    </script>
</body>

</html>

#include <stdio.h>
#include <dos.h>
#include <conio.h>

int main()
{
    
    int accNumber;
    
    float beginningBal, totalCharges, totalCredits, creditLimit, newBal;
    
    clrscr();
    
    gotoxy(20,4);
    printf("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");
    
    gotoxy(20,5);
    printf("X                                      X");
    
    gotoxy(20,6);
    printf("X                                      X");
    
    gotoxy(20,7);
    printf("X                                      X");
    
    gotoxy(20,8);
    printf("X                                      X");
    
    gotoxy(20,9);
    printf("X                                      X");
    
    gotoxy(20,10);
    printf("X                                      X");
    
    gotoxy(20,11);
    printf("X                                      X");
    
    gotoxy(20,12);
    printf("X                                      X");
    
    gotoxy(20,13);
    printf("X                                      X");
    
    gotoxy(20,14);
    printf("X                                      X");
    
    gotoxy(20,15);
    printf("X                                      X");
    
    gotoxy(20,16);
    printf("X                                      X");
    
    gotoxy(20,17);
    printf("X                                      X");
    
    gotoxy(20,18);
    printf("X                                      X");
    
    gotoxy(20,19);
    printf("X                                      X");
    
    gotoxy(20,20);
    printf("X                                      X");
    
    gotoxy(20,21);
    printf("X                                      X");
    
    gotoxy(20,22);
    printf("X                                      X");
    
    gotoxy(20,23);
    printf("X                                      X");
    
    gotoxy(20,24);
    printf("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");
    
    
    gotoxy(30,6);
    printf("Enter Account Number: ");
    scanf("%d" , &accNumber);
    
    gotoxy(27,8);
    printf("Enter Beginning Balance: ");
    scanf("%f" , &beginningBal);
    
    gotoxy(29,10);
    printf("Enter Total Charges: ");
    scanf("%f" , &totalCharges);
    
    gotoxy(29,12);
    printf("Enter Total Credits: ");
    scanf("%f" , &totalCredits);
    
    gotoxy(29,14);
    printf("Enter Credit Limit: ");
    scanf("%f" , &creditLimit);
    
    newBal= beginningBal + totalCharges - totalCredits;
    
    gotoxy(27,16);
    (newBal>creditLimit)? printf("Credits Limit Exceeded"): printf("Credits Limit Not Exceeded");
    
    gotoxy(31,18);
    printf("Account Number: %d\n" , accNumber);
    gotoxy(32,20);
    printf("Credit Limit: %.2f\n" , creditLimit);
    gotoxy(30,22);
    printf("New Balance: %.2f\n" , newBal);

    getch();
    
    
    return 0;
    
}

#include <stdio.h>
#include <dos.h>
#include <conio.h>

int main()

{
    
    float grossSales, salary, baseSalary=200, commissionRate=.09;
    
    
    clrscr();
    
    gotoxy(25,10);
    printf("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");
    
    gotoxy(25,15);
    printf("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");
    
    gotoxy(25,11);
    printf("X                                 X");
    
    gotoxy(25,12);
    printf("X                                 X");
    
    gotoxy(25,13);
    printf("X                                 X");
    
    gotoxy(25,14);
    printf("X                                 X");
    
    gotoxy(30, 12);
    printf("Enter the Gross Sales: ");
    scanf("%f" , &grossSales);
    
    salary = baseSalary + (grossSales * commissionRate);
    
    gotoxy(30, 13);
    printf("The salary is: %.2f" , salary);

    getch();
    
    return 0;
}

var express = require('express');
var router = express.Router();
const multer = require('multer');
const fs = require('fs')
const path = require('path');
const userDataModel = require('../collection/user')
const userDetailModel = require('../collection/userDetail')

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/');
  },
  filename: (req, file, cb) => {
    cb(null, `${Date.now()}_${file.originalname}`); 
  },
});

const fileFilter = (req, file, cb) => {
  const allowedMimes = ['application/pdf'];
  if (allowedMimes.includes(file.mimetype)) {
    cb(null, true);
  } else {
    cb(new Error('Invalid file type. Only PDF files are allowed.'));
  }
};

const upload = multer({
  storage: storage,
  limits: {
    fileSize: 50 * 1024 * 1024,
  },
  fileFilter: fileFilter,
});


const userRegister = async (req, res,next) => {

  try {

    const registerUser = new userDataModel({
      email: req.body.email,
      password: req.body.password,
    })

    const saveUser = await registerUser.save();

    const userid = saveUser._id;

    const userDetail = new userDetailModel({
      user_id: userid,
      name: req.body.name,
      phone: req.body.phone,
      country: req.body.country,
      additional_info: req.body.additional_info,
      file: req.file.filename,
    })

    const saveUserDetail = await userDetail.save();

    res.status(200).json({
      status:"Success",
      saveUser,
      saveUserDetail,
    })

    
  } catch (error) {
    fs.unlinkSync(req.file.path);
    if (error.name === 'ValidationError') {
      fs.unlinkSync(req.file.path);
      const validationErrors = {};
      for (const key in error.errors) {
        validationErrors[key] = error.errors[key].message;
      }
      return res.status(400).json({ errors: validationErrors });
    }
    console.error(error);
    res.status(500).send('Internal Server Error'); 
  }

}

const userList = async (req, res,next) => {

  try {

      const query = {};
      if (req.query.email) {
        query.email = { $regex: new RegExp(req.query.email, 'i') };
      }
      if (req.query.name) {
        query.name = { $regex: new RegExp(req.query.name, 'i') };
      }
      if (req.query.phone) {
        query.phone = req.query.phone;
      }
      if (req.query.country) {
        query.country = { $regex: new RegExp(req.query.country, 'i') };
      }

        const page = parseInt(req.query.page) || 1;
        const pageSize = parseInt(req.query.pageSize) || 5;

        
        const userDetails = await userDetailModel.aggregate([
          {
            $match: query,
          },
          {
            $lookup: {
              from: 'users',
              localField: 'user_id',
              foreignField: '_id',
              as: 'user',
            },
          },
          // {
          //   $unwind: '$user',
          // },
          {
            $skip: (page - 1) * pageSize,
          },
          {
            $limit: pageSize,
          },
        ]);

        res.json(userDetails);
      
  } catch (error) {
      res.status(500).send('Internal Server Error');
  }

}

const updateUser = async (req, res, next) => {
  try {
    const userId = req.params.id;

    const existingUserDetail = await userDetailModel.findOne({ user_id: userId });

    if (existingUserDetail && existingUserDetail.file) {
      const filePath = path.join('uploads/', existingUserDetail.file);
      fs.unlinkSync(filePath);
    }

    const updateUserData = await userDataModel.findByIdAndUpdate(
      userId,
      {
        email: req.body.email,
        password: req.body.password,
      },
      { new: true }
    );

    if(updateUserData === null){
      res.status(200).json({
        status: 'User Not Found',
      });
    }

    const updateUserDetail = await userDetailModel.findOneAndUpdate(
      { user_id: userId },
      {
        name: req.body.name,
        phone: req.body.phone,
        country: req.body.country,
        additional_info: req.body.additional_info,
        file: req.file.filename,
      },
      { new: true }
    );

    res.status(200).json({
      status: 'Success',
      updateUserData,
      updateUserDetail,
    });
  } catch (error) {
    fs.unlinkSync(req.file.path);
    if (error.name === 'ValidationError') {
      fs.unlinkSync(req.file.path);
      const validationErrors = {};
      for (const key in error.errors) {
        validationErrors[key] = error.errors[key].message;
      }
      return res.status(400).json({ errors: validationErrors });
    }
    console.error(error);
    res.status(500).send('Internal Server Error');
  }
};

const deleteUser = async (req, res, next) => {
  try {

    const userId = req.params.id;

    const deleteUser = await userDataModel.findByIdAndDelete(userId);

    if (!deleteUser) {
      return res.status(404).json({ status: 'Error', message: 'User not found' });
    }

    const deleteUserDetail = await userDetailModel.findOneAndDelete({ user_id: userId });

    if (deleteUserDetail.file) {
      const filePath = path.join('uploads/', deleteUserDetail.file);
      fs.unlinkSync(filePath);
    }

    res.status(200).json({
      status: 'Success',
      message: 'User deleted successfully',
    });
    
  } catch (error) {
    if (error.name === 'ValidationError') {
      const validationErrors = {};
      for (const key in error.errors) {
        validationErrors[key] = error.errors[key].message;
      }
      return res.status(400).json({ errors: validationErrors });
    }
    console.error(error);
    res.status(500).send('Internal Server Error');
  }
};

router.post("/addUser",upload.single('file'), userRegister);
router.get("/userList", userList);
router.put('/updateUser/:id', upload.single('file'), updateUser);
router.delete('/deleteUser/:id', deleteUser);


module.exports = router;

const mongoose = require('mongoose');

function validateEmail(email) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
  }

const userModel = new mongoose.Schema({
    email:{
        type:String,
        require: true,
        unique: true,
        validate: {
            validator: validateEmail,
            message: 'Invalid email format',
        },
    },
    password:{
        type:String,
        require: true
    },
},
{
    timestamps: true
}
);

const userDataModel = mongoose.model('user', userModel);

module.exports = userDataModel;




const mongoose = require('mongoose');

const DetailModel = new mongoose.Schema({

    user_id:{
        type: mongoose.Schema.Types.ObjectId,
        ref:'user',
        required: true,
    },
    name:{
        type:String,
        require: true,
        validate: {
            validator: function(value) {
              const regex = /^[a-zA-Z]+$/;
              return regex.test(value);
            },
            message: 'Invalid characters in the name field. Only alphabets are allowed.'
          }
    },
    phone:{
        type:Number,
        require: true
    },
    country:{
        type:String,
        enum: ['USA', 'Canada', 'UK', 'Australia', 'India', 'Other'],
        require: true
    },
    additional_info:{
        type:String,
        require: true,
        validate: {
            validator: function(value) {
              const regex = /^[a-zA-Z0-9.,@_]+$/;
              return regex.test(value);
            },
            message: 'Invalid characters in additional_info field.'
          }
    },
    file:{
        type:String,
        required: true
    }
},
{
    timestamps: true
}
);

const userDetailModel = mongoose.model('userDetail', DetailModel);

module.exports = userDetailModel;

if(n==1)return v[0];
if(v[0]!=v[1])return v[0];
if(v[n-1]!=v[n-2])return v[n-1];
low=1;high=n-2;
while(low<high)
  {
    mid=high-((high-low)/2);
    if(v[mid]!=v[mid-1] && v[mid]!=v[mid+1])return v[mid];
    if((mid%2==0 && v[mid-1]==v[mid]) || (mid%2==1 && v[mid+1]==v[mid]))
      {
        high=mid-1;
      }
    else if((mid%2==1 && v[mid-1]==v[mid]) || (mid%2==0 && v[mid+1]==v[mid]))
      {
        low=mid+1;
      }
  }
  

int singleNonDuplicate(vector<int>& nums) {
        int ans=0;
        for(int i=0;i<nums.size();i++)
        {
            ans = ans^nums[i];
        }
        return ans;

#include <stdio.h>

float sum(float n1, float n2);
float difference(float n1, float n2);
float product(float n1, float n2);
float quotient(float n1, float n2);

int main() {
    float n1, n2, total;
    char op;

    printf("Enter an operator: ");
    scanf(" %c", &op);

    printf("Enter first number: ");
    scanf("%f", &n1);

    printf("Enter second number: ");
    scanf("%f", &n2);

    switch (op) {
        case '+':
            total = sum(n1, n2);
            printf("The sum is: %.2f\n", total);
            break;
        case '-':
            total = difference(n1, n2);
            printf("The difference is: %.2f\n", total);
            break;
        case '*':
        case 'x':
            total = product(n1, n2);
            printf("The product is: %.2f\n", total);
            break;
        case '/':
        case '÷':
            total = quotient(n1, n2);
            printf("The quotient is: %.2f\n", total);
            break;
        default:
            printf("Invalid operator.\n");
    }

    return 0;
}

float sum(float n1, float n2) {
    return n1 + n2;
}

float difference(float n1, float n2) {
    return n1 - n2;
}

float product(float n1, float n2) {
    return n1 * n2;
}

float quotient(float n1, float n2) {
    if (n2 != 0) {
        return n1 / n2;
    } else {
        printf("Error: Division by zero.\n");
        return 0;
    }
}

import React, { useState } from 'react';

const DataTable = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [data, setData] = useState([
    { name: 'computer', amt: 5000 },
    { name: 'Laptop', amt: 15000 },
    { name: 'electricity', amt: 200000 },
    // ... other data
  ]);

  const handleSearchChange = (event) => {
    setSearchTerm(event.target.value);
  };

  const getFilteredData = () => {
    return data.filter(item =>
      item.name.toLowerCase().includes(searchTerm.toLowerCase())
    );
  };

  return (
    <div>
      <input
        type="search"
        className="search form-control"
        placeholder="Search Category Here..."
        spellCheck="false"
        data-ms-editor="true"
        onChange={handleSearchChange}
        // ... other styles
      />
      <hr />
      <div class="table-responsive">
        <table class="table header-border table-hover table-custom spacing5">
          <thead>
            <tr>
              <th>Name</th>
              <th>Amt</th>
              <th>#</th>
            </tr>
          </thead>
          <tbody>
            {getFilteredData().map((item, index) => (
              <tr key={index}>
                <td>{item.name}</td>
                <td><span>{item.amt.toLocaleString()}</span></td>
                <td>⋮</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default DataTable;

import groceryData from '$lib/data.json';
let groceryItems = groceryData;

var largestLocal = function (grid) {
    let rowLen = grid.length, colLen = grid[0].length
    console.log(rowLen, colLen)
    let mainArr = []
    for (let init = 0; rowLen - init > 2; init++) {
        let childArr = []
        let tem = 0
        for (let col = tem; rowLen - col > 2; col++) {
            let container = []
            for (let sub = init; sub < 3; sub++) {
                let sumTemp = grid[sub].slice(col, 3);
                console.log("sumTemp at ", sub, " is ", sumTemp)
                container.push(...sumTemp)
                console.log("container at ", sub, " is ", container)
            }
            let max = Math.max(...container);
            console.log("max at ", col, " is ", max)
            childArr.push(max)
            console.log("childArr at ", col, " is ", childArr)

        }
        mainArr.push([...childArr])
    }
    return mainArr
};

miG32FcOWH2VOGMQMhHhzbMLLrxgai1718796870

{
  "FFlagHandleAltEnterFullscreenManually": "False",
  "FLogNetwork": "7",
  "DFIntTaskSchedulerTargetFps": "200",
  "DFIntCSGLevelOfDetailSwitchingDistance": "250",
  "DFIntCSGLevelOfDetailSwitchingDistanceL12": "500",
  "DFIntCSGLevelOfDetailSwitchingDistanceL23": "750",
  "DFIntCSGLevelOfDetailSwitchingDistanceL34": "1000",
  "DFFlagTextureQualityOverrideEnabled": "True",
  "DFIntTextureQualityOverride": "2",
  "DFIntDebugFRMQualityLevelOverride": "2",
  "FFlagCoreGuiTypeSelfViewPresent": "False",
  "FFlagInGameMenuV1FullScreenTitleBar": "False",
  "FIntFullscreenTitleBarTriggerDelayMillis": "3600000",
  "FFlagDebugDisplayFPS": "True",
  "FIntRenderShadowIntensity": "0",
  "FFlagDisablePostFx": "True",
  "FFlagDebugDisableTelemetryEphemeralCounter": "True",
  "FFlagDebugDisableTelemetryEphemeralStat": "True",
  "FFlagDebugDisableTelemetryEventIngest": "True",
  "FFlagDebugDisableTelemetryPoint": "True",
  "FFlagDebugDisableTelemetryV2Counter": "True",
  "FFlagDebugDisableTelemetryV2Event": "True",
  "FFlagDebugDisableTelemetryV2Stat": "True"
}

{
  "DFIntTaskSchedulerTargetFps": 5588562,
  "FFlagDebugSkyGray": true,
  "FFlagDebugDisplayFPS": false,
  "DFFlagDebugRenderForceTechnologyVoxel": true,
  "DFFlagDebugPauseVoxelizer": true,
  "FFlagNewLightAttenuation": true,
  "FIntRenderShadowIntensity": 0,
  "FFlagDisablePostFx": true,
  "DFFlagTextureQualityOverrideEnabled": true,
  "DFIntTextureQualityOverride": 0,
  "FIntRenderShadowmapBias": 0,
  "FFlagLuaAppSystemBar": false,
  "FIntFontSizePadding": 3,
  "FFlagAdServiceEnabled": false,
  "FIntScrollWheelDeltaAmount": 25,
  "FFlagDebugDisableTelemetryEphemeralCounter": true,
  "FFlagDebugDisableTelemetryEphemeralStat": true,
  "FFlagDebugDisableTelemetryEventIngest": true,
  "FFlagDebugDisableTelemetryPoint": true,
  "FFlagMSRefactor5": false,
  "FFlagDebugDisableTelemetryV2Counter": true,
  "FFlagDebugDisableTelemetryV2Event": true,
  "FFlagDebugDisableTelemetryV2Stat": true,
  "DFIntCSGLevelOfDetailSwitchingDistance": 1
}

import React, { useState } from 'react';
import { View, Button, Image } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import { GoogleVisionApiKey } from './config';

const App = () => {
  const [image, setImage] = useState(null);
  const [books, setBooks] = useState([]);

  const pickImage = async () => {
    let result = await ImagePicker.launchCameraAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

    if (!result.cancelled) {
      setImage(result.uri);
      analyzeImage(result.uri);
    }
  };

  const analyzeImage = async (uri) => {
    const response = await fetch(uri);
    const blob = await response.blob();

    const formData = new FormData();
    formData.append('file', blob);
    formData.append('key', GoogleVisionApiKey);

    const visionResponse = await fetch(`https://vision.googleapis.com/v1/images:annotate`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        requests: [
          {
            image: {
              content: blob,
            },
            features: [
              { type: 'TEXT_DETECTION', maxResults: 5 },
            ],
          },
        ],
      }),
    });

    const resultJson = await visionResponse.json();
    const detectedTexts = resultJson.responses[0].textAnnotations.map((item) => item.description);
    setBooks(detectedTexts);
  };

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button title="Capture Image" onPress={pickImage} />
      {image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
      {books.length > 0 && (
        <View>
          {books.map((book, index) => (
            <Text key={index}>{book}</Text>
          ))}
        </View>
      )}
    </View>
  );
};

export default App;

import React from 'react'
import { connect } from 'react-redux'

const TodoList = ({ todos }) => ( <ul> {todos.map(todo => <li key={todo.id}>{todo.text}</li>)} </ul> ) const mapStateToProps = state => ({ todos: state.todos })

export default connect(mapStateToProps)(TodoList)

import React from 'react' import ReactDOM from 'react-dom' 
import { Provider } from 'react-redux'
import { createStore } from 'redux' import rootReducer from './reducers' 
import App from './App' 

const store = createStore(rootReducer) 
ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') )

from openai import OpenAI 
import os

MODEL="gpt-4o"
client = OpenAI(api_key=os.environ.get("OPENAI_API_KEY"))

# 1 - Basic Chat

completion = client.chat.completions.create(
  model=MODEL,
  messages=[
    {"role": "system", "content": "You are a helpful assistant. Help me with my math homework!"},
    {"role": "user", "content": "Hello! Could you solve 2+2?"}
  ]
)

print("Assistant: " + completion.choices[0].message.content)

# 2 - Image Processing: Base64
import base64

IMAGE_PATH = "triangle.png"

def encode_image(image_path):
    with open(image_path, "rb") as image_file:
        return base64.b64encode(image_file.read()).decode("utf-8")

base64_image = encode_image(IMAGE_PATH)

response = client.chat.completions.create(
    model=MODEL,
    messages=[
        {"role": "system", "content": "You are a helpful assistant that responds in Markdown. Help me with my math homework!"},
        {"role": "user", "content": [
            {"type": "text", "text": "What's the area of the triangle?"},
            {"type": "image_url", "image_url": {"url": f"data:image/png;base64,{base64_image}"}
            }
        ]}
    ],
    temperature=0.0,
)

print(response.choices[0].message.content)

# 3 - Image Processing: URL
response = client.chat.completions.create(
    model=MODEL,
    messages=[
        {"role": "system", "content": "You are a helpful assistant that responds in Markdown. Help me with my math homework!"},
        {"role": "user", "content": [
            {"type": "text", "text": "What's the area of the triangle?"},
            {"type": "image_url", "image_url": {"url": "https://upload.wikimedia.org/wikipedia/commons/e/e2/The_Algebra_of_Mohammed_Ben_Musa_-_page_82b.png"}
            }
        ]}
    ],
    temperature=0.0,
)

print(response.choices[0].message.content)

# 4 - Summarization: Video Summary
import cv2
from moviepy.editor import VideoFileClip
import time
import base64

VIDEO_PATH = "keynote_recap.mp4"

def process_video(video_path, seconds_per_frame=2):
    base64Frames = []
    base_video_path, _ = os.path.splitext(video_path)

    video = cv2.VideoCapture(video_path)
    total_frames = int(video.get(cv2.CAP_PROP_FRAME_COUNT))
    fps = video.get(cv2.CAP_PROP_FPS)
    frames_to_skip = int(fps * seconds_per_frame)
    curr_frame=0

    while curr_frame < total_frames - 1:
        video.set(cv2.CAP_PROP_POS_FRAMES, curr_frame)
        success, frame = video.read()
        if not success:
            break
        _, buffer = cv2.imencode(".jpg", frame)
        base64Frames.append(base64.b64encode(buffer).decode("utf-8"))
        curr_frame += frames_to_skip
    video.release()

    audio_path = f"{base_video_path}.mp3"
    clip = VideoFileClip(video_path)
    clip.audio.write_audiofile(audio_path, bitrate="32k")
    clip.audio.close()
    clip.close()

    print(f"Extracted {len(base64Frames)} frames")
    print(f"Extracted audio to {audio_path}")
    return base64Frames, audio_path

base64Frames, audio_path = process_video(VIDEO_PATH, seconds_per_frame=1)

response = client.chat.completions.create(
    model=MODEL,
    messages=[
    {"role": "system", "content": "You are generating a video summary. Please provide a summary of the video. Respond in Markdown."},
    {"role": "user", "content": [
        "These are the frames from the video.",
        *map(lambda x: {"type": "image_url", 
                        "image_url": {"url": f'data:image/jpg;base64,{x}', "detail": "low"}}, base64Frames)
        ],
    }
    ],
    temperature=0,
)
print(response.choices[0].message.content)

# 5 - Summarization: Audio Summary
transcription = client.audio.transcriptions.create(
    model="whisper-1",
    file=open(audio_path, "rb"),
)

response = client.chat.completions.create(
    model=MODEL,
    messages=[
    {"role": "system", "content":"""You are generating a transcript summary. Create a summary of the provided transcription. Respond in Markdown."""},
    {"role": "user", "content": [
        {"type": "text", "text": f"The audio transcription is: {transcription.text}"}
        ],
    }
    ],
    temperature=0,
)
print(response.choices[0].message.content)

# 6 - Summarization: Audio + Visual Summary
response = client.chat.completions.create(
    model=MODEL,
    messages=[
    {"role": "system", "content":"""You are generating a video summary. Create a summary of the provided video and its transcript. Respond in Markdown"""},
    {"role": "user", "content": [
        "These are the frames from the video.",
        *map(lambda x: {"type": "image_url", 
                        "image_url": {"url": f'data:image/jpg;base64,{x}', "detail": "low"}}, base64Frames),
                        {"type": "text", "text": f"The audio transcription is: {transcription.text}"}
        ],
    }
],
    temperature=0,
)
print(response.choices[0].message.content)

# 7 - Q&A: Visual Q&A
QUESTION = "Question: Why did Sam Altman have an example about raising windows and turning the radio on?"

qa_visual_response = client.chat.completions.create(
    model=MODEL,
    messages=[
    {"role": "system", "content": "Use the video to answer the provided question. Respond in Markdown."},
    {"role": "user", "content": [
        "These are the frames from the video.",
        *map(lambda x: {"type": "image_url", "image_url": {"url": f'data:image/jpg;base64,{x}', "detail": "low"}}, base64Frames),
        QUESTION
        ],
    }
    ],
    temperature=0,
)
print("Visual QA:\n" + qa_visual_response.choices[0].message.content)

# 8 - Q&A: Audio Q&A
qa_audio_response = client.chat.completions.create(
    model=MODEL,
    messages=[
    {"role": "system", "content":"""Use the transcription to answer the provided question. Respond in Markdown."""},
    {"role": "user", "content": f"The audio transcription is: {transcription.text}. \n\n {QUESTION}"},
    ],
    temperature=0,
)
print("Audio QA:\n" + qa_audio_response.choices[0].message.content)

# 11 - Q&A: Visual + Audio Q&A
qa_both_response = client.chat.completions.create(
    model=MODEL,
    messages=[
    {"role": "system", "content":"""Use the video and transcription to answer the provided question."""},
    {"role": "user", "content": [
        "These are the frames from the video.",
        *map(lambda x: {"type": "image_url", 
                        "image_url": {"url": f'data:image/jpg;base64,{x}', "detail": "low"}}, base64Frames),
                        {"type": "text", "text": f"The audio transcription is: {transcription.text}"},
        QUESTION
        ],
    }
    ],
    temperature=0,
)
print("Both QA:\n" + qa_both_response.choices[0].message.content)

// Get user media
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    const localVideo = document.getElementById('localVideo');
    localVideo.srcObject = stream;

    const peerConnection = new RTCPeerConnection();
    stream.getTracks().forEach(track => peerConnection.addTrack(track, stream));

    // Set up ICE handling
    peerConnection.onicecandidate = event => {
      if (event.candidate) {
        // Send the candidate to the remote peer
        sendToServer({ type: 'candidate', candidate: event.candidate });
      }
    };

    // When remote stream arrives
    peerConnection.ontrack = event => {
      const remoteVideo = document.getElementById('remoteVideo');
      remoteVideo.srcObject = event.streams[0];
    };

    // Create an offer to connect
    peerConnection.createOffer()
      .then(offer => peerConnection.setLocalDescription(offer))
      .then(() => {
        // Send the offer to the remote peer
        sendToServer({ type: 'offer', offer: peerConnection.localDescription });
      });

    // Handle offer from a remote peer
    receiveFromServer(message => {
      if (message.type === 'offer') {
        peerConnection.setRemoteDescription(new RTCSessionDescription(message.offer))
          .then(() => peerConnection.createAnswer())
          .then(answer => peerConnection.setLocalDescription(answer))
          .then(() => {
            // Send the answer to the remote peer
            sendToServer({ type: 'answer', answer: peerConnection.localDescription });
          });
      } else if (message.type === 'answer') {
        peerConnection.setRemoteDescription(new RTCSessionDescription(message.answer));
      } else if (message.type === 'candidate') {
        peerConnection.addIceCandidate(new RTCIceCandidate(message.candidate));
      }
    });
  })
  .catch(error => {
    console.error('Error accessing media devices.', error);
  });

function sendToServer(message) {
  // Implement server communication to exchange messages
}

function receiveFromServer(callback) {
  // Implement server communication to receive messages
}

if(Object.keys(user).length > 0){
    console.log('objec has values')
}

# dictionary comprehension example
square_dict = {num: num*num for num in range(1, 11)}
print(square_dict)

Sub RemoveEmptyLines()
    Dim para As Paragraph
    For Each para In ActiveDocument.Paragraphs
        If Len(para.Range.Text) <= 1 Then
            para.Range.Delete
        End If
    Next para
End Sub

    Source = Odbc.DataSource("dsn=SNOWFLAKE", [HierarchicalNavigation=true]),

! Create restart file with initial condition
program InitCond

  use ModDataTypes
  use ModDataStruct
  use ModRbc
  use ModWall
  use ModConf
  use ModData
  use ModIO
  use ModBasicMath
  use ModPostProcess
  ! use MPI

  implicit none

  integer, parameter :: nrbcMax = 128
  integer, parameter :: nwallMax = 4
  type(t_rbc), pointer :: rbc
  type(t_rbc)         :: rbcRef
  type(t_wall), pointer :: wall
  real(WP) :: radEqv, szCell(3)
  integer :: nlat0, nlat1, ii
  real(WP) :: theta, th, rc, xc(3), ztemp
  real(WP) :: xmin, xmax, ymin, ymax, zmin, zmax
  integer :: iz, i, p, l, dealias
  integer, parameter :: ranseed = 161269
  character(CHRLEN) :: fn
  ! real = double, fp
  real :: lengtube, lengspacing, phi, actlen
  real(WP) :: rand(27, 3), minDist, platRad, platDiam
  real :: wbcs(2), tubeDiam, layerx(3), layery(3), halflen

  ! Initialize
  call InitMPI
  ! Allocate working arrays
  allocate (rbcs(nrbcMax))
  ! allocate(walls(nwallMax))

  tubeDiam = 4

  nrbc = 1
  nlat0 = 6
  dealias = 3
  phi = 70/real(100)
  ! 11.34
  lengtube = 5 ! nrbc/real(phi) !XXLL

  lengspacing = lengtube/Real(nrbc)
  ! print *, "1"
  nwall = 1
  allocate (walls(nwall))
  wall => walls(1)

  call ReadWallMesh('Input/new_cyl_D6_L13_33.e', wall)
  actlen = 13.33
  wall%f = 0.
  do i = 1, wall%nvert
    th = ATAN2(wall%x(i, 1), wall%x(i, 2))
    wall%x(i, 1) = (tubeDiam/2.0)*COS(th)    !!!!!!!!!
    wall%x(i, 2) = (tubeDiam/2.0)*SIN(th)    !!!!!!!!!
    wall%x(i, 3) = lengtube/actlen*wall%x(i, 3)
  end do

  xmin = minval(wall%x(:, 1))
  xmax = maxval(wall%x(:, 1))

  ymin = minval(wall%x(:, 2))
  ymax = maxval(wall%x(:, 2))

  zmin = minval(wall%x(:, 3))
  zmax = maxval(wall%x(:, 3))

  ! size of the periodic box
  Lb(1) = xmax - xmin + 0.5
  Lb(2) = Lb(1)
  Lb(3) = zmax - zmin
  lengtube = Lb(3)

  print *, "Lb", Lb(:)
  !  Lb   8.3013429849047267        8.3013429849047267        11.347517730496456
  ! lengspacing = lengtube/real(nrbc)
  print *, 'lengtube 2', lengtube
  print *, 'lengspacing 2', lengspacing

  ! Reference cell i
  xc = 0.

  radEqv = 1.0
  platRad = .3

  print *, "platRad", platRad

  call Rbc_Create(rbcRef, nlat0, dealias)
  call Rbc_MakePlatelet(rbcRef, platRad, xc)

  do ii = 1, 3
    ! dimensions of cell !
    szCell(ii) = maxval(rbcRef%x(:, :, ii)) - minval(rbcRef%x(:, :, ii))
  end do
  if (rootWorld) then
    print *, "szCell", szCell
  end if

  ! place cells
  do iz = 1, nrbc
    xc(1:2) = 0.
    xc(3) = 1
    print *, 'platelet iz:', iz, 'xc:', xc
    rbc => rbcs(iz)
    rbc%celltype = 3
    print *, nlat0, dealias, platRad, xc
    call Rbc_Create(rbc, nlat0, dealias)
    call Rbc_MakePlatelet(rbc, platRad, xc)
  end do

  ! Put things in the middle of the periodic box
  call Recenter_Cells_and_Walls

  ! platDiam = GetDiameter(3)

  ! Output
  write (*, '(A,3F10.3)') 'Periodic domain size = ', Lb

  Nt0 = 0; time = 0.
  vBkg(1:2) = 0.; vBkg(3) = 8.

  ! Write intial conditions
  if (nrbc > 0) then
    write (fn, FMT=fn_FMT) 'D/', 'x', 0, '.dat'
    call WriteManyRBCs(fn, nrbc, rbcs)

    write(fn, FMT=fn_FMT) 'D/', '3x', 0, '.dat'
    call WriteManyRBCsByType(fn, nrbc, rbcs, 3)

    write (*, '(A,A)') 'Cell file: ', trim(fn)

    fn = 'D/restart.LATEST.dat'
    call WriteRestart(fn, Nt0, time)
    write (*, '(A,A)') 'Binary restart file: ', trim(fn)
  end if

  if (nwall > 0) then
    write (fn, FMT=fn_FMT) 'D/', 'wall', 0, '.dat'
    call WriteManyWalls(fn, nwall, walls)
    write (*, '(A,A)') 'Wall file: ', trim(fn)
  end if

  write (fn, FMT=fn_FMT) 'D/', 'restart', Nt0, '.dat'
  call WriteRestart(fn, Nt0, time)
  write (*, '(A,A)') 'Binary restart file: ', trim(fn)

  ! Deallocate working arrays
  deallocate (rbcs)

  ! Finalize
  call FinalizeMPI

  stop

contains
  subroutine Recenter_Cells_and_Walls
    integer :: irbc, iwall, ii, gen, repeat, j
    real :: x, y, a
    real, parameter :: PI = 3.14159265359
    type(t_rbc), pointer :: rbc
    type(t_wall), pointer :: wall
    real(WP) :: xmin(3), xmax(3), xc(3), xmax2, ymax2

    ! cells
    ! translate cells
    do irbc = 1, nrbc
      rbc => rbcs(irbc)
      rbc%x(:, :, 1) = rbc%x(:, :, 1) + 0.5*Lb(1)
      rbc%x(:, :, 2) = rbc%x(:, :, 2) + 0.5*Lb(2)
      print *, 'Zc', sum(rbc%x(:, :, 3))/real(rbc%nlat*rbc%nlon)
    end do

    ! walls
    ! find the bounding box
    xmin = 1.D10
    xmax = -1.D10
    do iwall = 1, nwall
      print *, "iwall", iwall
      wall => walls(iwall)
      do ii = 1, 3
        xmin(ii) = min(xmin(ii), minval(wall%x(:, ii)))
        xmax(ii) = max(xmax(ii), maxval(wall%x(:, ii)))
      end do
    end do
    xc = 0.5*(xmin + xmax)

    ! translate walls
    do iwall = 1, nwall
      wall => walls(iwall)
      do ii = 1, 3
        wall%x(:, ii) = wall%x(:, ii) + 0.5*Lb(ii) - xc(ii)
      end do
    end do

    xmax2 = maxval(wall%x(:, 1))
    print *, "xmax2: ", xmax2

    ymax2 = maxval(wall%x(:, 2))
    print *, "ymax2: ", ymax2

  end subroutine Recenter_Cells_and_Walls

end program InitCond

! Create restart file with initial condition
program InitCond

  use ModDataTypes
  use ModDataStruct
  use ModRbc
  use ModWall
  use ModConf
  use ModData
  use ModIO
  use ModBasicMath
  use ModPostProcess
  ! use MPI

  implicit none

  integer, parameter :: nrbcMax = 128
  integer, parameter :: nwallMax = 4
  type(t_rbc), pointer :: rbc
  type(t_rbc)         :: rbcRef
  type(t_wall), pointer :: wall
  real(WP) :: radEqv, szCell(3)
  integer :: nlat0, nlat1, ii
  real(WP) :: theta, th, rc, xc(3), ztemp
  real(WP) :: xmin, xmax, ymin, ymax, zmin, zmax
  integer :: iz, i, p, l, dealias
  integer, parameter :: ranseed = 161269
  character(CHRLEN) :: fn
  ! real = double, fp
  real :: lengtube, lengspacing, phi, actlen
  real(WP) :: rand(27, 3), minDist, platRad, platDiam
  real :: wbcs(2), tubeDiam, layerx(3), layery(3), halflen

  ! Initialize
  call InitMPI
  ! Allocate working arrays
  allocate (rbcs(nrbcMax))
  ! allocate(walls(nwallMax))

  tubeDiam = 4

  nrbc = 1
  nlat0 = 6
  dealias = 3
  phi = 70/real(100)
  ! 11.34
  lengtube = 5 ! nrbc/real(phi) !XXLL

  lengspacing = lengtube/Real(nrbc)
  ! print *, "1"
  nwall = 1
  allocate (walls(nwall))
  wall => walls(1)

  call ReadWallMesh('Input/new_cyl_D6_L13_33.e', wall)
  actlen = 13.33
  wall%f = 0.
  do i = 1, wall%nvert
    th = ATAN2(wall%x(i, 1), wall%x(i, 2))
    wall%x(i, 1) = (tubeDiam/2.0)*COS(th)    !!!!!!!!!
    wall%x(i, 2) = (tubeDiam/2.0)*SIN(th)    !!!!!!!!!
    wall%x(i, 3) = lengtube/actlen*wall%x(i, 3)
  end do

  xmin = minval(wall%x(:, 1))
  xmax = maxval(wall%x(:, 1))

  ymin = minval(wall%x(:, 2))
  ymax = maxval(wall%x(:, 2))

  zmin = minval(wall%x(:, 3))
  zmax = maxval(wall%x(:, 3))

  ! size of the periodic box
  Lb(1) = xmax - xmin + 0.5
  Lb(2) = Lb(1)
  Lb(3) = zmax - zmin
  lengtube = Lb(3)

  print *, "Lb", Lb(:)
  !  Lb   8.3013429849047267        8.3013429849047267        11.347517730496456
  ! lengspacing = lengtube/real(nrbc)
  print *, 'lengtube 2', lengtube
  print *, 'lengspacing 2', lengspacing

  ! Reference cell i
  xc = 0.

  radEqv = 1.0
  platRad = .3

  print *, "platRad", platRad

  call Rbc_Create(rbcRef, nlat0, dealias)
  call Rbc_MakePlatelet(rbcRef, platRad, xc)

  do ii = 1, 3
    ! dimensions of cell !
    szCell(ii) = maxval(rbcRef%x(:, :, ii)) - minval(rbcRef%x(:, :, ii))
  end do
  if (rootWorld) then
    print *, "szCell", szCell
  end if

  ! place cells
  do iz = 1, nrbc
    xc(1:2) = 0.
    xc(3) = 1
    print *, 'platelet iz:', iz, 'xc:', xc
    rbc => rbcs(iz)
    rbc%celltype = 3
    print *, nlat0, dealias, platRad, xc
    call Rbc_Create(rbc, nlat0, dealias)
    call Rbc_MakePlatelet(rbc, platRad, xc)
  end do

  ! Put things in the middle of the periodic box
  call Recenter_Cells_and_Walls

  ! platDiam = GetDiameter(3)

  ! Output
  write (*, '(A,3F10.3)') 'Periodic domain size = ', Lb

  Nt0 = 0; time = 0.
  vBkg(1:2) = 0.; vBkg(3) = 8.

  ! Write intial conditions
  if (nrbc > 0) then
    write (fn, FMT=fn_FMT) 'D/', 'x', 0, '.dat'
    call WriteManyRBCs(fn, nrbc, rbcs)

    write(fn, FMT=fn_FMT) 'D/', '3x', 0, '.dat'
    call WriteManyRBCsByType(fn, nrbc, rbcs, 3)

    write (*, '(A,A)') 'Cell file: ', trim(fn)

    fn = 'D/restart.LATEST.dat'
    call WriteRestart(fn, Nt0, time)
    write (*, '(A,A)') 'Binary restart file: ', trim(fn)
  end if

  if (nwall > 0) then
    write (fn, FMT=fn_FMT) 'D/', 'wall', 0, '.dat'
    call WriteManyWalls(fn, nwall, walls)
    write (*, '(A,A)') 'Wall file: ', trim(fn)
  end if

  write (fn, FMT=fn_FMT) 'D/', 'restart', Nt0, '.dat'
  call WriteRestart(fn, Nt0, time)
  write (*, '(A,A)') 'Binary restart file: ', trim(fn)

  ! Deallocate working arrays
  deallocate (rbcs)

  ! Finalize
  call FinalizeMPI

  stop

contains
  subroutine Recenter_Cells_and_Walls
    integer :: irbc, iwall, ii, gen, repeat, j
    real :: x, y, a
    real, parameter :: PI = 3.14159265359
    type(t_rbc), pointer :: rbc
    type(t_wall), pointer :: wall
    real(WP) :: xmin(3), xmax(3), xc(3), xmax2, ymax2

    ! cells
    ! translate cells
    do irbc = 1, nrbc
      rbc => rbcs(irbc)
      rbc%x(:, :, 1) = rbc%x(:, :, 1) + 0.5*Lb(1)
      rbc%x(:, :, 2) = rbc%x(:, :, 2) + 0.5*Lb(2)
      print *, 'Zc', sum(rbc%x(:, :, 3))/real(rbc%nlat*rbc%nlon)
    end do

    ! walls
    ! find the bounding box
    xmin = 1.D10
    xmax = -1.D10
    do iwall = 1, nwall
      print *, "iwall", iwall
      wall => walls(iwall)
      do ii = 1, 3
        xmin(ii) = min(xmin(ii), minval(wall%x(:, ii)))
        xmax(ii) = max(xmax(ii), maxval(wall%x(:, ii)))
      end do
    end do
    xc = 0.5*(xmin + xmax)

    ! translate walls
    do iwall = 1, nwall
      wall => walls(iwall)
      do ii = 1, 3
        wall%x(:, ii) = wall%x(:, ii) + 0.5*Lb(ii) - xc(ii)
      end do
    end do

    xmax2 = maxval(wall%x(:, 1))
    print *, "xmax2: ", xmax2

    ymax2 = maxval(wall%x(:, 2))
    print *, "ymax2: ", ymax2

  end subroutine Recenter_Cells_and_Walls

end program InitCond

! Create restart file with initial condition
program InitCond

  use ModDataTypes
  use ModDataStruct
  use ModRbc
  use ModWall
  use ModConf
  use ModData
  use ModIO
  use ModBasicMath
  use ModPostProcess
  ! use MPI

  implicit none

  integer, parameter :: nrbcMax = 128
  integer, parameter :: nwallMax = 4
  type(t_rbc), pointer :: rbc
  type(t_rbc)         :: rbcRef
  type(t_wall), pointer :: wall
  real(WP) :: radEqv, szCell(3)
  integer :: nlat0, nlat1, ii
  real(WP) :: theta, th, rc, xc(3), ztemp
  real(WP) :: xmin, xmax, ymin, ymax, zmin, zmax
  integer :: iz, i, p, l, dealias
  integer, parameter :: ranseed = 161269
  character(CHRLEN) :: fn
  ! real = double, fp
  real :: lengtube, lengspacing, phi, actlen
  real(WP) :: rand(27, 3), minDist, platRad, platDiam
  integer :: j, ierr, half2, index, layer, newiz
  real :: wbcs(2), tubeDiam, layerx(3), layery(3), halflen

  ! Initialize
  call InitMPI
  ! Allocate working arrays
  allocate (rbcs(nrbcMax))
  ! allocate(walls(nwallMax))

  tubeDiam = 22.0/2.82 ! 7.8, rad = 4

  nrbc = 24
  nlat0 = 12
  nlat1 = 6
  dealias = 3
  phi = 70/real(100)
  ! 11.34
  lengtube = 32.0/2.82 ! nrbc/real(phi) !XXLL

  lengspacing = (lengtube - ((2.62/2.82)*9))/9 ! lengtube/Real(nrbc)
  ! print *, "1"
  nwall = 1
  allocate (walls(nwall))
  wall => walls(1)

  call ReadWallMesh('Input/new_cyl_D6_L13_33.e', wall)
  actlen = 13.33
  wall%f = 0.
  do i = 1, wall%nvert
    th = ATAN2(wall%x(i, 1), wall%x(i, 2))
    wall%x(i, 1) = (tubeDiam/2.0)*COS(th)    !!!!!!!!!
    wall%x(i, 2) = (tubeDiam/2.0)*SIN(th)    !!!!!!!!!
    wall%x(i, 3) = lengtube/actlen*wall%x(i, 3)
  end do

  xmin = minval(wall%x(:, 1))
  xmax = maxval(wall%x(:, 1))

  ymin = minval(wall%x(:, 2))
  ymax = maxval(wall%x(:, 2))

  zmin = minval(wall%x(:, 3))
  zmax = maxval(wall%x(:, 3))

  ! size of the periodic box
  Lb(1) = xmax - xmin + 0.5
  Lb(2) = Lb(1)
  Lb(3) = zmax - zmin
  lengtube = Lb(3)

  print *, "Lb", Lb(:)
  !  Lb   8.3013429849047267        8.3013429849047267        11.347517730496456
  ! lengspacing = lengtube/real(nrbc)
  print *, 'lengtube 2', lengtube
  print *, 'lengspacing 2', lengspacing

  ! Reference cell i
  xc = 0.

  radEqv = 1.0
  platRad = .3

  print *, "nlat1", nlat1, "platRad", platRad

  call Rbc_Create(rbcRef, nlat1, dealias)
  call Rbc_MakePlatelet(rbcRef, platRad, xc)

  do ii = 1, 3
    ! dimensions of cell !
    szCell(ii) = maxval(rbcRef%x(:, :, ii)) - minval(rbcRef%x(:, :, ii))
  end do
  if (rootWorld) then
    print *, "szCell", szCell
  end if

  layerx = (/-1.63, 1.63, 0.0/)
  layery = (/-.943, -.943, 1.89/)

  ! place cells
  do iz = 1, nrbc
    index = (modulo(iz, 3) + 1)
    layer = (iz - 1)/3
    xc(1) = layerx(index) ! + ((rand(iz, 1) - 0.2) - 0.4)
    xc(2) = layery(index) ! + ((rand(iz, 2) - 0.2) - 0.4)
    xc(3) = (layer + .5) + (.5*layer) ! + ((rand(iz, 3) - 0.5)/3)
    if (iz == 20) then
      print *, 'platelet iz:', iz, 'index: ', index, "layer: ", layer, 'xc:', xc
      rbc => rbcs(iz)
      rbc%celltype = 3
      call Rbc_Create(rbc, nlat1, dealias)
      call Rbc_MakePlatelet(rbc, platRad, xc)
    else
      print *, 'iz:', iz, 'index: ', index, "layer: ", layer, 'xc:', xc
      rbc => rbcs(iz)
      rbc%celltype = 1
      call Rbc_Create(rbc, nlat0, dealias)
      call Rbc_MakeBiConcave(rbc, radEqv, xc)
    end if
  end do

  ! Put things in the middle of the periodic box
  call Recenter_Cells_and_Walls

  ! platDiam = GetDiameter(3)

  ! Output
  write (*, '(A,3F10.3)') 'Periodic domain size = ', Lb

  Nt0 = 0; time = 0.
  vBkg(1:2) = 0.; vBkg(3) = 8.

  ! Write intial conditions
  if (nrbc > 0) then
    write (fn, FMT=fn_FMT) 'D/', 'x', 0, '.dat'
    call WriteManyRBCs(fn, nrbc, rbcs)

    write(fn, FMT=fn_FMT) 'D/', '3x', 0, '.dat'
    call WriteManyRBCsByType(fn, nrbc, rbcs, 3)

    write (*, '(A,A)') 'Cell file: ', trim(fn)

    fn = 'D/restart.LATEST.dat'
    call WriteRestart(fn, Nt0, time)
    write (*, '(A,A)') 'Binary restart file: ', trim(fn)
  end if

  if (nwall > 0) then
    write (fn, FMT=fn_FMT) 'D/', 'wall', 0, '.dat'
    call WriteManyWalls(fn, nwall, walls)
    write (*, '(A,A)') 'Wall file: ', trim(fn)
  end if

  write (fn, FMT=fn_FMT) 'D/', 'restart', Nt0, '.dat'
  call WriteRestart(fn, Nt0, time)
  write (*, '(A,A)') 'Binary restart file: ', trim(fn)

  ! Deallocate working arrays
  deallocate (rbcs)

  ! Finalize
  call FinalizeMPI

  stop

contains
  subroutine Recenter_Cells_and_Walls
    integer :: irbc, iwall, ii, gen, repeat, j
    real :: x, y, a
    real, parameter :: PI = 3.14159265359
    type(t_rbc), pointer :: rbc
    type(t_wall), pointer :: wall
    real(WP) :: xmin(3), xmax(3), xc(3), xmax2, ymax2

    ! cells
    ! translate cells
    do irbc = 1, nrbc
      rbc => rbcs(irbc)
      rbc%x(:, :, 1) = rbc%x(:, :, 1) + 0.5*Lb(1)
      rbc%x(:, :, 2) = rbc%x(:, :, 2) + 0.5*Lb(2)
      print *, 'Zc', sum(rbc%x(:, :, 3))/real(rbc%nlat*rbc%nlon)
    end do

    ! walls
    ! find the bounding box
    xmin = 1.D10
    xmax = -1.D10
    do iwall = 1, nwall
      print *, "iwall", iwall
      wall => walls(iwall)
      do ii = 1, 3
        xmin(ii) = min(xmin(ii), minval(wall%x(:, ii)))
        xmax(ii) = max(xmax(ii), maxval(wall%x(:, ii)))
      end do
    end do
    xc = 0.5*(xmin + xmax)

    ! translate walls
    do iwall = 1, nwall
      wall => walls(iwall)
      do ii = 1, 3
        wall%x(:, ii) = wall%x(:, ii) + 0.5*Lb(ii) - xc(ii)
      end do
    end do

    xmax2 = maxval(wall%x(:, 1))
    print *, "xmax2: ", xmax2

    ymax2 = maxval(wall%x(:, 2))
    print *, "ymax2: ", ymax2

  end subroutine Recenter_Cells_and_Walls

end program InitCond

{
  "trailingComma": "none",
  "overrides": [
    {
      "files": "**/lwc/**/*.html",
      "options": {
        "tabWidth": 4,
        "parser": "lwc"
      }
    },
    {
      "files": "**/*.{cls,trigger,apex}",
      "options": {
        "apexInsertFinalNewline": true,
        "printWidth": 140,
        "tabWidth": 4
      }
    },
    {
      "files": "*.{cmp,page,component}",
      "options": {
        "parser": "html",
        "tabWidth": 4
      }
    }
  ]
}

function combinations(arr, len) {
    let tempArry = []
    let final = []
    for (let i = 0; i < arr.length; i++) {
        //console.log("i ", i)
        if ((arr.length - i) == (len - 1)) {
            break
        }
        tempArry.push(arr[i])
        for (let j = i + 1; j < arr.length; j++) {
            //console.log("j ", j)
            tempArry.push(arr[j])
            //console.log("tempArry ", tempArry)
            if (tempArry.length == len) {
                //console.log("tempArry inside if ", tempArry)
                final.push([...tempArry])
                //console.log("final inside if ", final)
                tempArry.pop()
            }
        }
        tempArry = []
    }
    //console.log("final ", final)
    return final
}

function getPermutations(arr, outputLength) {
  const results = [];

  function permute(currentArr, remaining) {
    if (currentArr.length === outputLength) {
      results.push([...currentArr]); // Copy current arrangement to avoid mutation
      return;
    }

    for (let i = 0; i < remaining.length; i++) {
      const nextElement = remaining[i];
      const remainingCopy = [...remaining]; // Copy to avoid mutation
      remainingCopy.splice(i, 1);
      permute([...currentArr, nextElement], remainingCopy);
    }
  }

  permute([], arr);
  return results;
}

function processor(ind, finalQuality, mapWages, combOfWage) {
    let currentQua1 = finalQuality[ind]
    let currentWage1 = combOfWage[ind]
    //let currentWage1 = mapWages.get(finalQuality[ind])
    let after = Number(ind) + 1
    let afterQua = finalQuality[after]
    let afterWage1 = combOfWage[after]
    //let afterWage1 = mapWages.get(finalQuality[after])
    let g = afterQua / currentQua1
    combOfWage[after] = (g * currentWage1)
    //mapWages.set(afterQua, (g * currentWage1))
}
var mincostToHireWorkers = function (quality, wage, k) {
    let accumulate = 0
    let mapWages = new Map()
    for (const f in quality) {
        mapWages.set(quality[f], wage[f])
    }
    let resAccu = []
    console.log(mapWages)

    // let comb = combinations(quality, k)
    // console.log("comb ", comb)
    // let combOfWages = combinations(wage, k)
    // console.log("combOfWages ", combOfWages)

    let comb = getPermutations(quality, k)
    console.log("comb ", comb)
    let combOfWages = getPermutations(wage, k)
    console.log("combOfWages ", combOfWages)

    for (const g in comb) {
        let SortedQuality = comb[g]
        let combOfWage = combOfWages[g]
        console.log("SortedQuality is ", SortedQuality)
        let finalQuality = SortedQuality
        console.log("finalQuality is ", finalQuality)
        for (let i = finalQuality.length - 1; i >= 0; i--) {
            let prev = Number(i) - 1
            console.log("prev ", prev)
            let currentQua = finalQuality[i]
            console.log("currentQua ", currentQua)
            let currentWage = combOfWages[g][i]
            //let currentWage = mapWages.get(finalQuality[i])
            console.log("currentWage ", currentWage)
            if (i > 0) {
                let prevQua = finalQuality[prev]
                console.log("prevQua ", prevQua)
                let prevWage = combOfWages[g][prev]
                //let prevWage = mapWages.get(finalQuality[prev])
                console.log("prevWage ", prevWage)
                let ntha = currentQua / prevQua
                console.log("ntha ", ntha)
                let x = (currentWage * prevQua) / currentQua
                console.log("x ", x)
                if (x < prevWage) {
                    combOfWages[g][i] = (ntha * prevWage)
                    console.log("combOfWages[g][i] is ", combOfWages[g][i])
                    //mapWages.set(currentQua, (ntha * prevWage))
                    for (let k = i; k < finalQuality.length; k++) {
                        processor(k, finalQuality, mapWages,combOfWage )
                    }
                } else if (x > prevWage) {
                    accumulate = accumulate + currentWage
                    combOfWages[g][prev] = x
                    //mapWages.set(prevQua, x)
                } else if (x == prevWage) {
                    accumulate = accumulate + currentWage
                }
            } else {
                accumulate = accumulate + currentWage
            }
            console.log("accumulate ", accumulate)

        }
        accumulate = 0
        for (const l in finalQuality) {
            accumulate = accumulate + combOfWages[g][l]
            console.log("last finalQuality", finalQuality)
            console.log("last accumulate", accumulate)
            //accumulate = accumulate + mapWages.get(l)
        }
        resAccu.push(accumulate)
        console.log("resAccu is ", resAccu)
    }
    let finalResAccu = resAccu.sort((a, b) => a - b)
    return finalAcc = finalResAccu[0]
};

function combinations(arr, len) {
    let tempArry = []
    let final = []
    for (let i = 0; i < arr.length; i++) {
        //console.log("i ", i)
        if ((arr.length - i) == (len - 1)) {
            break
        }
        tempArry.push(arr[i])
        for (let j = i + 1; j < arr.length; j++) {
            //console.log("j ", j)
            tempArry.push(arr[j])
            //console.log("tempArry ", tempArry)
            if (tempArry.length == len) {
                //console.log("tempArry inside if ", tempArry)
                final.push([...tempArry])
                //console.log("final inside if ", final)
                tempArry.pop()
            }
        }
        tempArry = []
    }
    //console.log("final ", final)
    return final
}

function getPermutations(arr, outputLength) {
  const results = [];

  function permute(currentArr, remaining) {
    if (currentArr.length === outputLength) {
      results.push([...currentArr]); // Copy current arrangement to avoid mutation
      return;
    }

    for (let i = 0; i < remaining.length; i++) {
      const nextElement = remaining[i];
      const remainingCopy = [...remaining]; // Copy to avoid mutation
      remainingCopy.splice(i, 1);
      permute([...currentArr, nextElement], remainingCopy);
    }
  }

  permute([], arr);
  return results;
}

function processor(ind, finalQuality, mapWages, combOfWage) {
    let currentQua1 = finalQuality[ind]
    let currentWage1 = combOfWage[ind]
    //let currentWage1 = mapWages.get(finalQuality[ind])
    let after = Number(ind) + 1
    let afterQua = finalQuality[after]
    let afterWage1 = combOfWage[after]
    //let afterWage1 = mapWages.get(finalQuality[after])
    let g = afterQua / currentQua1
    combOfWage[after] = (g * currentWage1)
    //mapWages.set(afterQua, (g * currentWage1))
}
var mincostToHireWorkers = function (quality, wage, k) {
    let accumulate = 0
    let mapWages = new Map()
    for (const f in quality) {
        mapWages.set(quality[f], wage[f])
    }
    let resAccu = []
    console.log(mapWages)

    // let comb = combinations(quality, k)
    // console.log("comb ", comb)
    // let combOfWages = combinations(wage, k)
    // console.log("combOfWages ", combOfWages)

    let comb = getPermutations(quality, k)
    console.log("comb ", comb)
    let combOfWages = getPermutations(wage, k)
    console.log("combOfWages ", combOfWages)

    for (const g in comb) {
        let SortedQuality = comb[g]
        let combOfWage = combOfWages[g]
        console.log("SortedQuality is ", SortedQuality)
        let finalQuality = SortedQuality
        console.log("finalQuality is ", finalQuality)
        for (let i = finalQuality.length - 1; i >= 0; i--) {
            let prev = Number(i) - 1
            console.log("prev ", prev)
            let currentQua = finalQuality[i]
            console.log("currentQua ", currentQua)
            let currentWage = combOfWages[g][i]
            //let currentWage = mapWages.get(finalQuality[i])
            console.log("currentWage ", currentWage)
            if (i > 0) {
                let prevQua = finalQuality[prev]
                console.log("prevQua ", prevQua)
                let prevWage = combOfWages[g][prev]
                //let prevWage = mapWages.get(finalQuality[prev])
                console.log("prevWage ", prevWage)
                let ntha = currentQua / prevQua
                console.log("ntha ", ntha)
                let x = (currentWage * prevQua) / currentQua
                console.log("x ", x)
                if (x < prevWage) {
                    combOfWages[g][i] = (ntha * prevWage)
                    console.log("combOfWages[g][i] is ", combOfWages[g][i])
                    //mapWages.set(currentQua, (ntha * prevWage))
                    for (let k = i; k < finalQuality.length; k++) {
                        processor(k, finalQuality, mapWages,combOfWage )
                    }
                } else if (x > prevWage) {
                    accumulate = accumulate + currentWage
                    combOfWages[g][prev] = x
                    //mapWages.set(prevQua, x)
                } else if (x == prevWage) {
                    accumulate = accumulate + currentWage
                }
            } else {
                accumulate = accumulate + currentWage
            }
            console.log("accumulate ", accumulate)

        }
        accumulate = 0
        for (const l in finalQuality) {
            accumulate = accumulate + combOfWages[g][l]
            console.log("last finalQuality", finalQuality)
            console.log("last accumulate", accumulate)
            //accumulate = accumulate + mapWages.get(l)
        }
        resAccu.push(accumulate)
        console.log("resAccu is ", resAccu)
    }
    let finalResAccu = resAccu.sort((a, b) => a - b)
    return finalAcc = finalResAccu[0]
};

function combinations(arr, len) {
    let tempArry = []
    let final = []
    for (let i = 0; i < arr.length; i++) {
        //console.log("i ", i)
        if ((arr.length - i) == (len - 1)) {
            break
        }
        tempArry.push(arr[i])
        for (let j = i + 1; j < arr.length; j++) {
            //console.log("j ", j)
            tempArry.push(arr[j])
            //console.log("tempArry ", tempArry)
            if (tempArry.length == len) {
                //console.log("tempArry inside if ", tempArry)
                final.push([...tempArry])
                //console.log("final inside if ", final)
                tempArry.pop()
            }
        }
        tempArry = []
    }
    //console.log("final ", final)
    return final
}

function getPermutations(arr, outputLength) {
  const results = [];

  function permute(currentArr, remaining) {
    if (currentArr.length === outputLength) {
      results.push([...currentArr]); // Copy current arrangement to avoid mutation
      return;
    }

    for (let i = 0; i < remaining.length; i++) {
      const nextElement = remaining[i];
      const remainingCopy = [...remaining]; // Copy to avoid mutation
      remainingCopy.splice(i, 1);
      permute([...currentArr, nextElement], remainingCopy);
    }
  }

  permute([], arr);
  return results;
}

function processor(ind, finalQuality, mapWages, combOfWage) {
    let currentQua1 = finalQuality[ind]
    let currentWage1 = combOfWage[ind]
    //let currentWage1 = mapWages.get(finalQuality[ind])
    let after = Number(ind) + 1
    let afterQua = finalQuality[after]
    let afterWage1 = combOfWage[after]
    //let afterWage1 = mapWages.get(finalQuality[after])
    let g = afterQua / currentQua1
    combOfWage[after] = (g * currentWage1)
    //mapWages.set(afterQua, (g * currentWage1))
}
var mincostToHireWorkers = function (quality, wage, k) {
    let accumulate = 0
    let mapWages = new Map()
    for (const f in quality) {
        mapWages.set(quality[f], wage[f])
    }
    let resAccu = []
    console.log(mapWages)

    // let comb = combinations(quality, k)
    // console.log("comb ", comb)
    // let combOfWages = combinations(wage, k)
    // console.log("combOfWages ", combOfWages)

    let comb = getPermutations(quality, k)
    console.log("comb ", comb)
    let combOfWages = getPermutations(wage, k)
    console.log("combOfWages ", combOfWages)

    for (const g in comb) {
        let SortedQuality = comb[g]
        let combOfWage = combOfWages[g]
        console.log("SortedQuality is ", SortedQuality)
        let finalQuality = SortedQuality
        console.log("finalQuality is ", finalQuality)
        for (let i = finalQuality.length - 1; i >= 0; i--) {
            let prev = Number(i) - 1
            console.log("prev ", prev)
            let currentQua = finalQuality[i]
            console.log("currentQua ", currentQua)
            let currentWage = combOfWages[g][i]
            //let currentWage = mapWages.get(finalQuality[i])
            console.log("currentWage ", currentWage)
            if (i > 0) {
                let prevQua = finalQuality[prev]
                console.log("prevQua ", prevQua)
                let prevWage = combOfWages[g][prev]
                //let prevWage = mapWages.get(finalQuality[prev])
                console.log("prevWage ", prevWage)
                let ntha = currentQua / prevQua
                console.log("ntha ", ntha)
                let x = (currentWage * prevQua) / currentQua
                console.log("x ", x)
                if (x < prevWage) {
                    combOfWages[g][i] = (ntha * prevWage)
                    console.log("combOfWages[g][i] is ", combOfWages[g][i])
                    //mapWages.set(currentQua, (ntha * prevWage))
                    for (let k = i; k < finalQuality.length; k++) {
                        processor(k, finalQuality, mapWages,combOfWage )
                    }
                } else if (x > prevWage) {
                    accumulate = accumulate + currentWage
                    combOfWages[g][prev] = x
                    //mapWages.set(prevQua, x)
                } else if (x == prevWage) {
                    accumulate = accumulate + currentWage
                }
            } else {
                accumulate = accumulate + currentWage
            }
            console.log("accumulate ", accumulate)

        }
        accumulate = 0
        for (const l in finalQuality) {
            accumulate = accumulate + combOfWages[g][l]
            console.log("last finalQuality", finalQuality)
            console.log("last accumulate", accumulate)
            //accumulate = accumulate + mapWages.get(l)
        }
        resAccu.push(accumulate)
        console.log("resAccu is ", resAccu)
    }
    let finalResAccu = resAccu.sort((a, b) => a - b)
    return finalAcc = finalResAccu[0]
};

#include<iostream>
using namespace std;
class book
{
  protected:
  string title;
  string author;
  float price;
  string isbn;
  public:
   Book(string title, string author, float price, string isbn)
        : title(title), author(author), price(price), isbn(isbn) {}
  virtual ~Book() {}
    string getTitle() 
    { 
      return title; 
    }
    string getAuthor() 
    { 
      return author; 
    }
    float getPrice() 
    { 
      return price; 
    }
    string getISBN() 
    { 
      return isbn; 
    }

    void setTitle(string title) 
    { 
      title = title; 
    }
    void setAuthor(string author) 
    { 
      author = author; 
    }
    void setPrice(float price) 
    { 
      price = price; 
    }
    void setISBN(string isbn) 
    { 
      isbn = isbn; 
    }
  virtual void displayInfo()
  {
        cout << "Title: " << title << endl;
        cout << "Author: " << author << endl;
        cout << "Price: $" << price << endl;
        cout << "ISBN: " << isbn << endl;
  }
  friend float calculateDiscount(book);
};
class eBook : public Book {
private:
    string format;
    float size; 
public:
    eBook(string title, string author, float price, string isbn,
           string format, float size)
        : book(title, author, price, isbn), format(format), size(size) {}

    
    virtual void displayInfo() 
  {
        book::displayInfo(); 
        cout << "Format: " << format << endl;
        cout << "Size: " << size << " MB" << endl;
    }
};
float calculatediscount(book b)
{
        int bk=b.price;
        if(500<bk<1000)
            {
                cout<<"Discount :"<< bk-(bk*0.3)<<endl;
            }
        else if(bk>1500)
           {
                cout<<"Discount :"<< bk-(bk*0.5)<<endl;
           }
        else
           {
                cout<<"No Discount"<<endl;
    }
    return 0;
}
    

// 1. You need to use tags in the Template
/// Here is link for tags: https://help.zoho.com/portal/en/kb/zoho-sign/user-guide/sending-a-document/articles/automatic-field-addition-in-zoho-sign

dealLDetails = zoho.crm.getRecordById("Deals",DealID);
// info dealLDetails;
// getAllFieldsResponse = invokeurl
// [
// 	url :"https://writer.zoho.com/api/v1/documents/flo7ld4ba09726a694424994054acbb636e81/fields"
// 	type :GET
// 	connection:"zoho_crm"
// ];
// info getAllFieldsResponse;
fieldTextData = Map();
fieldTextData.put("Deal_Name",dealLDetails.get("Deal_Name"));
fieldTextData.put("Stage",dealLDetails.get("Stage"));
fieldTextData.put("Owner",dealLDetails.get("Owner").get("name"));
contact_roles = zoho.crm.getRelatedRecords("Contact_Roles","Deals",DealID);
// info contact_roles;
contact_List = List();
count = 0;
signerList = List();
for each  contact in contact_roles
{
	count = count +1;
	name = contact.get("Full_Name");
	contact_map = Map();
	contact_map.put("Contact_Roles.Full_Name",name);
	contact_map.put("Contact_Roles.First_Name", count);
	signerMap = Map();
	signerMap.put("recipient_"+count, contact.get("Email"));
	signerMap.put("action_type", "sign");
	signerMap.put("language","en");
	contact_List.add(contact_map);
	signerList.add(signerMap);
}
fieldTextData.put("Contact_Roles",contact_List);
data_mp = Map();
data_mp.put("data",fieldTextData);
params = Map();
params.put("merge_data",data_mp);
params.put("service_name","zohosign");
params.put("signer_data",signerList);
params.put("sign_in_order","true");
// optional
params.put("message","Please find the document to be signed here");
//optional
params.put("reminder_period","15");
//optional
params.put("set_expire","30");
//optional
documentid = "flo7ld4ba09726a694424994054acbb636e81";
templatename = "Test Shareholder Agreement";
params.put("filename",templatename);
url = "https://zohoapis.com/writer/api/v1/documents/" + documentid + "/merge/sign";
info params;
/////////////////////////////
documentObj = invokeurl
[
	url :url
	type :POST
	parameters:params
	connection:"zoho_crm"
];
info documentObj;

§x§0§0§7§9§F§F§lᴄ§x§0§6§8§5§F§B§lʀ§x§0§D§9§1§F§8§lᴀ§x§1§3§9§E§F§4§lꜰ§x§1§A§A§A§F§0§lᴛ§x§2§0§B§6§E§C§lᴏ§x§2§7§C§2§E§9§lᴘ§x§2§D§C§E§E§5§lɪ§x§3§4§D§A§E§1§lᴀ §x§3§A§E§7§D§D§lɴ§x§4§1§F§3§D§A§lᴇ§x§4§7§F§F§D§6§lᴛ

§x§0§0§7§9§F§F§lᴄ§x§0§6§8§5§F§B§lʀ§x§0§D§9§1§F§8§lᴀ§x§1§3§9§E§F§4§lꜰ§x§1§A§A§A§F§0§lᴛ§x§2§0§B§6§E§C§lᴏ§x§2§7§C§2§E§9§lᴘ§x§2§D§C§E§E§5§lɪ§x§3§4§D§A§E§1§lᴀ §x§3§A§E§7§D§D§lɴ§x§4§1§F§3§D§A§lᴇ§x§4§7§F§F§D§6§lᴛ

/**
 * Method to authenticate an external credential using the external credential using the 
 * Auth URL.
 */

String externalCredential = 'TDX_DC_ORG';
String principalName = 'NAMED_PRINCIPAL';


System.debug(getAuthUrlFromConnectApi(externalCredential, principalName));


String getAuthUrlFromConnectApi(String externalCredential, String principalName){
    
    String body = JSON.serialize(
        new Map<String,String>{
            'externalCredential'=> externalCredential,
            'principalName'     => principalName,
            'principalType'     => 'NamedPrincipal'
        }
    );
    
    // Create a new request
    HttpRequest req = new HttpRequest();
    req.setMethod('POST');
    req.setEndpoint(Url.getOrgDomainUrl().toExternalForm() + '/services/data/v60.0/named-credentials/credential/auth-url/o-auth');
    req.setHeader('Authorization','Bearer ' + UserInfo.getSessionId());
    req.setHeader('Content-Length', String.ValueOf(body.length()));
    req.setBody(body);
    
    System.debug(body);

    // Execute request and fetch response
    HttpResponse res = new Http().send(req);

    // Throw an error if the status code for the final call is not equal to 200
    if(res.getStatusCode() != 200){
        throw new StringException('Unexpected status code in connect api callout. Response: ' + res.getBody());
    }

    // Parse the response into a Connect API class
    ConnectApi.OAuthCredentialAuthUrl ocau = (ConnectApi.OAuthCredentialAuthUrl) JSON.deserializeStrict(
        res.getBody(),
        ConnectApi.OAuthCredentialAuthUrl.class
    );

    // Return the authentication from the Connect API response
    return ocau.authenticationUrl;
}



// This comes from your Apex API Call
Integer statusCode        = 400;
Boolean statusIsAuthError = true;

// Configuration for
String  authUrl           = 'https://dc-mgmt-dev-ed.develop.my.salesforce.com/services/auth/xds/TDX_DC_ORG?startURL=/0puQy0000000AQn';

// Run this logic when
if(statusCode == 400 && statusIsAuthError){

    // Start the flow by calling the external credential auth URL and validate that the response is as we expect
    RedirectResponse initialResponse = validateRedirectResponse(
        callout(
            authUrl,
            null
        )
    );

    // Handle the first redirect and validate that the response is as we expect
    RedirectResponse firstRedirectResponse = validateRedirectResponse(
        callout(
            initialResponse.location,
            initialResponse.cookie
        )
    );

    // Handle the second redirect and validate that the response is as we expect
    // !! Use the cookie from the initial request !!
    HttpResponse finalResponse = callout(
            firstRedirectResponse.location,
            initialResponse.cookie
    );

    // Throw an error if the status code for the final call is not equal to 200
    if(finalResponse.getStatusCode() != 200){
        throw new StringException('Unexpected status code in final callout. Response: ' + finalResponse.getBody());
    }
}


/**
 * Method to do a get callout with a cookie header setter
 */
HttpResponse callout(String endpoint, String cookie){
    HttpRequest req = new HttpRequest();
    req.setEndpoint(endpoint);
    req.setMethod('GET');

    // Set the cookie if not blank
    if(!String.isBlank(cookie)){
        secondRedirectRequest.setHeader('Cookie',cookie);
    }
    HttpResponse res = new Http().send(req);
}


/**
 * Basic validation that the response is as we expect
 */
RedirectResponse validateRedirectResponse(HttpResponse res){
    // Check it is a status 302
    if(res.getStatusCode() != 302){
        throw new StringException('Unexpected response code, expected the response status code to be 302');
    }

    // Return a redirect response object
    return new RedirectResponse(
        res.getHeader('Location')
        res.getHeader('Set-Cookie');
    );
}


/**
 * Simple redirect response object to make the code more readable
 */
class RedirectResponse{

    public String location;
    public String cookie;

    RedirectResponse(String location, String cookie){
        this.location = location;
        this.cookie   = cookie;
    }
}

new Response(body, options):
body: The body of the response, often a JSON string.
options: An object containing configuration options for the response, such as headers and status.
By following this structure, you can handle POST requests effectively, returning appropriate responses based on the request's success or failure.

from spherov2 import scanner

with scanner.find_toy() as toy:
    ...

@mixin pseudoInit{
        content: "";
        display: block;
        position: absolute;
        left: 0; top: 0;
        z-index: -1;
}
@mixin beforeContainer($bg: transparent, $w: 100%, $h: $w){
    position: relative;
    z-index: 1;
    &::before{
        @include pseudoInit;
        background: $bg;
        width: $w;
        height: $h;
    }
}
@mixin afterContainer($bg: transparent, $w: 100%, $h: $w){
    &::after{
        @include pseudoInit;
        background: $bg;
        width: $w;
        height: $h;
    }
}

extends CharacterBody3D

# Enum for weapon states


enum WeaponState {
	UNEQUIPPED,
	EQUIPPED
}
var current_state = WeaponState.UNEQUIPPED
@onready var mesh_root = $MeshRoot

@export var S_H = 0.1
@export var S_v = 0.1
@onready var animation_player = $MeshRoot/AuxScene/AnimationPlayer
@onready var C_M = $Node3D
@onready var weapon = $MeshRoot/AuxScene/ALS_AnimMan_CharacterBP/Skeleton3D/BoneAttachment3D2/Sketchfab_Scene


var SPEED = 2
const JUMP_VELOCITY = 4.5
var running = false
var aiming = false

var running_speed = 5
var walking_speed = 2

# Get the gravity from the project settings to be synced with RigidBody nodes.
var gravity = ProjectSettings.get_setting("physics/3d/default_gravity")

func _ready():
	Input.mouse_mode = Input.MOUSE_MODE_CAPTURED
	weapon.hide()  # Hide the weapon initially

func _input(event):
	if event is InputEventMouseMotion:
		rotate_y(deg_to_rad(-event.relative.x * S_H))
		C_M.rotate_x(deg_to_rad(-event.relative.y * S_v))

	if event.is_action_pressed("equip_weapon"): 
		if current_state == WeaponState.UNEQUIPPED:
			equip_weapon()
		elif current_state == WeaponState.EQUIPPED:
			unequip_weapon()

	if event.is_action_pressed("aim_weapon") and current_state == WeaponState.EQUIPPED:
		start_aiming()
	elif event.is_action_released("aim_weapon") and current_state == WeaponState.EQUIPPED:
		stop_aiming()

	if event.is_action_pressed("fire_weapon") and current_state == WeaponState.EQUIPPED and aiming:
		fire_weapon()

func _physics_process(delta):
	if Input.is_action_pressed("run"):
		SPEED = running_speed
		running = true
	else:
		SPEED = walking_speed
		running = false

	# Add the gravity.
	if not is_on_floor():
		velocity.y -= gravity * delta

	# Handle jump.
	if Input.is_action_just_pressed("ui_accept") and is_on_floor():
		velocity.y = JUMP_VELOCITY

	# Get the input direction and handle the movement/deceleration.
	# As good practice, you should replace UI actions with custom gameplay actions.
	var input_dir = Input.get_vector("ui_left", "ui_right", "ui_up", "ui_down")
	var direction = (transform.basis * Vector3(input_dir.x, 0, input_dir.y)).normalized()
	if direction:
		if running:
			if current_state == WeaponState.EQUIPPED:
				if animation_player.current_animation != "gun_running":
					animation_player.play("RifleRun(2)0")
			else:
				if animation_player.current_animation != "running":
					animation_player.play("Running(2)0")
		else:
			if current_state == WeaponState.EQUIPPED:
				if animation_player.current_animation != "gun_walking":
					animation_player.play("RifleWalk(1)0")
			else:
				if animation_player.current_animation != "walking":
					animation_player.play("WalkWithBriefcase0")
					
					
		mesh_root.look_at(position + direction)
						
		velocity.x = direction.x * SPEED
		velocity.z = direction.z * SPEED
	else:
		if current_state == WeaponState.EQUIPPED:
			if aiming:
				if animation_player.current_animation != "gun_aiming":
					animation_player.play("aim")
			else:
				if animation_player.current_animation != "gun_idle":
					animation_player.play("RifleIdle(1)0")
		else:
			if animation_player.current_animation != "idle":
				animation_player.play("Idle(3)0")
		velocity.x = move_toward(velocity.x, 0, SPEED)
		velocity.z = move_toward(velocity.z, 0, SPEED)

	move_and_slide()

# Function to equip the weapon
func equip_weapon():
	current_state = WeaponState.EQUIPPED
	animation_player.play("RiflePullOut(1)0")  # Play equip animation
	weapon.show()  # Make weapon visible

# Function to unequip the weapon
func unequip_weapon():
	current_state = WeaponState.UNEQUIPPED
	animation_player.play("RiflePutAway(1)0")  # Play unequip animation
	weapon.hide()  # Hide weapon after unequip

# Function to start aiming
func start_aiming():
	aiming = true
	animation_player.play("aim")  # Play aiming animation

# Function to stop aiming
func stop_aiming():
	aiming = false
	animation_player.play("gun_idle")  # Play idle animation with gun

# Function to handle firing the weapon
func fire_weapon():
	animation_player.play("FiringRifle(2)0")  # Play fire animation

# Optionally, handle animation finished signal to perform actions after animation ends
func _on_AnimationPlayer_animation_finished(anim_name):
	if anim_name == "unequip":
		weapon.hide()
	elif anim_name == "equip":
		weapon.show()
	elif anim_name == "gun_fire":
		if aiming:
			animation_player.play("aim")  # Return to aiming animation after firing
		else:
			animation_player.play("RifleIdle(1)0")

# Performing inner join
inner_join_df = df1.join(df2, df1['key'] == df2['key'], 'inner')

# Performing left join
left_join_df = df1.join(df2, df1['key'] == df2['key'], 'left')

extends CharacterBody3D

# Enum for weapon states
enum WeaponState {
	UNEQUIPPED,
	EQUIPPED
}
var current_state = WeaponState.UNEQUIPPED


@export var S_H = 0.1
@export var S_v = 0.1
@onready var animation_player = $MeshRoot/AuxScene/AnimationPlayer
@onready var C_M = $Node3D

var SPEED = 2
const JUMP_VELOCITY = 4.5
var running = false

var running_speed = 5
var walking_speed = 2



# Get the gravity from the project settings to be synced with RigidBody nodes.
var gravity = ProjectSettings.get_setting("physics/3d/default_gravity")

func _ready():
	Input.mouse_mode = Input.MOUSE_MODE_CAPTURED
	
	
func _input(event):
	if event is InputEventMouseMotion:
		rotate_y(deg_to_rad(-event.relative.x*S_H))
		C_M.rotate_x(deg_to_rad(-event.relative.y*S_v))

func _physics_process(delta):
	
	if Input.is_action_pressed("run"):
		SPEED = running_speed
		running = true
	else:
		SPEED = walking_speed
		running = false
		
	# Add the gravity.
	if not is_on_floor():
		velocity.y -= gravity * delta

	# Handle jump.
	if Input.is_action_just_pressed("ui_accept") and is_on_floor():
		velocity.y = JUMP_VELOCITY

	# Get the input direction and handle the movement/deceleration.
	# As good practice, you should replace UI actions with custom gameplay actions.
	var input_dir = Input.get_vector("ui_left", "ui_right", "ui_up", "ui_down")
	var direction = (transform.basis * Vector3(input_dir.x, 0, input_dir.y)).normalized()
	if direction:
		if running:
			if animation_player.current_animation != "running":
				animation_player.play("Running(2)0")
		else:
			if animation_player.current_animation != "WalkWithBriefcase0":
				animation_player.play("WalkWithBriefcase0")
			

		velocity.x = direction.x * SPEED
		velocity.z = direction.z * SPEED
	else:
		if animation_player.current_animation != "idle":
			animation_player.play("Idle(3)0")
		velocity.x = move_toward(velocity.x, 0, SPEED)
		velocity.z = move_toward(velocity.z, 0, SPEED)

	move_and_slide()

$(function () {
      $("#teacher_grade_subject").on("click", ".btn-tambah", function() {
          $(this).css("display","none");
          $('.js-select2-2').select2({
            closeOnSelect : false,
            placeholder : "Click to select tes",
            theme: 'bootstrap4',
            allowHtml: true,
            allowClear: true,
          });
          var valtes = $(this).parent().find(".btn-hapus").css("display","none");
      });

      $("#teacher_grade_subject").on("click", ".btn-hapus", function(){
        var button_id = $(this).attr("id");
        var btn = (button_id)-1;
        var row = ($(".row-status").length)-1; 
        $('.baru-data'+button_id+'').remove();

        $(".btn-tambah").find('.baru-data'+row+'').css("display","");
        if(row != 1){
          $('.baru-data'+btn+'').find(".btn-tambah").css("display","");
          $('.baru-data'+btn+'').find(".btn-hapus").css("display","");
        } 
        else{
          $(".btn-tambah").css("display","");
          $(".btn-hapus").css("display","none");
        }
      });

    $("#teacher_grade_subject").on("change", "#teacher_grade_id_0", function() {
      loadSubjectOptions2(this.value);
    });

    $("#teacher_grade_subject").on("change", "#teacher_subject_id_0", function() {
      loadSubjectOptions2(this.value);
    });

    function loadSubjectOptions2(gradeId) {
      // Hapus semua opsi yang ada di select subject
  
      // Buat request AJAX untuk mengambil data subject berdasarkan grade
      fetch(`/get-subjects/${gradeId}`)
        .then(response => response.json())
        .then(data => {
            // Tambahkan opsi baru ke select subject
            data.forEach(subject => {
                const option = document.createElement('option');
                option.value = subject.id;
                option.text = subject.name_subject;
                subjectSelect.add(option);
            });
        })
        .catch(error => console.error(error));
    }

dasdasd