@extends('layouts.mop_master')
@section('css')
    <style>
        .details {
            font-size: 15px;
        }

        .bg-color {
            background-color: #e9edfa;
            margin: auto;
            padding: 1em 0 0.1em 0;
            border-radius: 6px;
        }
    </style>
@endsection
@section('title')
    Order
@endsection
@section('content')
    <div class="card">
        <div class="card-header">
            <div class="col-lg-12 d-flex align-items-center">
                <h4 class="card-title mb-0 flex-grow-1">ORDER DETAILS</h4>
                <div>
                    <a type="button" class="btn btn-soft-primary waves-effect waves-light" href="/admin/mop-order"><i
                            class="las la-angle-double-left"></i> Go Back</a>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-lg-4 text-center">
                    <div class="bg-color">
                        <h5 class="text-primary">ORDER CODE</h5>
                        <p class="details">{{ $order->order_code }}</p>
                    </div>
                </div>
                <div class="col-lg-4 text-center">
                    <div class="bg-color">
                        <h5 class="text-primary">ORDER DATE</h5>
                        <p class="details">{{ \Carbon\Carbon::parse($order->order_date)->format('d M Y') }}
                        </p>
                    </div>
                </div>
                <div class="col-lg-4 text-center">
                    <div class="bg-color">
                        <h5 class="text-primary">Customer</h5>
                        <p class="details">{{ $order->debitLedger?->name }}</p>
                    </div>
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-lg-4 text-center">
                    <div class="bg-color">
                        <h5 class="text-primary">Production Date</h5>
                        <p class="details">
                            {{ $order->production_date ? \Carbon\Carbon::parse($order->production_date)->format('d M Y') : '--' }}
                        </p>
                    </div>
                </div>
                <div class="col-lg-4 text-center">
                    <div class="bg-color">
                        <h5 class="text-primary">Deliverey Date</h5>
                        <p class="details">
                            {{ $order->delivery_date ? \Carbon\Carbon::parse($order->delivery_date)->format('d M Y') : '--' }}
                        </p>
                    </div>
                </div>
                <div class="col-lg-4 text-center">
                    <div class="bg-color">
                        <h5 class="text-primary">REMARKS</h5>
                        <p class="details">{{ $order->remarks ?? '--' }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <div class="col-lg-12">
                <h4 class="card-title mb-0 flex-grow-1">ITEMS</h4>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Item</th>
                            <th>Qty</th>
                            <th>Unit</th>
                            <th>Remarks</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                            $totalTaxableValue = 0;
                        @endphp
                        @foreach ($orderItems as $item)
                            <tr>
                                <td>{{ $item->stockItem->name }}@if ($item->variant_id != null)
                                        <br>
                                        ({{ $item->variant->name }})
                                    @endif
                                    @if ($item->getFirstMedia('image') != null)
                                        <span class="btn btn-warning btn-sm mr-1 image"
                                            data-url="{{ $item->getFirstMedia('image')->getUrl() }}"
                                            data-name="{{ $item->stockItem->name }}@if ($item->variant_id != null) <br>
                                        ({{ $item->variant->name }}) @endif"><i
                                                class="fa fa-image"></i></span>
                                    @endif
                                </td>
                                <td>{{ $item->quantity }}</td>
                                <td>{{ $item->unit->symbol }}</td>
                                <td>{{ $item->remarks }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div id="imageModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-md">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="modal-title-image"></h4>
                    <button type="button" class="close" data-bs-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12 form-group">
                            <img src="" alt="" id="image" width="100%" class="zoom">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
    <script>
        $(document).on('click', '.image', function(e) {
            var image = $(this).data('image');
            var itemName = $(this).data('name');
            $('#modal-title-image').text('Image for ' + itemName);
            $('#image').attr('src', $(this).data('url'));
            $('#imageModal').modal('show');
        });

        $('#imageModal').on('hidden.bs.modal', function() {
            $('#image').attr('src', '');
        });
    </script>
@endsection