{% extends "merchant_base.html" %}
{% load static %}
{% load crispy_forms_tags %}
{% block title %}
<title>DXL Costing Report</title>
{% endblock title %}
{% block Style %}
<style>
  .search {
    width: 94%!important;
  }
  table.table.table-responsive tr th{
    text-decoration: underline;
  }
  table.table.table-responsive.material_table tr {
    background-color: #FFFF99;
  }
  table.table.table-responsive.trim_table tr {
    background-color: #CCFFCC;
  }
  table.table.table-responsive.wash_table tr {
    background-color: #CCFFCC;
  }
  table.table.table-responsive.cm_table tr {
    background-color: #CC99FF;
  }
  table.table.table-responsive.packaging_table tr {
    background-color: #99CCFF;
  }
  table.table.table-responsive.overhead_table tr {
    background-color: #FFCC99;
  }
  table.table.table-responsive.fob_table tr {
    background-color: #FFFF00;
  }
  table.table.table-responsive.others_table tr {
    background-color: #CCFFFF;
  }
  table.table.table-responsive.retail_table tr {
    background-color: #C0C0C0;
  }
  
</style>

{% endblock Style %}

{% block MainContent %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.3.0/exceljs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>


{% if messages %}
  {% for message in messages %}
    <div class="alert alert-dismissible fade show {% if message.tags %}alert-{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}" role="alert">{{ message }}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  {% endfor %}
{% endif %}


<div class="contents">
<div class="table-area">
  <div class="table-title">
    <div class="row">
      <div class="col-md-4">
        <div class="depertment-name">
          <h4 class='fw-bold'>DXL Costing Report</h4>
        </div>
      </div>
    </div>
  </div>
  <form id="submit_form" action="" method="POST">
    {% csrf_token %}
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    {{form.style|as_crispy_field}}
                </div>
                {% if style_obj and style_obj.sketch %}
                    <input type="hidden" id="styleSketchUrl" value="{{ style_obj.sketch.url }}">
                {% endif %}
                <div class="col-md-4" style="margin-top: 33px;">
                    <button type="submit" class="cus-btn">Show</button>
                </div>
            </div>
        </div>
    </div>

  </form>
  {% if style_obj %}
    <div style="text-align: right;">
      <button onclick="ExportStyledExcel()" class="cus-btn" style="width:70px; height:30px">
        <i class="fa fa-file-excel-o" aria-hidden="true"></i>
      </button>
      <button type="button" onclick="printDiv('printableArea')" class="cus-btn" style="width:70px; height:30px">
        <i class="fa fa-print" style="font-size: 16px; color:#fff"></i>
      </button>
    </div>

    <div class="tables table-responsive" id="printableArea">
        <div class="row">
            <div class="col-md-8">
                <div class="left_table">
                    <table class="table table-responsive cost_table">
                        <tr style="background-color: #FFCC99;">
                            <td colspan="4" class="fs-6" style="font-weight: bold;">Cost Sheet</td>
                        </tr>
                        <tr height="25px" style="background-color: white;">
                            <td colspan="4"></td>
                        </tr>
                        <tr style="background-color: #FFCC99;">
                            <td style="font-weight: bold;">Date Created</td>
                            <td>{{style_obj.created_date|default:"N/A"}}</td>
                            <td style="font-weight: bold;">Date Revised</td>
                            <td>{{style_obj.revised_date|default:""}}</td>
                        </tr>
                        <tr height="25px" style="background-color: #FFCC99;">
                            <td colspan="4"></td>
                        </tr>
                        <tr height="25px" style="background-color: #FFCC99;">
                            <td colspan="4"></td>
                        </tr>
                        <tr height="25px" style="background-color: white;">
                            <td colspan="4"></td>
                        </tr>
                        <tr style="background-color: #CCFFFF;">
                            <td style="font-weight: bold;">Season:</td>
                            <td>{{style_obj.season|default:"N/A"}}</td>
                            <td style="font-weight: bold;">Vendor:</td>
                            <td>{{style_obj.factory|default:"N/A"}}</td>
                        </tr>
                        <tr style="background-color: #CCFFFF;">
                            <td style="font-weight: bold;">Brand/Label:</td>
                            <td>{{style_obj.brand|default:"N/A"}}</td>
                            <td style="font-weight: bold;">Factory:</td>
                            <td>{{style_obj.production_factory|default:"N/A"}}</td>
                        </tr>
                        <tr style="background-color: #CCFFFF;">
                            <td style="font-weight: bold;">Buyer:</td>
                            <td>{{style_obj.buyer|default:"N/A"}}</td>
                            <td style="font-weight: bold;">COO:</td>
                            <td>Bangladesh</td>
                        </tr>
                        <tr style="background-color: #CCFFFF;">
                            <td style="font-weight: bold;">Style Nbr:</td>
                            <td>{{style_obj.style_number|default:"N/A"}}</td>
                            <td style="font-weight: bold;">Retail Intro:</td>
                            <td></td>
                        </tr>
                        <tr style="background-color: #CCFFFF;">
                            <td style="font-weight: bold;">Style Desc:</td>
                            <td>{{style_obj.style_description|default:"N/A"}}</td>
                            <td style="font-weight: bold;">NDC:</td>
                            <td></td>
                        </tr>
                        <tr style="background-color: #CCFFFF;">
                            <td style="font-weight: bold;"></td>
                            <td></td>
                            <td style="font-weight: bold;">Ex-Factory:</td>
                            <td>{{style_obj.ex_factory|default:""}}</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="col-md-4">
                <div class="product-image">
                    {% if style_obj.sketch %}
                        <img src="{{ style_obj.sketch.url }}" alt="Image Not Found" height="290px" width="310" id="styleSketchImage">
                    {% else %}
                        <div>
                            <p class="text-center" style="color: red;">Image not found</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <table class="table table-responsive material_table">
                    <tr style="background-color: #FFFF99;">
                        <td colspan="8" class="fw-bold text-decoration-underline fs-6">Materials</td>
                    </tr>
                    <tr>
                        <th></th>
                        <th class="fw-bold">Mill</th>
                        <th class="fw-bold">Ref</th>
                        <th class="fw-bold">Description</th>
                        <th class="fw-bold text-end">yy/unit</th>
                        <th class="fw-bold text-end">prc/yd</th>
                        <th class="fw-bold text-end">ext</th>
                        <th class="fw-bold text-end"></th>
                    </tr>
                    {% regroup material_obj by fabric.fabric_application_model as grouped_materials %}

                    {% for group in grouped_materials %}
                        {% for obj in group.list %}
                            <tr>
                                {% if forloop.first %}
                                    <td class="fw-bold text-decoration-underline">
                                        {{ group.grouper|default:"N/A" }}
                                    </td>
                                {% else %}
                                    <td></td>
                                {% endif %}
                                
                                <td>{{ obj.fabric.mill_name|default:"N/A" }}</td>
                                <td>{{ obj.fabric.fabric.reference|default:"N/A" }}</td>
                                <td>{{ obj.fabric.fabric.composition |default:"N/A" }}</td>
                                <td class="text-end">{{ obj.fabric.total_uses|floatformat:2 }}</td>
                                <td class="text-end">${{ obj.cost_per_unit|floatformat:2 }}</td>
                                <td class="text-end">${{ obj.total_cost|floatformat:2 }}</td>
                                <td></td>
                            </tr>
                        {% endfor %}
                    {% endfor %}
                    <tr>
                        <td colspan="2" style="font-weight: bold;">Total Material Cost:</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td style="background-color: #c0c0c0; font-weight: bold;" class="text-end">${{ext_material_total|floatformat:2}}</td>
                    </tr>

                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <table class="table table-responsive trim_table">
                    <tr style="background-color: #CCFFCC;">
                        <td colspan="8" class="fw-bold text-decoration-underline fs-6">Trim</td>
                    </tr>
                    <tr>
                        <th></th>
                        <th class="fw-bold">Supplier</th>
                        <th class="fw-bold">Ref</th>
                        <th class="fw-bold">Description</th>
                        <th class="fw-bold text-end">unit</th>
                        <th class="fw-bold text-end">unit-cost</th>
                        <th class="fw-bold text-end">ext</th>
                        <th></th>
                    </tr>
                    {% for obj in combined_items %}
                    <tr>
                        <td></td>
                        <td>{{obj.supplier}}</td>
                        <td></td>
                        <td>{{obj.description}},{{obj.acc_description}}</td>
                        <td class="text-end">{{obj.consumption|floatformat:2}}</td>
                        <td class="text-end">${{obj.unit_cost|floatformat:2}}</td>
                        <td class="text-end">${{obj.total_cost|floatformat:2}}</td>
                        <td></td>
                    </tr>
                    {% endfor %}
                    
                    <tr>
                        <td colspan="3" style="font-weight: bold;">Total Trim Cost:</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td style="background-color: #c0c0c0; font-weight: bold;" class="text-end">${{ext_trim_total|floatformat:2}}</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <table class="table table-responsive wash_table">
                    <tr style="background-color: #CCFFCC;">
                        <td colspan="8" class="fw-bold text-decoration-underline fs-6">Wash</td>
                    </tr>
                    <tr>
                        <th></th>
                        <th class="fw-bold"></th>
                        <th class="fw-bold"></th>
                        <th class="fw-bold"></th>
                        <th class="fw-bold text-end">unit</th>
                        <th class="fw-bold text-end">unit-cost</th>
                        <th class="fw-bold text-end">ext</th>
                        <th></th>
                    </tr>
                    {% for obj in wash_obj %}
                    <tr>
                        <td></td>
                        <td>{{obj.washing.process_details}}</td>
                        <td></td>
                        <td></td>
                        <td class="text-end">1.00</td>
                        <td class="text-end">${{obj.total_cost|floatformat:2}}</td>
                        <td class="text-end">${{obj.total_cost|floatformat:2}}</td>
                        <td></td>
                    </tr>
                    
                    <tr>
                        <td colspan="3" class="fw-bold">Total Wash Cost:</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td style="background-color: #c0c0c0; font-weight: bold;" class="text-end">${{obj.total_cost|floatformat:2}}</td>
                    </tr>
                    {% endfor %}
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <table class="table table-responsive cm_table">
                    <tr style="background-color: #CC99FF;">
                        <td colspan="8" class="fw-bold text-decoration-underline fs-6">CM</td>
                    </tr>
                    <tr>
                        <th></th>
                        <th class="fw-bold"></th>
                        <th class="fw-bold"></th>
                        <th class="fw-bold"></th>
                        <th class="fw-bold text-end">unit</th>
                        <th class="fw-bold text-end">unit-cost</th>
                        <th class="fw-bold text-end">ext</th>
                        <th class="fw-bold"></th>
                    </tr>
                    {% for obj in cm_obj %}
                    <tr>
                        <td></td>
                        <td style="font-weight: bold;">Cmt cost:</td>
                        <td></td>
                        <td></td>
                        <td class="text-end">1.00</td>
                        <td class="text-end">${{obj.total_cost_per_gmts|floatformat:2}}</td>
                        <td class="text-end">${{obj.total_cost_per_gmts|floatformat:2}}</td>
                        <td></td>
                    </tr>
                    
                    <tr>
                        <td colspan="3" style="font-weight: bold;">Total CM Cost:</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td style="background-color: #c0c0c0; font-weight: bold;" class="text-end">${{obj.total_cost_per_gmts|floatformat:2}}</td>
                        {% comment %} <td style="background-color: white; font-weight: bold;">{{cm_dozen|floatformat:2}}</td> {% endcomment %}
                    </tr>
                    {% endfor %}
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <table class="table table-responsive packaging_table">
                    <tr style="background-color: #99CCFF;">
                        <td colspan="8" class="fw-bold text-decoration-underline fs-6">Packaging</td>
                    </tr>
                    <tr>
                        <th></th>
                        <th class="fw-bold">Supplier</th>
                        <th class="fw-bold">Ref</th>
                        <th class="fw-bold">Description</th>
                        <th class="fw-bold text-end">unit</th>
                        <th class="fw-bold text-end">unit-cost</th>
                        <th class="fw-bold text-end">ext</th>
                        <th></th>
                    </tr>
                    {% for obj in packaging_item %}
                    <tr>
                        <td></td>
                        <td>{{obj.supplier}}</td>
                        <td></td>
                        <td>{{obj.description}},{{obj.acc_description}}</td>
                        <td class="text-end">{{obj.consumption|floatformat:2}}</td>
                        <td class="text-end">${{obj.unit_cost|floatformat:2}}</td>
                        <td class="text-end">${{obj.total_cost|floatformat:2}}</td>
                        <td></td>
                    </tr>
                    {% endfor %}
                    <tr>
                        <td colspan="3" style="font-weight: bold;">Total Packaging Cost:</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td style="background-color: #c0c0c0; font-weight: bold;" class="text-end">${{ext_packaging_total|floatformat:2}}</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <table class="table table-responsive overhead_table">
                    <tr style="background-color: #FFCC99;">
                        <td colspan="8" class="fw-bold text-decoration-underline fs-6">Overhead/Margin</td>
                    </tr>
                    <tr>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th class="fw-bold text-end">%</th>
                        <th></th>
                        <th></th>
                        <th></th>
                    </tr>

                    <tr>
                        <td colspan="3" style="font-weight: bold;">Total Overhead/Margin:<td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td style="background-color: #c0c0c0; font-weight: bold;" class="text-end">${{style_summary.commercial_cost|floatformat:2}}</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <table class="table table-responsive fob_table">
                    <tr>
                        <td style="font-weight: bold;">FOB</td>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <td style="background-color: #c0c0c0; font-weight: bold;" class="text-end">${{fob|floatformat:2}}</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <table class="table table-responsive others_table">
                    <tr style="background-color: #CCFFFF;">
                        <td colspan="8" class="fw-bold text-decoration-underline fs-6">Others</td>
                    </tr>
                    <tr>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th class="fw-bold text-end">%</th>
                        <th></th>
                        <th class="fw-bold text-end">ext</th>
                        <th></th>
                    </tr>
                    <tr>
                        <td>Duty</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td class="text-end">$0.00</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>Freight</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td class="text-end">$0.00</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>Brokerage</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td class="text-end">$0.00</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>Others</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td class="text-end">$0.00</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td colspan="3" style="font-weight: bold;">Total Landed:<td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td style="background-color: #c0c0c0; font-weight: bold;" class="text-end">$0.00</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <table class="table table-responsive retail_table">
                    <tr>
                        <td style="font-weight: bold;">Retail</td>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <td style="font-weight: bold;">TBA</td>
                    </tr>
                    <tr>
                        <td style="font-weight: bold;">IMU</td>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <td style="font-weight: bold;"></td>
                    </tr>
                    {% if style_obj.remarks %}
                    <tr>
                        <td colspan="8">{{style_obj.remarks}}</td>
                    </tr>
                    {% endif %}
                </table>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock MainContent %}
{% block meassage %}

