@extends("layouts.admin.app")

@section("page-title")
{{__("Dashboard")}}
@endSection

<style>
    body {
        font-family: Arial, Helvetica, sans-serif;
    }

    .column {
        @if(app()->getLocale()=='ar') float: right @else float: left @endif;
        width: 50%;
        padding-bottom: 5px;
        @if(app()->getLocale()=='ar') padding-right: 20px @else padding-left: 20px @endif;
        font-size: 12px;
    }

    .row:after {
        content: "";
        display: table;
        clear: both;
    }

    #vouchers {
        font-family: Arial, Helvetica, sans-serif;
        border-collapse: collapse;
        width: 100%;
    }

    #vouchers td,
    #vouchers th {
        border: 1px solid #ddd;

    }

    #vouchers tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    #vouchers tr:hover {
        background-color: #ddd;
    }

    #vouchers th {
        padding-top: 5px;
        padding-bottom: 5px;
        @if(app()->getLocale()=='ar') padding-right: 5px @else padding-left: 5px @endif;
        text-align: left;
        background-color: #053474;
        color: white;
    }

    #vouchers td {
        padding-top: 2px;
        padding-bottom: 2px;
        @if(app()->getLocale()=='ar') padding-right: 5px @else padding-left: 5px @endif
    }

    #caption {
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        width: 100%;
    }
</style>

@section("page-nav-title")
<div class="app-title">
    <div>
        <h1><i class="fa fa-dashboard"></i>{{__("reports")}}</h1>
        <p>{{__("production_report")}}</p>
    </div>
    <ul class="app-breadcrumb breadcrumb">
        <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
        <li class="breadcrumb-item"><a href="#">{{__("Dashboard")}}</a></li>
        <li class="breadcrumb-item"><a href="#">{{__("reports")}}</a></li>
    </ul>
</div>
@endsection

