@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>{{__("production-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")}}">{{__("production-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="{{$order['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="{{$order['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>{{__("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 ($order['store_id']==$store->id)
                                        {{'selected="selected"'}}
                                        @endif>{{$store->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>{{__("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 ($order['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>{{__("sales-order-number")}}</b></label>
                            <div class="col-sm-8">
                                <select name="sales_order_id" id="sales_order_id" class="form-control" disabled>
                                    <option></option>
                                    @foreach($sales_orders as $salesOrder)
                                    <option value="{{$salesOrder->id}}" @if ($order['sales_order_id']==$salesOrder->id)
                                        {{'selected="selected"'}}
                                        @endif>{{$salesOrder->number}}
                                    </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>{{__("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="{{$order['customer_name']}}" id="customer_name" 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>{{__("production-line")}}</b></label>
                            <div class="col-sm-8">
                                <select name="production_line" id="production_line" class="form-control" disabled>
                                    <option></option>
                                    @foreach($productionLines as $productionLine)
                                    <option value="{{$productionLine->id}}" @if ($order['production_line_id']==$productionLine->id)
                                        {{'selected="selected"'}}
                                        @endif>{{$productionLine->name}}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </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: 8%">{{__('date')}}<span class="required"></span></th>
                                        <th style="width: 6%">{{__('added-by')}}<span class="required"></span></th>
                                        <th style="width: 20%">{{__('code')}}<span class="required"></span></th>
                                        <th style="width: 30%">{{__('item')}}<span class="required"></span></th>
                                        <th style="width: 5%">{{__('quantity')}}<span class="required"></span></th>
                                        <th style="width: 20%">{{__('images')}}<span class="required"></span></th>
                                    </tr>
                                </thead>
                                <tbody>


                                    @php $sl=1 @endphp
                                    @foreach($producedItems as $producedItem)
                                    <tr>
                                        <td>{{$sl++}}</td>
                                        <td>{{$producedItem->date}}</td>
                                        <td>{{$producedItem->users->full_name}}</td>
                                        <td>{{$producedItem->OrderDetails->item->getItemCode()}}</td>
                                        <td>{{$producedItem->OrderDetails->item->name}}</td>
                                        <td>{{$producedItem->quantity}}</td>
                                        <td>
                                            @foreach($producedItem->files as $image)
                                            <button class="btn btn-primary show-image-btn" style="padding: 4px;" data-image-path=" {{asset($image->path.'/'.$image->file_name)}}">{{__('image')}}</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">{{__('image')}}</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">
    $("#store").select2({
        placeholder: "{{__('select-store')}}",
        width: "100%",
    });
    $("#status").select2({
        placeholder: "{{__('select-status')}}",
        width: "100%",
    });
    $("#sales_order_id").select2({
        placeholder: "{{__('select-purchase-type')}}",
        width: "100%",
    });
    $("#production_line").select2({
        placeholder: "{{__('select-unit')}}",
        width: "100%",
    });
</script>
@endsection