{% include 'notifications/notifications.html' %}

{% endblock meassage %}

{% block JS %}

<script type=text/javascript>
    function printDiv(divName) {
      var originalContents = document.body.innerHTML
      var printContents = document.getElementById(divName).innerHTML;
      document.body.innerHTML = printContents;
      window.print();
      document.body.innerHTML = originalContents;
    }

    async function ExportStyledExcel() {
        const imageUrl = document.getElementById('styleSketchUrl')?.value;
        const tables = document.querySelectorAll('.cost_table, .material_table, .trim_table, .cm_table, .others_table, .packaging_table, .overhead_table, .fob_table, .retail_table, .wash_table');
        const workbook = new ExcelJS.Workbook();
        const worksheet = workbook.addWorksheet('Combined Table');

        let currentRowIndex = 1;

        tables.forEach((table) => {
            for (let r = 0; r < table.rows.length; r++) {
                const htmlRow = table.rows[r];
                const excelRow = worksheet.getRow(currentRowIndex++);
                let colIndex = 1;

                for (let c = 0; c < htmlRow.cells.length; c++) {
                    const htmlCell = htmlRow.cells[c];
                    const colSpan = htmlCell.colSpan || 1;

                    const cellStyle = window.getComputedStyle(htmlCell);
                    const rowStyle = window.getComputedStyle(htmlRow);
                    const value = htmlCell.innerText.trim();

                    function rgbToHex(rgb) {
                        const result = rgb.match(/\d+/g);
                        return result
                            ? result.map(x => parseInt(x).toString(16).padStart(2, '0')).join('')
                            : null;
                    }

                    let bgColor = cellStyle.backgroundColor;
                    if (bgColor === 'rgba(0, 0, 0, 0)' || bgColor === 'transparent') {
                        bgColor = rowStyle.backgroundColor;
                    }

                    const bgHex = rgbToHex(bgColor);
                    const fontColor = rgbToHex(cellStyle.color);
                    const isBold = cellStyle.fontWeight === 'bold' || parseInt(cellStyle.fontWeight) >= 700;
                    const isUnderline = htmlCell.classList.contains('fw-bold');
                    const isTextEnd = htmlCell.classList.contains('text-end');

                    for (let span = 0; span < colSpan; span++) {
                        const excelCell = excelRow.getCell(colIndex + span);

                        if (span === 0) {
                            excelCell.value = value;
                        } else {
                            excelCell.value = null;
                        }

                        if (bgHex) {
                            excelCell.fill = {
                                type: 'pattern',
                                pattern: 'solid',
                                fgColor: { argb: 'FF' + bgHex.toUpperCase() }
                            };
                        }

                        excelCell.font = {
                            color: fontColor ? { argb: 'FF' + fontColor.toUpperCase() } : undefined,
                            bold: isBold,
                            underline: isUnderline ? true : undefined
                        };

                        const isTextCenter = htmlCell.classList.contains('text-center');
                        excelCell.alignment = {
                            horizontal: isTextCenter ? 'center' : 'left',
                            vertical: 'middle',
                            wrapText: true
                        };

                        excelCell.alignment = {
                            horizontal: isTextEnd ? 'right':'left',
                            vertical: 'middle',
                            wrapText: true
                        }

                        excelCell.border = {
                            top: { style: 'thin' },
                            left: { style: 'thin' },
                            bottom: { style: 'thin' },
                            right: { style: 'thin' }
                        };
                    }

                    if (colSpan > 1) {
                        worksheet.mergeCells(
                            excelRow.number,
                            colIndex,
                            excelRow.number,
                            colIndex + colSpan - 1
                        );
                    }

                    colIndex += colSpan;
                }
            }

            currentRowIndex++;
        });


        if (imageUrl) {
            try {
                const response = await fetch(imageUrl);
                const imageBlob = await response.blob();
                const imageBuffer = await imageBlob.arrayBuffer();

                const imageId = workbook.addImage({
                    buffer: imageBuffer,
                    extension: 'jpeg',
                });

                worksheet.addImage(imageId, {
                    tl: { col: 5, row: 1 },
                    ext: { width: 200, height: 150 }
                });
            } catch (error) {
                console.error("Image insert failed:", error);
            }
        }
        const buffer = await workbook.xlsx.writeBuffer();
        const blob = new Blob([buffer], {
            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        });
        saveAs(blob, "Styled_Tables.xlsx");

    }


    $(document).ready(function(){
        $("#id_style").select2();
    })
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>


{% endblock JS %}