@extends('layouts.app')

@section('title', \App\CPU\translate('Movement Request Details'))
@push('css_or_js')
    <link rel="stylesheet" href="{{ asset('assets') }}/css/bootstrap-datepicker.min.css" />
@endpush

@section('content')
    <div id="kt_app_content" class="app-content flex-column-fluid">
        <div id="kt_app_content_container" class="app-container container-xxxl">
            @include('includes.breadcrumb', [
                'title' => 'Movement Details for ' . $movement->request_no,
                'model' => 'Movement',
                'sub_model' => 'Details',
                'model_object' => null,
            ])
            <div class="card">
                    <div class="card-header justify-content-end">
                        <div class="d-flex align-items-center gap-1 gap-lg-1">
                            @include('newIncludes.linkBtn', [
                                'title' => 'Submit',
                                'classes' => 'btn btn-sm fw-bold btn-primary ' . ($movement->isDisabled(['order_return_approve']) ? 'disabled-link' : null),
                                'id' => 'approveBtn',
                                'attributes' => [
                                    'data-request_no' => $movement->request_no,
                                ],
                            ])

                            @include('newIncludes.linkBtn', [
                                'title' => 'Save',
                                'classes' => 'btn btn-sm fw-bold btn-primary ' . ($movement->isDisabled(['order_return_approve']) ? 'disabled-link' : null),
                                'id' => 'saveBtn',
                                'attributes' => [
                                    'data-request_no' => $movement->request_no,
                                ],
                            ])

                            @include('newIncludes.exportBtn', [
                                'route' => route('admin.movement.export', $movement->id),
                            ])

                            @include('newIncludes.modalOpenLink', [
                                'iconClass' => 'fas fa-paperclip',
                                'title' => 'Attachments',
                                'id' => 'modalOpener',
                                'modal' => '#add_attachment_modal',
                                'classes' => 'btn-light-primary',
                            ])
                        </div>
                    </div>
                 <div class="px-3 py-4">
                    <div class="row flex-grow-1">
                        <form class="row" action="{{ route('admin.movement.update') }}" method="post"
                            id="return_request_form" enctype="multipart/form-data">
                            <input type="hidden" name="request_id" value="{{ $movement->id }}">
                            @csrf
                            <div class="col-3">
                                <div class="row mb-4">
                                    <div class="d-flex align-items-center">
                                        <label
                                            class="fw-bold fs-5 text-gray-800 me-2">{{ \App\CPU\translate('Request#') }}:</label>
                                        <span class="fw-bold fs-6 text-gray-600">{{ $movement->request_no }}</span>
                                    </div>
                                </div>

                                <div class="row mb-4">
                                    <div class="d-flex align-items-center">
                                        <label class="fw-bold fs-5 text-gray-800 me-2">{{ \App\CPU\translate('Status') }}:
                                        </label>
                                        <span class="fw-bold fs-5 text-gray-600 fs-6">{{ $movement->status }}</span>
                                    </div>
                                </div>

                                <div class="row mb-4">
                                    <div class="d-flex align-items-center">
                                        <label
                                            class="fw-bold fs-5 text-gray-800 me-2">{{ \App\CPU\translate('Total Diffrence') }}:
                                        </label>
                                        <span class="fw-bold fs-5 text-gray-600 fs-6">{{ $movement->totalDiffrence }}</span>
                                    </div>
                                </div>
                            </div>

                            <div class="col-4">
                                @if ($movement->movement_order_number)
                                    <div class="row mb-4">
                                        <div class="d-flex align-items-center">
                                            <label
                                                class="fw-bold fs-5 text-gray-800 me-2">{{ \App\CPU\translate('Order number') }}:
                                            </label>
                                            <span
                                                class="fw-bold fs-5 text-gray-600 fs-6">{{ $movement->movement_order_number }}</span>
                                        </div>
                                    </div>
                                @endif
                                <div class="row mb-4">
                                    <div class="d-flex align-items-center">
                                        <label
                                            class="fw-bold fs-5 text-gray-800 me-2">{{ \App\CPU\translate('Note') }}:</label>
                                        <span class="fw-bold fs-5 text-gray-600 fs-6">{{ $movement->note }}</span>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>


                <div class="px-3 py-4">
                    <button type="submit" id="approveRequestQty" class="btn btn-sm fw-bold flatBtn btn-success"
                        {{ $movement->isDisabled() }}>Fill requsted qty</button>
                </div>
                <div class="card-body pt-0">
                    <div id="kt_customers_table_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer"
                        style="overflow-x:auto">
                        <table class="table align-middle table-row-bordered fs-6 gy-5 dataTable no-footer" id="returnTable">
                            <thead>
                                <tr class="text-start text-gray-400 fw-bold fs-7  gs-0">
                                    {{-- <th>
                                    {{ \App\CPU\translate('Seq#') }}
                                </th> --}}
                                    {{-- <th>{{ \App\CPU\translate('Request#') }}</th>
                                    <th>{{ \App\CPU\translate('Request Line No') }}</th> --}}
                                    <th>{{ \App\CPU\translate('From Warehouse') }}</th>
                                    <th>{{ \App\CPU\translate('From Item') }}</th>
                                    <th>{{ \App\CPU\translate('From Item Description') }}</th>
                                    <th>{{ \App\CPU\translate('Lot') }}</th>
                                    <th>{{ \App\CPU\translate('To Item') }}</th>
                                    <th>{{ \App\CPU\translate('To Warehouse') }}</th>

                                    <th>{{ \App\CPU\translate('To Item Description') }}</th>
                                    <th>{{ \App\CPU\translate('Expiry') }}</th>

                                    <th>{{ \App\CPU\translate('Price Diffrence') }}</th>
                                    <th>{{ \App\CPU\translate('Request Qty') }}</th>
                                    <th>{{ \App\CPU\translate('Approved Qty') }}</th>
                                    <th> {{ \App\CPU\translate('Remaining Qty') }} </th>
                                    <th> {{ \App\CPU\translate('Order No') }} </th>
                                    <th> {{ \App\CPU\translate('Po No') }} </th>
                                    {{-- <th> {{ \App\CPU\translate('Status') }} </th> --}}
                                    {{-- <th>{{ \App\CPU\translate('Customer Note') }}</th> --}}
                                    <th>{{ \App\CPU\translate('Rejection Reason') }}</th>
                                    <th>{{ \App\CPU\translate('Supplier Note') }}</th>
                                    {{-- <th>{{ \App\CPU\translate('Approve') }}</th> --}}
                                </tr>
                            </thead>
                            <tbody>
                                @if (!empty($movement))
                                    @foreach ($movement->movementDetails as $movement_index => $detail)
                                        <tr>
                                            {{-- <td>{{ $detail['request_no'] }}</td>
                                            <td>{{ $detail['request_line_no'] }}</td> --}}
                                            <td class="itemNo">{{ $detail['from_warehouse'] }}</td>

                                            <td class="wordNoWrap" style="position: relative">
                                                {{ $detail['item_from_no'] }}
                                                <span style="position: absolute; bottom:10%; left: 0; z-index: 1;"
                                                    class="badge badge-light-danger fs-9"> price:
                                                    {{ $detail->from_item->CALCULATED_COST }}
                                                </span>
                                            </td>
                                            <td class="wordWrapBreak w-200px">
                                                {{ $detail->from_item->ITEM_LONG_NAME ?? null }}
                                            </td>
                                            <td>{{ $detail['lot'] }}</td>
                                            <td class="wordNoWrap" style="position: relative">
                                                {{ $detail['item_to_no'] }}
                                                <span style="position: absolute; bottom:10%; left: 0; z-index: 1;"
                                                    class="badge badge-light-danger fs-9"> price:

                                                    {{ $detail->to_item->CALCULATED_COST }}
                                                </span>
                                            </td>
                                            <td class="itemNo">{{ $detail['to_warehouse'] }}</td>
                                            <td class="wordWrapBreak w-200px">
                                                {{ $detail->to_item->ITEM_LONG_NAME ?? null }}
                                            </td>

                                            <td class="centered">{{ $detail['expiry_date'] }}</td>
                                            <td>
                                                {{ number_format($detail->price_diffrence, 2) }}
                                            </td>
                                            <td class="requestQty centered">{{ $detail['request_qty'] }}</td>

                                            <td class="approvedQty">
                                                <input class="form-control w-75px" type="text"
                                                    data-line_no="{{ $detail['id'] }}" max="{{ $detail['request_qty'] }}"
                                                    min="1" value="{{ $detail['approved_qty'] }}"
                                                    {{ $movement->isDisabled(['movement_approve']) }}>
                                            <td class="remainingQty centered">
                                                {{ $detail->remaining_qty }}
                                            </td>
                                            <td class="centered">{{ $detail['order_no'] }}</td>

                                            <td class="centered">{{ $detail['po_no'] }}</td>

                                            {{-- <td>{{ $detail['status'] }}</td> --}}
                                            <td class="rejectionReason">
                                                <textarea class="form-control w-300px" rows="1" type="text" {{ $movement->isDisabled(['movement_approve']) }}>{{ $detail['rejection_reason'] }}</textarea>
                                            </td>
                                            <td class="supplier_note">
                                                <textarea class="form-control w-300px" rows="1" type="text" {{ $movement->isDisabled(['movement_approve']) }}>{{ $detail['supplier_note'] }}</textarea>
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                            </tbody>
                        </table>

                    </div>
                </div>
                <div class="table-responsive mt-4">
                    {{-- <div class="d-flex justify-content-lg-end">
                        {{ $order->links() }}
                    </div> --}}
                </div>
                {{-- @if (count($orders) == 0)
                    <div class="text-center p-4">
                        <p class="mb-0">{{ \App\CPU\translate('No_data_to_show') }}</p>
                    </div>
                @endif --}}
            </div>
        </div>
    </div>
    <div class="modal fade zIndexClass" id="add_attachment_modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered mw-900px">
            <div class="modal-content">
                <div class="modal-header">
                    <h2>Attachments</h2>
                    <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                        <span class="svg-icon svg-icon-1">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
                                    transform="rotate(-45 6 17.3137)" fill="currentColor" />
                                <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                    transform="rotate(45 7.41422 6)" fill="currentColor" />
                            </svg>
                        </span>
                    </div>
                </div>
                <div class="modal-body py-lg-10 px-lg-10">
                    <div id="kt_app_content_container" class="app-container container-xxxl">
                        <div class="card">
                            <div class="card-header">
                                <form class="row add_new_form" style="width: 100%"
                                    action="{{ route('admin.movement.upload_attachment') }}" method="post"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <input type="hidden" name="movement_request_id" value="{{ $movement->id }}">
                                    <div class="row w-100">
                                        <div class="col-3 fv-row mb-10 flex-row-fluid py-lg-5">
                                            <a class="btn btn-primary" id="attachmentBtn">
                                                <!--begin::Svg Icon | path: icons/duotune/files/fil018.svg-->
                                                <span class="svg-icon svg-icon-2">
                                                    <svg width="24" height="24" viewBox="0 0 24 24"
                                                        fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path opacity="0.3" d="M10 4H21C21.6 4 22 4.4 22 5V7H10V4Z"
                                                            fill="currentColor">
                                                        </path>
                                                        <path
                                                            d="M10.4 3.60001L12 6H21C21.6 6 22 6.4 22 7V19C22 19.6 21.6 20 21 20H3C2.4 20 2 19.6 2 19V4C2 3.4 2.4 3 3 3H9.20001C9.70001 3 10.2 3.20001 10.4 3.60001ZM16 11.6L12.7 8.29999C12.3 7.89999 11.7 7.89999 11.3 8.29999L8 11.6H11V17C11 17.6 11.4 18 12 18C12.6 18 13 17.6 13 17V11.6H16Z"
                                                            fill="currentColor"></path>
                                                        <path opacity="0.3"
                                                            d="M11 11.6V17C11 17.6 11.4 18 12 18C12.6 18 13 17.6 13 17V11.6H11Z"
                                                            fill="currentColor"></path>
                                                    </svg>
                                                </span>
                                                Attach Files
                                            </a>
                                            <label class="d-flex align-items-center fs-5 fw-semibold mb-2">
                                                <span id="fileName"></span>
                                            </label>
                                            <div class="wrapper" style="display:none;">
                                                <input type="file" id="uplodfile" name="attached_file" required />
                                            </div>

                                        </div>
                                        <div class="col-6 fv-row" style="margin-top: -14px">
                                            <label class="d-flex align-items-center fs-5 fw-semibold mb-2">
                                                <span class="required">Attachment Name</span>
                                            </label>
                                            <input type="text" class="form-control form-control-lg form-control-solid"
                                                name="attachment_name" required placeholder="Attachment Name" />
                                        </div>
                                        <div class="col-2 flex-row-fluid py-lg-5 px-lg-15">

                                            <button type="submit" id="SubmitAttachmentBtn"
                                                class="btn  fw-bold btn-primary">Submit</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="card-body row">
                                @if (!empty($movement->attachments))
                                    @foreach ($movement->attachments as $attachment_index => $attachment)
                                        @php
                                            if ($attachment->type == 'pdf') {
                                                $cover_srs = asset('/assets/media/svg/files/pdf.svg');
                                            } elseif ($attachment->type == 'file') {
                                                $cover_srs = asset('/assets/media/svg/files/upload.svg');
                                            } else {
                                                $cover_srs = asset('/assets/media/svg/files/blank-image.svg');
                                            }
                                        @endphp
                                        <div class="col-3">
                                            <div
                                                class="card-body d-flex justify-content-center text-center flex-column p-8">
                                                <a href="{{ asset($attachment->path) }}" target="_blank"
                                                    class="text-gray-800 text-hover-primary d-flex flex-column">
                                                    <div class="symbol symbol-60px mb-5">
                                                        <img src="{{ $cover_srs }}">
                                                    </div>
                                                    <div class="fs-5 fw-bold mb-2">{{ $attachment->name }}</div>
                                                </a>
                                                <div class="fs-7 fw-semibold text-gray-400"></div>
                                            </div>
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade zIndexClass" id="line_invoice_modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered mw-900px">
            <div class="modal-content">
                <div class="modal-header">
                    <h2>Invoices</h2>
                    <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                        <span class="svg-icon svg-icon-1">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
                                    transform="rotate(-45 6 17.3137)" fill="currentColor" />
                                <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                    transform="rotate(45 7.41422 6)" fill="currentColor" />
                            </svg>
                        </span>
                    </div>
                </div>
                <div class="modal-body py-lg-10 px-lg-10">
                    <div id="kt_app_content_container" class="app-container container-xxxl">
                        <div class="card">
                            <div class="card-body" style="overflow-x: auto">
                                <table class="table align-middle table-row-bordered fs-6 gy-5 dataTable no-footer"
                                    id="returnTable">
                                    <thead>
                                        <tr class="text-start text-gray-400 fw-bold fs-7  gs-0">
                                            {{-- <th>
                                            {{ \App\CPU\translate('Seq#') }}
                                        </th> --}}
                                            {{-- <th>{{ \App\CPU\translate('Request#') }}</th>
                                            <th>{{ \App\CPU\translate('Request Line No') }}</th> --}}
                                            <th>{{ \App\CPU\translate('Type') }}</th>
                                            <th>{{ \App\CPU\translate('Order#') }}</th>
                                            <th>{{ \App\CPU\translate('Customer PO#') }}</th>
                                            <th>{{ \App\CPU\translate('Invoice#') }}</th>
                                            <th>{{ \App\CPU\translate('Invoice Date') }}</th>
                                            <th>{{ \App\CPU\translate('Qty') }}</th>


                                        </tr>
                                    </thead>
                                    <tbody class="invoiceTableBody">

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(document).on('click', '#approveRequestQty', function() {
            $('#returnTable tbody tr').each(function(i, z) {
                var requested = $(z).find('.requestQty').text();
                $(z).find('.approvedQty input:not(:disabled)').val(requested);
                $(z).find('.remainingQty').not('.disabled').text('0');
            });
        });

        $(document).on('keyup', '.approvedQty input:not(:disabled)', function() {
            var val = $(this).val();
            //$(this).val($(this).val().replace(/[^0-9]/g, ''));
            var thisInput = $(this);
            var requested = thisInput.closest('tr').find('.requestQty').text();

            setTimeout(function() {
                thisInput.closest('tr').find('.remainingQty').not('.disabled').text(requested - val);
            }, 400);

            if (val > parseInt(requested)) {
                thisInput.val(requested);
                setTimeout(function() {
                    thisInput.closest('tr').find('.remainingQty').not('.disabled').text('0');
                }, 400);
            }
            if (val == '') {
                setTimeout(function() {
                    thisInput.closest('tr').find('.remainingQty').not('.disabled').text('');
                }, 400);
            }

        });
    </script>
    <script>
        $(document).on('click', '#approveBtn', function(e) {
            e.preventDefault();
            var supplierRTV = $('textarea[name=supplier_RTV]').val();
            if (supplierRTV === "") {
                return toastr.error('Supplier Reference is required');
            }
            var requestNo = $(this).data('request_no');
            var remainigArr = [];
            $('#returnTable tbody tr').each(function(i, z) {
                var val = $(z).find('.remainingQty').not('.disabled').text().trim()
                if (val != "") {
                    remainigArr.push(val);
                }
            });
            let existRemainig = remainigArr.filter(word => word > 0);

            if (existRemainig.length > 0) {
                Swal.fire({
                    title: 'There is a remainig quantity is not approved',
                    type: 'success',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'ok',
                    cancelButtonText: 'cancel',
                    reverseButtons: true
                }).then((result) => {
                    if (result.value) {
                        Swal.fire({
                            title: 'Are you sure you want to submit?',
                            type: 'success',
                            showCancelButton: true,
                            confirmButtonColor: '#3085d6',
                            cancelButtonColor: '#d33',
                            confirmButtonText: 'Yes',
                            cancelButtonText: 'cancel',
                            reverseButtons: true
                        }).then((result) => {
                            if (result.value) {
                                $('#saveBtn').click();
                                $(document).ajaxComplete(function(event, xhr, settings) {
                                    // Check if the AJAX request was related to the save action
                                    if (settings.url.includes(
                                            "{{ route('admin.movement.update') }}")) {
                                        let response = xhr.responseJSON || JSON.parse(xhr
                                            .responseText);
                                        if (response.success ===
                                            true) { // Adjust based on your response format
                                            submitApproval(requestNo);
                                        } else {
                                            $(document).off('ajaxComplete');
                                        }
                                    }
                                });
                            }
                        })
                    }
                })
            } else {
                Swal.fire({
                    title: 'Are you sure you want to submit?',
                    type: 'success',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes',
                    cancelButtonText: 'cancel',
                    reverseButtons: true
                }).then((result) => {
                    if (result.value) {
                        $('#saveBtn').click();
                        $(document).ajaxComplete(function(event, xhr, settings) {
                            // Check if the AJAX request was related to the save action
                            if (settings.url.includes(
                                    "{{ route('admin.movement.update') }}")) {
                                let response = xhr.responseJSON || JSON.parse(xhr.responseText);
                                if (response.success ===
                                    true) { // Adjust based on your response format
                                    submitApproval(requestNo);
                                } else {
                                    $(document).off('ajaxComplete');
                                }
                            }
                        });
                    }
                })
            }
        });

        $(document).on('click', '#saveBtn', function(e) {
            e.preventDefault();
            let linesData = [];
            var requestId = $('input[name=request_id]').val();

            var supplierRTV = $('textarea[name=supplier_RTV]').val();
            if (supplierRTV === "") {
                return toastr.error('Supplier Reference is required');
            }
            var supplierNote = $('textarea[name=supplier_note]').val();

            $('#returnTable tbody tr').each(function(i, z) {
                var approved = $(z).find('.approvedQty input:not(:disabled)').val();
                var requested = $(z).find('.requestQty').text();
                var lineNo = $(z).find('.approvedQty input').data('line_no');
                var itemNo = $(z).find('.itemNo').text();
                var rejectionReason = $(z).find('.rejectionReason textarea:not(:disabled)').val();
                var supplierNote = $(z).find('.supplier_note textarea:not(:disabled)').val();
                var remainig = requested - approved;
                if (approved) {
                    linesData.push({
                        "lineNo": lineNo,
                        "itemNo": itemNo,
                        "remainig": remainig,
                        "approved": approved,
                        "rejectionReason": rejectionReason,
                        "supplierNote": supplierNote,
                    });
                }
            });
            linesDataJson = JSON.stringify(linesData);
            // $('.spinnerDiv').removeClass('d-none');
            // $('.zIndexClass').css('z-index', '900');
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });
            $.ajax({
                url: "{{ route('admin.movement.update') }}",
                method: 'POST',
                data: {
                    requestId: requestId,
                    linesData: linesDataJson,
                    supplierRTV: supplierRTV,
                    supplierNote: supplierNote,
                },
                success: function(res) {
                    if (res.success == true) {
                        toastr.success(res.message);
                    } else {
                        toastr.error(res.message);
                    }
                },
                error: function(error) {
                    toastr.error('there is an error when saving data');
                }
            });
        });

        function submitApproval(requestNo) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });
            $('#approveBtn').prop('disabled', 'disabled');
            $('#saveBtn').prop('disabled', 'disabled');
            $.ajax({
                url: "{{ route('admin.movement.approve') }}",
                method: 'POST',
                data: {
                    request_no: requestNo,
                },
                success: function(res) {
                    if (res.success == true) {
                        toastr.success(res.message);
                        location.reload();
                    } else {
                        toastr.error(res.message);
                        // setTimeout(function() {
                        //     location.reload();
                        // }, 3000);
                    }
                },
                error: function() {
                    toastr.error('There is a problem when approving request');
                    // setTimeout(function() {
                    //     location.reload();
                    // }, 5000);
                }
            });
        }
    </script>
    <script>
        $("#attachmentBtn").click(function() {
            $("#uplodfile").click();
        });
        $("#uplodfile").change(function() {
            var file = $(this).val().replace(/C:\\fakepath\\/ig, '');
            console.log(file);
            $("#fileName").html(file);
        });
    </script>
@endpush