@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;
        width: 100%;
        text-align: center;
    }
</style>

@section("page-nav-title")
<div class="app-title">
    <div>
        <h1><i class="fa fa-dashboard"></i>{{__("reports")}}</h1>
        <p>{{__("warehouse-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>{{__("warehouse-report")}}</h3>
    </div>
    <form id="reportForm" action="{{ route("admin.reports.warehousePdf") }}" 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-store")}}</label>
                        <select class="form-control" id="store_selection" name="store_id">
                            <option value="0">{{__('select-the-store')}}</option>
                            <option value="all">{{__('All')}}</option>
                            @foreach ($stores as $store)
                            <option value="{{$store->id}}">{{$store->name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="form-group">
                        <label class="control-label">{{__("select-item")}}</label>
                        <select class="form-control" id="items" name="item_id" disabled>
                        </select>
                    </div>
                </div>

            </div>
            <div class="row">
                <div class="col-lg-12">
                </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>
    </form>
    <div class="tile-footer">
        <button class="btn btn-primary" style="background-color: #053474; border-color: #053474" id="warehouse_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="viewDateWarehouse">
        </div>
    </div>
</div>
</div>

@endsection

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

    $('#store_selection').change(function() {
        if ($("#store_id").val() == 0) {
            $("#items").prop("disabled", true);
        } else {
            $("#items").prop("disabled", false);
        }
        let baseUrl = window.location.origin;
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type: "post",
            url: baseUrl + "/en/ajax/reports/warehouse",
            dataType: 'json',
            data: {
                store_id: $("#store_selection").val(),
            },
            success: function(response) {
                $("#items").empty();
                const basic = `<option value="all">{{__('All')}}</option>`;
                $("#items").append(basic);
                response.data.forEach(item => {
                    const option = `<option value="${item.id}">${item.name}</option>`;
                    $("#items").append(option);
                });
            },
            error: function(xhr, status, error) {
                console.error(xhr);
            }
        });
    });


    $('#warehouse_view').click(function() {
        let responseData = "";
        let baseUrl = window.location.origin;
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type: "post",
            url: baseUrl + "/en/ajax/reports/warehouse_view",
            dataType: 'json',
            data: {
                store_id: $("#store_selection").val(),
                item_id: $("#items").val(),
            },
            success: function(response) {
                responseData += `
                        <table id="vouchers">
                            <thead>
                                <tr>
                                @if(app()->getLocale() == 'en')
                                    <th style="width: 3%">#</th>
                                    <th style="width: 10%">{{__("item-name")}}</th>
                                    <th style="width: 10%">{{__("store")}}</th>
                                    <th style="width: 10%">{{__("qty_in")}}</th>
                                    <th style="width: 10%">{{__("qty_out")}}</th>
                                    <th style="width: 10%">{{__("qty_res")}}</th>
                                    @else
                                    <th style="text-align: right">{{__("qty_res")}}</th>
                                    <th style="text-align: right; width: 15%">{{__("qty_out")}}</th>
                                    <th style="text-align: right; width: 6%">{{__("qty_in")}} </th>
                                    <th style="text-align: right; width: 5%">{{__("store")}}</th>
                                    <th style="text-align: right; width: 10%">{{__("item-name")}}</th>
                                    <th style="text-align: right; width: 3%">#</th>
                                    @endif
                                </tr>
                            </thead>
                        <tbody>`;
                response.data.items.forEach((item, index) => {
                    $("#disRemove").css("display", "");
                    $("#remPrint").css("display", ""); // Removes the display property
                    responseData += `
                    @if(app()->getLocale() == 'en')
                        <tr>
                            <td>${index + 1}</td>
                            <td>${item.item.name}</td>
                            <td>${item.store.name}</td>
                            <td>${item.quantity_in}</td>
                            <td>${item.quantity_out}</td>
                            <td>${item.quantity_res}</td>
                        </tr>
                        @else
                        <tr>
                            <td style="text-align: right; width: 10%">${item.quantity_res}</td>
                            <td style="text-align: right; width: 10%">${item.quantity_out}</td>
                            <td style="text-align: right; width: 10%">${item.quantity_in}</td>
                            <td style="text-align: right; width: 10%">${item.store.name}</td>
                            <td style="text-align: right; width: 40%">${item.item.name}</td>
                            <td style="text-align: right; width: 3%">${index + 1}</td>
                        </tr>
                        @endif`;});
                responseData += `</tbody></table>`;
                $("#viewDateWarehouse").html(responseData);
            },
            error: function(xhr, status, error) {
                console.error(xhr);
            }
        });
    });
</script>


@endsection