@section("content")
<div class="tile" style="margin: 10px;">
    <div class="tile-title">
        <h3>{{__('production_report')}}</h3>
    </div>
    <form id="reportForm" action="{{ route("admin.reports.productionPdf") }}" method="POST" target="_blank">
        @csrf
        <div class="tile-body">
            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group">
                        <label class="control-label required">{{__("select-the-print-type")}}</label>
                        <select class="form-control" id="print" name="print" onchange="removeDisabled()">
                            <option value="0">{{__('select-the-print-type')}}</option>
                            <option value="summaries">{{__("Summaries Of Orders")}}</option>
                            <option value="detailed">{{__("Detailed Orders")}}</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group">
                        <label class="control-label" for="startDate">{{__("Start Date")}}</label>
                        <input class="form-control" type="date" name="startDate" id="startDate" onchange="dateStart()">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label class="control-label" for="endDate">{{__("End Date")}}</label>
                        <input class="form-control" type="date" name="endDate" id="endDate" onchange="dateEnd()">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4">
                    <div class="form-group">
                        <label class="control-label">{{__("select-order")}}</label>
                        <select class="form-control" id="order_id" name="order_id">
                            <option value="0">{{__('select-order')}}</option>
                            <option value="all">{{__('All')}}</option>
                            @foreach ($orders as $order)
                            <option value="{{$order->id}}">{{$order->number}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-lg-6" style="margin-top: 30px;margin-left: 190px;">
                    <div class="form-group">
                        @if ($errors->has('startDate') || $errors->has('endDate') || $errors->has('date_selection') || $errors->has('print') || $errors->has('order_id') || $errors->has('all_fields'))
                        <div class="text-danger">
                            <ul>
                                @if ($errors->has('startDate'))
                                <li>{{ $errors->first('startDate') }}</li>
                                @endif
                                @if ($errors->has('endDate'))
                                <li>{{ $errors->first('endDate') }}</li>
                                @endif
                                @if ($errors->has('date_selection'))
                                <li>{{ $errors->first('date_selection') }}</li>
                                @endif
                                @if ($errors->has('print'))
                                <li>{{ $errors->first('print') }}</li>
                                @endif
                                @if ($errors->has('order_id'))
                                <li>{{ $errors->first('order_id') }}</li>
                                @endif
                                @if ($errors->has('all_fields'))
                                <li>{{ $errors->first('all_fields') }}</li>
                                @endif
                            </ul>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-end">
                <button class=" btn btn-primary" style="background-color: #053474; border-color: #053474; display:none" type="submit" id="remPrint">
                    <i class="fa fa-fw fa-lg fa-print"></i>
                    {{ __("print") }}
                </button>
            </div>
        </div>
    </form>
    <div class="tile-footer">
        <button class="btn btn-primary" style="background-color: #053474; border-color: #053474" onclick="view()">
            {{ __("view") }}
        </button>
        <a class="btn btn-primary" href="">
            <i class="fas fa-redo"></i>
            {{ __("Reset") }}
        </a>
    </div>
</div>
<div class="tile" id="disRemove" style="margin: 10px; display:none">
    <div class="tile-body">
        <div class="row" id="viewDate">
        </div>
    </div>
</div>
@endsection

@section("scripts")
<script type="text/javascript">
    $("#order_id").select2({
        placeholder: "{{__('select-order')}}",
        width: "100%",
    });
    $("#print").select2({
        placeholder: "{{__('select-the-print-type')}}",
        width: "100%",
    });

    if ($("#print").val() == 0) {
        $("#startDate").prop("disabled", true);
        $("#order_id").prop("disabled", true);
        $("#endDate").prop("disabled", true);
    }

    function removeDisabled() {
        if ($("#print").val() == 0) {
            $("#startDate").prop("disabled", true);
            $("#order_id").prop("disabled", true);
            $("#endDate").prop("disabled", true);
        } else {
            $("#startDate").prop("disabled", false);
            $("#order_id").prop("disabled", false);
            $("#endDate").prop("disabled", false);

        }
    }

    function dateStart() {
        var baseUrl = window.location.origin;
        if ($("#startDate").val() == "") {
            $("#endDate").prop("disabled", true);
        } else {
            $("#endDate").prop("disabled", false);
        }
        $("#endDate").val("");
        document.getElementById("endDate").setAttribute("min", $("#startDate").val());
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type: "post",
            url: baseUrl + "/en/ajax/reports/maintenance",
            dataType: 'json',
            data: {
                start_date: $("#startDate").val(),
            },
            success: function(response) {
                $("#order_id").empty();
                $("#order_id").append(`
                <option value="0">{{__('select-order')}}</option>
                <option value="all">{{__('All')}}</option>`);
                response.data.orders.forEach(function(date) {
                    $("#order_id").append(`<option value="${date.id}">${date.number}</option>`);
                });
            }
        });
    }

    function dateEnd() {
        var baseUrl = window.location.origin;
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type: "post",
            url: baseUrl + "/en/ajax/reports/production",
            dataType: 'json',
            data: {
                start_date: $("#startDate").val(),
                end_date: $("#endDate").val(),
            },
            success: function(response) {
                $("#order_id").empty();
                $("#order_id").append(`
                <option value="0">{{__('select-order')}}</option>
                <option value="all">{{__('All')}}</option>`);
                response.data.orders.forEach(function(date) {
                    $("#order_id").append(`<option value="${date.id}">${date.number}</option>`);
                });
            }
        });
    }

    function view() {
        var baseUrl = window.location.origin;
        var formData = new FormData();
        var completed = 1;
        if ($("#print").val() == "0") {
            swal({
                icon: 'error',
                title: "{{__('error')}}",
                text: "{{__('please-select-print')}}"
            })
            completed = 0;
        } else if ($("#order_id").val() == "0" && $("#startDate").val() == "" && $("#endDate").val() == "") {
            swal({
                icon: 'error',
                title: "{{__('error')}}",
                text: "{{__('please-select-both')}}"
            })
            completed = 0;
        } else if (($("#startDate").val() == "" || $("#endDate").val()) == "" && $("#order_id").val() != null) {
            swal({
                icon: 'error',
                title: "{{__('error')}}",
                text: "{{__('please-select-start-and-end')}}"
            })
            completed = 0;
        }

        if (completed === 1) {
            formData.append("print", $("#print").val());
            formData.append("order_id", $("#order_id").val());
            formData.append("startDate", $("#startDate").val());
            formData.append("endDate", $("#endDate").val());
            $.ajax({
                type: "post",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: baseUrl + "/en/ajax/reports/production_view",
                dataType: 'json',
                contentType: false,
                processData: false,
                data: formData,
                success: function(response) {
                    if (response["status"] === 200 && response["type"] === "summaries") {
                        $("#disRemove").css("display", ""); // Removes the display property
                        $("#remPrint").css("display", ""); // Removes the display property
                        let viewDateContent = `<div id="caption">{{__("Summaries Of Orders")}}</div>`;
                        // Check if the request is "All Maintenance Order"
                        if (response.data.request === "All Maintenance Order") {
                            viewDateContent += `<p style="color: black;font-size:13px;width: 100%;align-items: center;text-align: center;">${response.data.request}</p><hr style="width:50%;margin:auto;padding: 10px;">`;
                        } else if (Array.isArray(response.data.request) && response.data.request.length >= 3) {
                            viewDateContent += `<p style="color: black;font-size:13px;width: 100%;align-items: center;text-align: center;">From <span style="text-decoration: underline;">${response.data.request[1]}</span> To <span style="text-decoration: underline;">${response.data.request[2]}</span></p><hr style="width:50%;margin:auto;padding: 10px;">`;
                        } else {
                            viewDateContent += `<div style="background-color:white;color:black;border:none"></div><hr style="width:50%;margin:auto;padding: 10px;">`;
                        }
                        viewDateContent += `
                        <table id="vouchers">
                            <thead>
                                <tr>
                                @if(app()->getLocale() == 'en')
                                    <th style="width: 3%">#</th>
                                    <th style="width: 7%">{{__("number")}}</th>
                                    <th style="width: 9%">{{__("date")}}</th>
                                    <th style="width: 26%">{{__("client-name")}}</th>
                                    <th style="width: 6%">{{__("store")}}</th>
                                    <th style="width: 6%">{{__("status")}}</th>
                                    <th style="width: 12%">{{__("production-line")}}</th>
                                    <th style="width: 11%">{{__("booking-orders")}}</th>
                                    <th style="width: 13%">{{__("purchase-orders")}}</th>
                                @else
                                    <th style="text-align: right; width: 13%">{{__("purchase-orders")}}</th>
                                    <th style="text-align: right; width: 11%">{{__("booking-orders")}}</th>
                                    <th style="text-align: right; width: 12%">{{__("production-line")}}</th>
                                    <th style="text-align: right; width: 6%">{{__("status")}}</th>
                                    <th style="text-align: right; width: 6%">{{__("store")}}</th>
                                    <th style="text-align: right; width: 26%">{{__("client-name")}} </th>
                                    <th style="text-align: right; width: 9%">{{__("date")}}</th>
                                    <th style="text-align: right; width: 7%">{{__("number")}}</th>
                                    <th style="text-align: right; width: 3%">#</th>
                                    @endif
                                </tr>
                            </thead>
                            <tbody>`;
                        // Loop through orders and add table rows
                        response.data.orders.forEach((order, index) => {
                            const createdAtDate = new Date(order.created_at);
                            const formattedDate = `${createdAtDate.getDate()}-${createdAtDate.getMonth() + 1}-${createdAtDate.getFullYear()}`;
                            viewDateContent += `
                            <tr>
                                <td rowspan="2">${index + 1}</td>
                                <td rowspan="2">${order.number}</td>
                                <td rowspan="2">${formattedDate}</td>
                                <td rowspan="2">${order.customer_id}</td>
                                <td rowspan="2">${order.store_id}</td>
                                <td rowspan="2">${order.status_id}</td>
                                <td>${order.production_line_id}</td>
                                <td>${order.booked_order_number}</td>
                                <td>${order.purchase_order_number}</td>
                            <tr>
                                <td>{{__("total-qty")}}</td>
                                <td>${order.booked_order_quantity}</td>
                                <td>${order.purchase_order_quantity}</td>
                            </tr>
                            </tr>`;
                        });
                        viewDateContent += `</tbody></table>`;
                        // Append the content to the #viewDate element
                        $("#viewDate").html(viewDateContent);
                    } else if (response["status"] === 200 && response["type"] === "detailed") {
                        $("#disRemove").css("display", ""); // Removes the display property
                        $("#remPrint").css("display", ""); // Removes the display property
                        $("#viewDate").empty(``);
                        $("#viewDate").append(`<div id="caption">{{__("Detailed Orders")}}</div>`);
                        if (response.data.request === "All Maintenance Order") {
                            $("#viewDate").append(`<p style="color: black;font-size:13px;align-items: center;text-align: center;width: 100%;">${response.data.request}</p><hr style="width: 50%;margin:auto;margin-bottom:15px">`);
                        } else if (Array.isArray(response.data.request) && response.data.request.length >= 3) {
                            $("#viewDate").append(`<p style="color: black;font-size:13px;align-items: center;text-align: center;width: 100%;">From <span style="text-decoration: underline;">${response.data.request[1]}</span>To <span style="text-decoration: underline;">${response.data.request[2]}</span></p><hr style="width: 50%;margin:auto;margin-bottom:15px">`);
                        } else {
                            $("#viewDate").append(`<div style="background-color:white;color:black;border:none"></div><hr style="width: 50%;margin:auto;margin-bottom:15px">`);
                        }
                        if (response.data.orders) {
                            response.data.orders.forEach((order, index) => {
                                let tableItem = ""; // Define the variables here
                                let tableBooking = "";
                                let tablePurchase = "";
                                const createdAtDate = new Date(order.created_at);
                                const formattedDate = `${createdAtDate.getDate()}-${createdAtDate.getMonth() + 1}-${createdAtDate.getFullYear()}`;
                                const orderHtml = `
                                <div class="row" style="{{app()->getLocale() === 'ar' ? 'direction: rtl' : ''}};width:100%">
                                    <div class="column" style="width:25%">
                                        <span style="font-weight: bold">{{__("order-number")}} : ${order.number} </span>
                                    </div>
                                    <div class="column" style="width:25%">
                                        <span style="font-weight: bold">{{__("date")}} : ${formattedDate} </span>
                                    </div>
                                    <div class="column" style="width:25%">
                                        <span style="font-weight: bold">{{__("client-name")}} : ${order.customer_id} </span>
                                    </div>
                                    <div class="column" style="width:25%">
                                        <span style="font-weight: bold;background: yellow;padding: 5px;border-radius: 5px;">{{__("status")}} : ${order.status_id} </span>
                                    </div>
                                </div>
                                <div class="row" style="{{app()->getLocale() === 'ar' ? 'direction: rtl' : ''}};width:100%">
                                    <div class="column" style="width:25%">
                                        <span style="font-weight: bold">{{__("store")}} : ${order.store_id} </span>
                                    </div>
                                    <div class="column" style="width:25%">
                                        <span style="font-weight: bold">{{__("production-line")}} : ${order.production_line_id}</span>
                                    </div>
                                </div>`;

                                if (order.order_details && order.order_details.length > 0) {
                                    tableItem = `
                                    <div id="caption">{{__("item-detailed")}}</div>
                                    <div class="column" style="width:100%;padding:0;margin-bottom: 20px;">
                                        <table id="vouchers">
                                            <thead>
                                                <tr>
                                                    @if(app()->getLocale() == 'en')
                                                        <th style="width: 5%">#</th>
                                                        <th style="width: 5%">{{__("item-code")}}</th>
                                                        <th style="width: 30%">{{__("item-name")}}</th>
                                                        <th style="width: 5%">{{__("unit")}}</th>
                                                        <th style="width: 5%">{{__("type")}}</th>
                                                        <th style="width: 5%">{{__("quantity")}}</th>
                                                        <th style="width: 10%">{{__("produced-quantity")}}</th>
                                                    @else
                                                        <th style="width: 10%">{{__("produced-quantity")}}</th>
                                                        <th style="width: 5%">{{__("quantity")}}</th>
                                                        <th style="text-align: right;width: 5%">{{__("type")}}</th>
                                                        <th style="text-align: right; width: 5%">{{__("unit")}}</th>
                                                        <th style="text-align: right;width: 20%">{{__("item")}}</th>
                                                        <th style="text-align: right;width: 5%">{{__("item-code")}}</th>
                                                        <th style="text-align: right; width: 5%">#</th>

                                                    @endif
                                                </tr>
                                            </thead>
                                            <tbody>
                                                ${order.order_details.map((item, key) => `
                                                    <tr>
                                                        <td>${key + 1}</td>
                                                        <td>${item.code}</td>
                                                        <td>${item.name}</td>
                                                        <td>${item.unit}</td>
                                                        <td>${item.type}</td>
                                                        <td>${item.quantity}</td>
                                                        <td>${item.produced_quantity}</td>
                                                    </tr>
                                                `).join('')}
                                            </tbody>
                                        </table>
                                    </div>
                                    <hr style="width: 100%;">`;
                                }

                                if (order.purchase_details && order.purchase_details.length > 0) {
                                    tablePurchase = `
                                    <div id="caption">{{__("purchase-orders")}} <span style="color:#053474">( ${order.purchase_order_number} )</span></div>
                                    <div class="column" style="width:100%;padding:0;margin-bottom: 20px;">
                                        <table id="vouchers">
                                            <thead>
                                                <tr>
                                                    @if(app()->getLocale() == 'en')
                                                        <th style="width: 5%">#</th>
                                                        <th style="width: 5%">{{__("item-code")}}</th>
                                                        <th style="width: 30%">{{__("item-name")}}</th>
                                                        <th style="width: 5%">{{__("unit")}}</th>
                                                        <th style="width: 5%">{{__("type")}}</th>
                                                        <th style="width: 5%">{{__("quantity")}}</th>
                                                    @else
                                                        <th style="text-align: right;width: 5%">{{__("quantity")}}</th>
                                                        <th style="text-align: right;width: 5%">{{__("type")}}</th>
                                                        <th style="text-align: right; width: 5%">{{__("unit")}}</th>
                                                        <th style="text-align: right;width: 20%">{{__("item")}}</th>
                                                        <th style="text-align: right;width: 5%">{{__("item-code")}}</th>
                                                        <th style="text-align: right; width: 5%">#</th>

                                                    @endif
                                                </tr>
                                            </thead>
                                            <tbody>
                                                ${order.purchase_details.map((item, key) => `
                                                    <tr>
                                                        <td>${key + 1}</td>
                                                        <td>${item.code}</td>
                                                        <td>${item.name}</td>
                                                        <td>${item.unit}</td>
                                                        <td>${item.type}</td>
                                                        <td>${item.quantity}</td>
                                                    </tr>
                                                `).join('')}
                                            </tbody>
                                        </table>
                                    </div>
                                    <hr style="width: 100%;">`;
                                }

                                if (order.booked_details && order.booked_details.length > 0) {
                                    tableBooking = `
                                    <div id="caption">{{__("booking-orders")}} <span style="color:#053474">( ${order.booked_order_number} )</span></div>
                                    <div class="column" style="width:100%;padding:0;margin-bottom: 20px;">
                                        <table id="vouchers">
                                            <thead>
                                                <tr>
                                                    @if(app()->getLocale() == 'en')
                                                        <th style="width: 5%">#</th>
                                                        <th style="width: 5%">{{__("item-code")}}</th>
                                                        <th style="width: 30%">{{__("item-name")}}</th>
                                                        <th style="width: 5%">{{__("unit")}}</th>
                                                        <th style="width: 5%">{{__("type")}}</th>
                                                        <th style="width: 5%">{{__("quantity")}}</th>
                                                    @else
                                                        <th style="text-align: right;width: 5%">{{__("quantity")}}</th>
                                                        <th style="text-align: right;width: 5%">{{__("type")}}</th>
                                                        <th style="text-align: right; width: 5%">{{__("unit")}}</th>
                                                        <th style="text-align: right;width: 20%">{{__("item")}}</th>
                                                        <th style="text-align: right;width: 5%">{{__("item-code")}}</th>
                                                        <th style="text-align: right; width: 5%">#</th>

                                                    @endif
                                                </tr>
                                            </thead>
                                            <tbody>
                                                ${order.booked_details.map((item, key) => `
                                                    <tr>
                                                        <td>${key + 1}</td>
                                                        <td>${item.code}</td>
                                                        <td>${item.name}</td>
                                                        <td>${item.unit}</td>
                                                        <td>${item.type}</td>
                                                        <td>${item.quantity}</td>
                                                    </tr>
                                                `).join('')}
                                            </tbody>
                                        </table>
                                    </div>
                                    <hr style="width: 100%;">
                                    <br><br><br><br>`;
                                }
                                const orderContent = `
                                <div class="order" style="width: 100%;border: 1px solid #ddd;margin: 10px;padding: 10px;">
                                    ${orderHtml}
                                    ${tableItem}
                                    ${tablePurchase}
                                    ${tableBooking}
                                </div>`;
                                $("#viewDate").append(orderContent);
                            });
                        }
                    }
                }
            });
        }
    }
</script>


@endsection