@extends("layouts.admin.app")

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

@section("page-nav-title")
<div class="app-title">
    <div>
        <h1><i class="fa fa-dashboard"></i>{{__("purchase-orders")}}</h1>
        <p>{{__("details")}}</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="{{route("admin.purchase-orders.index", "all")}}">{{__("purchase-orders")}}</a>
        </li>
        <li class="breadcrumb-item"><a href="#">{{__("details")}}</a></li>
    </ul>
</div>
@endsection

@section("content")
<div class="row">
    <div class="col-md-12">
        <div class="tile" style="padding: 5px 5px 5px 5px">
            <div class="tile-body">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="form-group row" style="margin-bottom: 1px">
                            <label style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 27%;" class="col-form-label"><b>{{__("number")}}</b></label>
                            <div class="col-sm-8">
                                <input class="form-control" style="padding: 3px;font-size: 13px" type="text" name="number" id="number" value="{{$purchaseOrder['number']}}" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group row" style="margin-bottom: 1px">
                            <label style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 30%;" class="col-form-label"><b>{{__("date")}}</b></label>
                            <div class="col-sm-8">
                                <input class="form-control" style="@if(app()->getLocale() == 'ar') text-align: right @endif; padding: 3px; font-size: 13px" type="date" value="{{$purchaseOrder['date']}}" name="date" id="date" readonly>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <div class="form-group row" style="margin-bottom:1px">
                            <label style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 27%;" class="col-form-label"><b>{{__("employee-name")}}</b></label>
                            <div class="col-sm-8">
                                <select name="employee" id="employee" class="form-control" disabled>
                                    <option></option>
                                    @foreach($employees as $employee)
                                    <option value="{{$employee->id}}" @if ($purchaseOrder['employee_id']==$employee->id)
                                        {{'selected="selected"'}}
                                        @endif>{{$employee->full_name}}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group row" style="margin-bottom: 2px">
                            <label style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 30%;" class="col-form-label"><b>{{__("store")}}</b></label>
                            <div class="col-sm-8">
                                <select name="store" id="store" class="form-control" disabled>
                                    <option></option>
                                    @foreach($stores as $store)
                                    <option value="{{$store->id}}" @if ($purchaseOrder['store_id']==$store->id)
                                        {{'selected="selected"'}}
                                        @endif>{{$store->name}}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    @if ($purchaseOrder['sales_order_id']== 0)
                    <div class="col-lg-6">
                        <div class="form-group row" style="margin-bottom: 2px">
                            <label style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 27%;" class="col-form-label"><b>{{__("sales-order-number")}}</b></label>
                            <div class="col-sm-8">
                                <input class="form-control" style="padding: 3px;font-size: 13px" type="text" name="sales_order_id" id="sales_order_id" value="0" readonly>
                                <div class="input-error" id="salesOrderIdError" style="padding-top: 10px;display: none; font-size: 13px"></div>
                            </div>
                        </div>
                    </div>
                    @else
                    <div class="col-lg-6">
                        <div class="form-group row" style="margin-bottom: 2px">
                            <label style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 27%;" class="col-form-label"><b>{{__("sales-order-number")}}</b></label>
                            <div class="col-sm-8">
                                <input type="hidden" name="sales_order_id" id="sales_order_id" value="{{$purchaseOrder->salesOrder->id}}">
                                <input class="form-control" style="padding: 3px;font-size: 13px" value="{{$purchaseOrder->salesOrder->number}}" readonly>
                                <div class="input-error" id="salesOrderIdError" style="padding-top: 10px;display: none; font-size: 13px"></div>
                            </div>
                        </div>
                    </div>
                    @endif
                    <div class="col-lg-6">
                        <div class="form-group row" style="margin-bottom: 2px">
                            <label style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 30%;" class="col-form-label"><b>{{__("status")}}</b></label>
                            <div class="col-sm-8">
                                <select name="status" id="status" class="form-control" disabled>
                                    <option></option>
                                    @foreach($status as $orderStatus)
                                    <option value="{{$orderStatus->id}}" @if ($purchaseOrder['status_id']==$orderStatus->id)
                                        {{'selected="selected"'}}
                                        @endif>{{$orderStatus->status}}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <div class="form-group row" style="margin-bottom: 2px">
                            <label style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 27%;" class="col-form-label"><b>{{__("purchase-type")}}</b></label>
                            <div class="col-sm-8">
                                <select name="purchase_type" id="purchase_type" class="form-control" disabled>
                                    <option></option>
                                    <option value="Local" @if ($purchaseOrder['purchase_type']=="Local" ) selected @endif>{{__("local")}}</option>
                                    <option value="Importation" @if ($purchaseOrder['purchase_type']=="Importation" ) selected @endif>{{__("importation")}}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    @if (isset($purchaseOrder->salesOrder) && !empty($purchaseOrder['customer_name']))
                    <div class="col-lg-6">
                        <div class="form-group row" style="margin-bottom: 1px">
                            <label style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 30%;" class="col-form-label"><b>{{ __("client-name") }}</b></label>
                            <div class="col-sm-8">
                                <input class="form-control" style="@if(app()->getLocale() == 'ar') text-align: right @endif; padding: 3px; font-size: 13px" type="text" name="customer_name" value="{{ $purchaseOrder['customer_name'] }}" id="customer_name" readonly>
                            </div>
                        </div>
                    </div>
                    @else
                    @endif
                </div>
                <div class="row mt-3">
                    <div class="col-md-12">
                        <div class="scrollable-table" style="max-height: 380px">
                            <table class="table table-hover table-bordered table-fix-head" style="margin-bottom: 5px">
                                <thead style="font-size: 12px; line-height: 2px">
                                    <tr>
                                        <th style="width: 1%">#</th>
                                        <th style="width: 7%">{{__('supplier')}}<span class="required"></span></th>
                                        <th style="width: 7%">{{__('code')}}<span class="required"></span></th>
                                        <th style="width: 20%">{{__('item')}}<span class="required"></span></th>
                                        <th style="width: 3%">{{__('unit')}}</th>
                                        <th style="width: 2%">{{__('quantity')}}<span class="required"></span></th>
                                        <th style="width: 5%">{{__('total-price')}}</th>
                                        <th style="width: 5%">{{__('unit-price')}}</th>
                                        <th style="width: 5%">{{__('include-vat')}}</th>
                                        <th style="width: 6%">{{__('price-with-vat')}}</th>
                                        <th style="width: 12%">{{__('Invoice')}}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php $sl=1 @endphp
                                    @foreach($purchaseItems as $purchaseItem)
                                    <tr>
                                        <td>{{$sl++}}</td>
                                        <td>{{$purchaseItem->Supplier->en_name}}</td>
                                        <td>{{$purchaseItem->OrderDetails->item->getItemCode()}}</td>
                                        <td>{{$purchaseItem->OrderDetails->item->name}}</td>
                                        <td>{{$purchaseItem->OrderDetails->item->unit->unit_name}}</td>
                                        <td>{{$purchaseItem->quantity}}</td>
                                        <td>{{$purchaseItem->unit_price * $purchaseItem->quantity}}</td>
                                        <td>{{$purchaseItem->unit_price}}</td>
                                        @if($purchaseItem->include_vat == 1)
                                        <td> <span class="badge badge-success">{{__('Yes')}}</span></td>
                                        <td>{{$purchaseItem->unit_price * $purchaseItem->quantity + ($purchaseItem->unit_price * $purchaseItem->quantity * $vat)}}</td>
                                        @else
                                        <td> <span class="badge badge-danger">{{__('No')}}</span></td>
                                        <td>{{$purchaseItem->unit_price * $purchaseItem->quantity}}</td>
                                        @endif
                                        <td>
                                            @foreach($purchaseItem->files as $image)
                                            <button class="btn btn-primary show-image-btn" style="padding: 4px;" data-image-path=" {{asset($image->path.'/'.$image->file_name)}}">{{__('Invoice')}}</button>
                                            @endforeach
                                        </td>
                                        <!-- Modal to display the image -->
                                        <div class="modal" id="imageModal" tabindex="-1" role="dialog">
                                            <div class="modal-dialog" role="document" style="max-height: 50%;">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title">{{__('Invoice')}}</h5>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <s pan aria-hidden="true">&times;</s>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body" style="display: flex;justify-content: center;">
                                                        <img id="modalImage" src="" alt="Image" width=50% height=50%>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section("scripts")
<script>
    $(document).ready(function() {
        // JavaScript to handle the modal functionality
        const modal = $("#imageModal");
        const modalImage = $("#modalImage");

        function showModal(imagePath) {
            modalImage.attr("src", imagePath);
            modal.modal("show");
        }

        // Event listeners for buttons
        $(".show-image-btn").on("click", function() {
            const imagePath = $(this).data("image-path");
            showModal(imagePath);
        });
    });
</script>
<script type="text/javascript">
    $("#employee").select2({
        placeholder: "{{__('select-employee-name')}}",
        width: "100%",
    });
    $("#store").select2({
        placeholder: "{{__('select-store')}}",
        width: "100%",
    });
    $("#status").select2({
        placeholder: "{{__('select-status')}}",
        width: "100%",
    });
    $("#purchase_type").select2({
        placeholder: "{{__('select-purchase-type')}}",
        width: "100%",
    });
    $("#unit" + noOfRows).select2({
        placeholder: "{{__('select-unit')}}",
        width: "100%",
    });
</script>
@endsection