@extends("layouts.admin.app")
@section("page-title")
{{__("Dashboard")}}
@endSection
@section("page-nav-title")
<div class="app-title" style="padding: 11px">
    <div>
        <h1><i class="fa fa-dashboard"></i>{{__("sales-orders")}}</h1>
        <p>{{__("sales-order-processing")}}</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.sales-orders.index")}}">{{__("sales-orders")}}</a>
        </li>
        <li class="breadcrumb-item"><a href="#">{{__("processing")}}</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="{{$voucher['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="text" name="date" value="{{$voucher['date']}}" id="date" readonly>
                            </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>{{__("classification")}}</b></label>
                            <div class="col-sm-8">
                                <input class="form-control" style="padding: 3px;font-size: 13px" type="text" value="{{$voucher['classification']}}" readonly>
                            </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>{{__("client-name")}}</b></label>
                            <div class="col-sm-8">
                                <input class="form-control" style="padding: 3px;font-size: 13px" type="text" value="{{$voucher['client']}}" readonly>
                            </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>{{__("representative-name")}}</b></label>
                            <div class="col-sm-8" id="representativeDiv">
                                <input class="form-control" style="padding: 3px;font-size: 13px" type="text" value="{{$voucher['representative']}}" readonly>
                            </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>{{__("purchase-order-number")}}</b></label>
                            <div class="col-sm-8">
                                <input class="form-control" style="padding: 3px;font-size: 13px" type="text" value="{{$voucher['purchase_order_number']}}" name="purchaseOrderNumber" id="purchaseOrderNumber" readonly>
                            </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>{{__("store")}}</b></label>
                            <div class="col-sm-8">
                                <input class="form-control" style="padding: 3px;font-size: 13px" type="text" value="{{$voucher['store']}}" readonly>

                            </div>
                        </div>
                    </div>
                    @if(count($voucher->files) > 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: 30%;" class="col-form-label"><b>{{__("uploaded-documents")}}</b></label>
                            <div class="col-sm-8">
                                <div class="form-group row">
                                    <div class="col-sm-8">
                                                                                <div style="border: black solid 1px; padding-top: 2px ;@if($number_of_files == 0) display: none  @endif" class="pdf-files">
                                            @if($number_of_files > 0)
                                                                                        @foreach($voucher->files as $file)
                                            <div class="file">
                                                <span class="file-number" style="font-size: 12px; margin-left: 5px">{{$file_number++}}</span>
                                                - <a target="_blank" href="{{ asset($file->path.'/'.$file->file_name)}}"><span style="font-size: 12px; padding: 5px" class="field-view">{{$file->file_name}}</span></a>
                                            </div>
                                            @endforeach

                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <table class="table table-condensed table-striped">
                                    <thead style="font-size: 12px; line-height: 2px">
                                        <tr>
                                            <th></th>
                                            <th>#</th>
                                            <th>{{__('code')}}</th>
                                            <th style="width: 25%">{{__('item')}}</th>
                                            <th style="width: 10%">{{__('quantity')}}</th>
                                            <th style="width: 20%">{{__('total-sub-quantity')}}</th>
                                            <th style="width: 15%">{{__("control")}}</th>
                                        </tr>
                                    </thead>
                                    <tbody style="font-size: 12px">
                                                                                @foreach($voucherItems as $voucherItem)
                                        <tr>
                                            <td style="padding:5px 0 2px 12px" data-toggle="collapse" data-target="#demo{{++$serial_number}}" class="accordion-toggle"><i class="fas fa-plus" style="cursor: pointer"></i></td>
                                            <td style="padding:5px 0 2px 12px">{{$serial_number}}</td>
                                            <td style="padding:5px 0 2px 12px">{{$voucherItem->itemCode}}</td>
                                            <td style="padding:5px 0 2px 12px">{{$voucherItem->itemName}}</td>
                                            <td style="padding:5px 0 2px 12px">{{$voucherItem->converted_quantity}}</td>
                                            <td style="padding:5px 0 2px 12px">{{$voucherItem->totalSubQuantity}}</td>
                                            <td style="padding:2px 0 2px 12px">
                                                <button type="button" onclick="addBtn({{$voucherItem->id}})" class="btn btn-primary" data-toggle="modal" style="font-size: 12px; padding: 2px" @if($voucherItem->converted_quantity == $voucherItem->totalSubQuantity) disabled @endif>
                                                    <i class="fas fa-plus" style="font-size: 10px"></i>{{__('add-sub-items')}}
                                                </button>
                                            </td>
                                            <!-- Add Modal -->
                                            <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true" data-backdrop="static">
                                                <div class="modal-dialog" role="document">
                                                    <div class="modal-content" style="width: 120%">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title">{{__('add-sub-items')}}</h5>
                                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                <span aria-hidden="true">&times;</span>
                                                            </button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <div id="appendRow">
                                                            </div>
                                                            <i class="fa fa-fw fa-lg fa-plus-circle" style="font-size: 18px; color: green; cursor: pointer" onclick="addRow()"></i>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{__('close')}}</button>
                                                                <button type="submit" class="btn btn-primary" onclick="saveBtn()">{{__('save')}}</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </tr>
                                        <tr>
                                            <td colspan="12" class="hiddenRow" style="padding-right: 3%; padding-left: 3%; padding-top: 5px; padding-bottom: 0">
                                                <div class="accordian-body collapse" id="demo{{$serial_number}}">
                                                    <table class="table table-striped" style="margin: 5px">
                                                        <thead style="font-size: 12px; line-height: 2px">
                                                            <tr class="info">
                                                                <th>#</th>
                                                                <th style="width: 20%">{{__('code')}}</th>
                                                                <th style="width: 40%">{{__('sub-item')}}</th>
                                                                <th style="width: 15%">{{__('quantity')}}</th>
                                                                <th>{{__("control")}}</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody style="font-size: 12px">