@extends('layouts.app')

@section('title', \App\CPU\translate('Destruction 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' => 'Destruction Details for ' . $destruction->request_no,
                'model' => 'Destruction',
                '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">
                        {{-- display --}}
                        @include('newIncludes.linkBtn', [
                            'title' => 'Approve',
                            'classes' =>
                                'btn btn-sm fw-bold btn-primary ' .
                                ($destruction->isDisabled(['destruction_approve']) ? 'disabled-link' : null),
                            'id' => 'approveBtn',
                            'attributes' => [
                                'data-request_no' => $destruction->request_no,
                            ],
                        ])

                        @include('newIncludes.linkBtn', [
                            'title' => 'Save',
                            'classes' =>
                                'btn btn-sm fw-bold btn-primary ' .
                                ($destruction->isDisabled(['destruction_approve']) ? 'disabled-link' : null),
                            'id' => 'saveBtn',
                            'attributes' => [
                                'data-request_no' => $destruction->request_no,
                            ],
                        ])
                        @include('newIncludes.modalOpenLink', [
                            'iconClass' => 'bi bi-calendar-check fs-2',
                            'title' =>
                                $destruction->isDisabled(['destruction_approve'], true, [
                                    App\Enums\DestructionStatusEnum::APPOINTMENT_BOOKED,
                                ]) && isset($destruction->booked_time)
                                    ? 'Check Appointment'
                                    : 'Book Appointment',
                            'id' => 'bookAppointmentBtn',
                            'modal' => '#book_appointment_modal',
                            'classes' =>
                                'btn-success ' .
                                ($destruction->isDisabled([], true) && !isset($destruction->booked_time)
                                    ? 'disabled-link'
                                    : null),
                        ])
                        @include('newIncludes.exportBtn', [
                            'route' => route('admin.destruction.details.export', $destruction->id),
                        ])
                        @include('newIncludes.modalOpenLink', [
                            'iconClass' => 'fas fa-plus',
                            'title' => 'Attachments',
                            'id' => 'modalOpener',
                            'modal' => '#add_attachment_modal',
                            'classes' => 'btn-light-primary',
                        ])

                        {{-- @include('newIncludes.modalOpenLink', [
                            'iconClass' => 'fas fa-plus',
                            'title' =>
                                $destruction->isDisabled(['destruction_execute'], true) &&
                                isset($destruction->execution)
                                    ? 'Check Execution'
                                    : 'Execute',

                            'id' => 'modalOpener',
                            'modal' => '#execution_modal',
                            'classes' =>
                                'btn-success ' .
                                ($destruction->isDisabled(
                                    ['destruction_execute'],
                                    true,
                                    [
                                        App\Enums\GoodsRequestStatusEnum::APPROVED,
                                        App\Enums\GoodsRequestStatusEnum::EXECUTED,
                                        App\Enums\GoodsRequestStatusEnum::PARTIALLY,
                                    ],
                                    false)
                                    ? 'disabled-link'
                                    : ''),
                        ]) --}}

                        @include('newIncludes.modalOpenLink', [
                            'iconClass' => 'fas fa-plus',
                            'title' => 'Reconciliations',
                            'id' => 'modalOpener',
                            'modal' => '#reconciliation_modal',
                            'classes' =>
                                'btn-success ' .
                                ($destruction->isDisabled(
                                    ['destruction_approve'],
                                    true,
                                    [
                                        App\Enums\GoodsRequestStatusEnum::APPROVED,
                                        App\Enums\GoodsRequestStatusEnum::PARTIALLY,
                                    ],
                                    false)
                                    ? 'disabled-link'
                                    : ''),
                        ])

                    </div>
                </div>
                <div class="px-3 py-4">
                    <div class="row flex-grow-1">
                        <form class="row" action="{{ route('admin.expiry.update') }}" method="post"
                            enctype="multipart/form-data">
                            <input type="hidden" name="request_id" value="{{ $destruction->id }}">
                            @csrf
                            <div class="col-3">
                                <div class="row mb-4">
                                    <label
                                        class="col-lg-4 col-md-4 fw-bold fs-5 text-gray-800">{{ \App\CPU\translate('Request#') }}:</label>
                                    <div class="col-lg-8 col-smmd d-flex align-items-center">
                                        <span class="fw-bold fs-6 text-gray-800">{{ $destruction->request_no }}</span>
                                    </div>
                                </div>
                                <div class="row mb-4">
                                    <label
                                        class="col-lg-4 col-md-4 fw-bold fs-5 text-gray-800">{{ \App\CPU\translate('Status') }}:</label>
                                    <div class="col-lg-8 col-smmd d-flex align-items-center">
                                        <span class="fw-bold fs-5 text-gray-800 fs-6">{{ $destruction->status }}</span>
                                    </div>
                                </div>
                                <div class="row mb-4">
                                    <label
                                        class="col-lg-4 col-md-4 fw-bold fs-5 text-gray-800">{{ \App\CPU\translate('Creation Date') }}:</label>
                                    <div class="col-lg-8 col-smmd d-flex align-items-center">
                                        <span class="fw-bold fs-5 text-gray-800 fs-6">{{ $destruction->created_at }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="row mb-4">
                                    <label
                                        class="col-lg-4 col-md-4 fw-bold fs-5 text-gray-800">{{ \App\CPU\translate('Note') }}:</label>
                                    <div class="col-lg-8 col-md-8 d-flex align-items-center">
                                        <textarea class="form-control" name="supplier_note" type="text" disabled>{{ $destruction->note }}</textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="col-3 d-none">
                                <div class="d-flex align-items-center justify-content-end">
                                    {{-- <button type="button" id="approveBtn" data-request_no="{{ $destruction->request_no }}"
                                        class="btn btn-sm fw-bold btn-primary bigMainBtn"
                                        {{ $destruction->isDisabled(['destruction_approve']) }}>Submit</button> --}}
                                    <button type="button" id="saveBtn" data-request_no="{{ $destruction->request_no }}"
                                        class="btn btn-sm fw-bold btn-primary bigMainBtn ms-2"
                                        {{ $destruction->isDisabled(['destruction_approve']) }}>Save</button>
                                </div>
                                <div class="d-flex align-items-center justify-content-end">
                                    @include('includes.modalOpenLink', [
                                        'iconClass' => 'bi bi-calendar-check fs-2',
                                        'title' =>
                                            $destruction->isDisabled(['destruction_approve'], true, [
                                                App\Enums\DestructionStatusEnum::APPOINTMENT_BOOKED,
                                            ]) && isset($destruction->booked_time)
                                                ? 'Check Appointment'
                                                : 'Book Appointment',
                                        'id' => 'bookAppointmentBtn',
                                        'modal' => '#book_appointment_modal',
                                        'classes' =>
                                            'btn-success ' .
                                            ($destruction->isDisabled([], true) &&
                                            !isset($destruction->booked_time)
                                                ? 'disabled-link'
                                                : null),
                                    ])
                                    @include('includes.exportBtn', [
                                        'route' => route('admin.destruction.details.export', $destruction->id),
                                    ])
                                </div>
                                <div class="d-flex align-items-center justify-content-end">
                                    @include('includes.modalOpenLink', [
                                        'iconClass' => 'fas fa-plus',
                                        'title' => 'Attachments',
                                        'id' => 'modalOpener',
                                        'modal' => '#add_attachment_modal',
                                        'classes' => 'btn-light-primary',
                                    ])
                                    @include('includes.modalOpenLink', [
                                        'iconClass' => 'fas fa-plus',
                                        'title' =>
                                            $destruction->isDisabled(['destruction_execute'], true) &&
                                            isset($destruction->execution)
                                                ? 'Check Execution'
                                                : 'Execute',
                                    
                                        'id' => 'modalOpener',
                                        'modal' => '#execution_modal',
                                        'classes' =>
                                            'btn-success ' .
                                            ($destruction->isDisabled(
                                                ['destruction_execute'],
                                                true,
                                                [
                                                    App\Enums\GoodsRequestStatusEnum::APPROVED,
                                                    App\Enums\GoodsRequestStatusEnum::EXECUTED,
                                                    App\Enums\GoodsRequestStatusEnum::PARTIALLY,
                                                ],
                                                false)
                                                ? 'disabled-link'
                                                : ''),
                                    ])
                                </div>
                        </form>
                    </div>
                </div>
                <div class="px-3 py-4 d-flex align-items-center">
                    <button type="button" id="approveRequestQty" class="btn btn-sm fw-bold flatBtn btn-success"
                        {{ $destruction->isDisabled(['destruction_approve']) }}>Fill requsted qty</button>

                    @include('includes.linkBtn', [
                        'title' => 'Approve All',
                        'classes' =>
                            'fw-bold flatBtn btn-success ' .
                            ($destruction->isDisabled(['destruction_approve']) ? 'disabled-link' : ''),
                        'route' => route('admin.destruction.approveAll', $destruction->id),
                    ])

                </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="destructionTable">
                            <thead>
                                <tr class="text-start text-gray-400 fw-bold fs-7  gs-0">
                                    <th>{{ \App\CPU\translate('Item#') }}</th>
                                    <th>{{ \App\CPU\translate('Item Description') }}</th>
                                    <th>{{ \App\CPU\translate('Lot') }}</th>
                                    <th>{{ \App\CPU\translate('Warehouse') }}</th>
                                    <th>{{ \App\CPU\translate('Subinventory') }}</th>
                                    <th>{{ \App\CPU\translate('Expiry') }}</th>
                                    <th>{{ \App\CPU\translate('Qty') }}</th>
                                    <th>{{ \App\CPU\translate('approved Qty') }} </th>
                                    <th>{{ \App\CPU\translate('Remaining Qty') }} </th>
                                    <th>{{ \App\CPU\translate('Source') }} </th>
                                    <th>{{ \App\CPU\translate('Source Request#') }} </th>
                                    <th>{{ \App\CPU\translate('Approval Reference') }} </th>
                                    <th>{{ \App\CPU\translate('Approved By') }} </th>
                                    <th>{{ \App\CPU\translate('Approved Date') }} </th>
                                    <th>{{ \App\CPU\translate('Customer No') }} </th>
                                    <th>{{ \App\CPU\translate('Customer Name') }} </th>
                                    <th>{{ \App\CPU\translate('Po No') }} </th>
                                    <th>{{ \App\CPU\translate('Po Date') }} </th>
                                    <th>{{ \App\CPU\translate('Supplier Invoice') }} </th>
                                    <th>{{ \App\CPU\translate('Supplier Inv Date') }} </th>
                                    <th>{{ \App\CPU\translate('ASN') }}</th>
                                    <th>{{ \App\CPU\translate('ASN Date') }}</th>
                                    <th>{{ \App\CPU\translate('Price') }}</th>
                                    <th>{{ \App\CPU\translate('Amount') }}</th>
                                    <th>{{ \App\CPU\translate('Receiveing Date') }}</th>
                                    <th>{{ \App\CPU\translate('Status') }}</th>
                                    <th>{{ \App\CPU\translate('Replaced Request') }}</th>
                                    <th>{{ \App\CPU\translate('Rejection Reason') }}</th>
                                    <th>{{ \App\CPU\translate('Supplier Note') }}</th>
                                    {{-- <th>{{ \App\CPU\translate('actions') }}</th> --}}
                                </tr>
                            </thead>
                            <tbody>
                                @if (!empty($destruction))
                                    @foreach ($destructionLines as $shelf => $detail)
                                        <tr>
                                            <td class="itemNo">{{ $detail['item_no'] }}</td>
                                            <td class="wordWrapBreak w-200px">{{ $detail->item->ITEM_LONG_NAME ?? null }}
                                            </td>
                                            <td>{{ $detail['lot'] }}</td>
                                            <td>{{ $detail['warehouse'] }}</td>
                                            <td>{{ $detail['sub_inventory'] ?? null }}</td>
                                            <td class="wordNoWrap" style="position: relative">
                                                @if ($detail['shelf_life_days'] > 0)
                                                    <span style="position: absolute; top:10%; left: 0; z-index: 1;"
                                                        class="badge badge-light-danger fs-11">{{ $detail['shelf_life_days'] }}
                                                        Months</span>
                                                @endif
                                                <p>{{ Carbon\Carbon::parse($detail['expiry_date'])->format('d-m-Y') }}</p>
                                            </td>
                                            <td class="requestQty centered">{{ $detail['qty'] }}</td>
                                            <td class="approvedQty">
                                                <input class="form-control w-75px" type="text"
                                                    data-line_no="{{ $detail['id'] }}" max="{{ $detail['qty'] }}"
                                                    min="1" value="{{ $detail['approved_qty'] }}"
                                                    {{ $destruction->isDisabled(['destruction_approve']) == 'disabled' || $detail->status == 'Replaced' ? 'disabled' : null }}>
                                            </td>

                                            <td class="remainingQty centered"> {{ $detail->remaining_qty }}</td>
                                            <td>{{ $detail['source'] }}</td>
                                            <td>{{ $detail['source_request_no'] }}</td>
                                            <td>{{ $detail['supplier_reference'] }}</td>
                                            <td>{{ $detail['approved_by'] }}</td>
                                            <td>{{ $detail['approved_date'] }}</td>
                                            <td>{{ $detail['customer_no'] }}</td>
                                            <td>{{ $detail['customer_name'] }}</td>
                                            <td>{{ $detail['po_no'] }}</td>
                                            <td>{{ $detail['po_no_date'] }}</td>
                                            <td>{{ $detail['supplier_inv'] }}</td>
                                            <td>{{ $detail['supplier_inv_date'] }}</td>
                                            <td>{{ $detail['asn'] }}</td>
                                            <td>{{ $detail['asn_date'] }}</td>
                                            <td>{{ $detail['price'] }}</td>
                                            <td>{{ $detail['amount'] }}</td>
                                            <td>{{ $detail['receiveing_date'] }}</td>
                                            <td>{{ $detail['status'] }}</td>
                                            <td>{{ $detail->replaced->request_no ?? null }}</td>
                                            <td class="rejectionReason">
                                                <textarea class="form-control w-300px" rows="1" type="text"
                                                    {{ $destruction->isDisabled(['destruction_approve']) == 'disabled' || $detail->status == 'Replaced' ? 'disabled' : null }}>{{ $detail['rejection_reason'] }}</textarea>
                                            </td>
                                            <td class="supplier_note">
                                                <textarea class="form-control w-300px" rows="1" type="text"
                                                    {{ $destruction->isDisabled(['destruction_approve']) == 'disabled' || $detail->status == 'Replaced' ? 'disabled' : null }}>{{ $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">
                        {{ $destructionLines->links() }}
                    </div>
                </div> --}}
                @if (count($destructionLines) == 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="book_appointment_modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered mw-900px">
            <div class="modal-content">
                <div class="modal-header">
                    <h2>Appointment</h2>
                    <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                        @include('includes.closeIcon')
                    </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">
                                @if ($destruction->booked_time != null)
                                    <div class="row w-100">
                                        <div class="col-6 fv-row mb-10" data-kt-calendar="datepicker">
                                            <div id= "bookAppointmentDiv" class="fv-row mb-9">
                                                <label class="fs-6 fw-semibold mb-2">Appointment Date</label>
                                                <input class="form-control form-control-solid  input" type="text"
                                                    name="appointment_date"
                                                    value="{{ $destruction->booked_time ?? null }}" disabled
                                                    readonly="readonly">
                                            </div>
                                        </div>
                                        <div class="col-6 fv-row mb-10">
                                            <label class="fs-6 fw-semibold mb-2">Emails To
                                                Attend</label>
                                            @foreach ($destruction->appointmentEmails as $email)
                                                <div data-repeater-item="email"
                                                    class="form-group d-flex align-items-center">
                                                    <input type="text" class="form-control mw-100 w-150x"
                                                        name="email" disabled placeholder="Email"
                                                        value="{{ $email->email }}" />
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @else
                                    <form class="row add_new_form" style="width: 100%"
                                        action="{{ route('admin.destruction.book-appointment') }}" method="post"
                                        enctype="multipart/form-data">
                                        @csrf
                                        <input type="hidden" name="destruction_id" value="{{ $destruction->id }}">
                                        <div class="row w-100">
                                            <div class="col-6 fv-row mb-10" data-kt-calendar="datepicker">
                                                <div id= "bookAppointmentDiv" class="fv-row mb-9">
                                                    <label class="fs-6 fw-semibold mb-2 required">Appointment Date</label>
                                                    <input
                                                        class="form-control form-control-solid  input dateSelect bookAppointment"
                                                        type="text" name="appointment_date" required
                                                        readonly="readonly">
                                                </div>
                                            </div>
                                            <div class="col-6 fv-row mb-10">
                                                <div data-kt_ecommerce_add_appointment_emails="auto-options">
                                                    <div id="kt_ecommerce_add_appointment_emails">
                                                        <div data-repeater-list="emails" class="d-flex flex-column">
                                                            <label class="fs-6 fw-semibold mb-2 required">Emails To
                                                                Attend</label>
                                                            <div data-repeater-item="email"
                                                                class="form-group d-flex align-items-center">
                                                                <input type="text" class="form-control mw-100 w-150x"
                                                                    name="email" required placeholder="Email" />

                                                                <button type="button" data-repeater-delete=""
                                                                    class="btn btn-sm btn-icon btn-light-danger ms-2">
                                                                    <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="7.05025" y="15.5356"
                                                                                width="12" height="2"
                                                                                rx="1"
                                                                                transform="rotate(-45 7.05025 15.5356)"
                                                                                fill="currentColor" />
                                                                            <rect x="8.46447" y="7.05029" width="12"
                                                                                height="2" rx="1"
                                                                                transform="rotate(45 8.46447 7.05029)"
                                                                                fill="currentColor" />
                                                                        </svg>
                                                                    </span>
                                                                </button>
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <button type="button" data-repeater-create=""
                                                                class="btn btn-sm btn-light-primary">
                                                                <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">
                                                                        <rect opacity="0.5" x="11" y="18" width="12"
                                                                            height="2" rx="1"
                                                                            transform="rotate(-90 11 18)"
                                                                            fill="currentColor" />
                                                                        <rect x="6" y="11" width="12" height="2"
                                                                            rx="1" fill="currentColor" />
                                                                    </svg>
                                                                </span>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-2 d-flex justify-content-end py-lg-5 px-lg-15">
                                                <button type="submit" id="SubmitAppointmentBtn"
                                                    class="btn fw-bold btn-primary ms-auto">
                                                    Submit
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                @endif
                            </div>

                        </div>
                    </div>
                </div>
            </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.destruction.upload_attachment') }}" method="post"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <input type="hidden" name="destructionId" value="{{ $destruction->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">

                                @foreach ($destruction->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
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade zIndexClass" id="execution_modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered mw-900px">
            <div class="modal-content">
                <div class="modal-header">
                    <h2>Execution Details</h2>
                    <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                        @include('includes.closeIcon')
                    </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">
                                @if ($destruction->status == $goodsStatus['EXECUTED'])
                                    <div class="row w-100">
                                        <div class="col-6 fv-row mb-10">
                                            @include('includes.simpleTextField', [
                                                'label' => 'Rec#',
                                                'value' => $destruction->execution->reconciliation_no ?? null,
                                                'disabled' => true,
                                                'required' => false,
                                                'name' => 'reconciliation_no',
                                            ])
                                        </div>
                                        <div class="col-6 fv-row mb-10">
                                            @include('includes.simpleTextField', [
                                                'label' => 'Warehouse',
                                                'value' => $destruction->execution->warehouse ?? null,
                                                'disabled' => true,
                                                'required' => false,
                                                'name' => 'warehouse',
                                            ])
                                        </div>
                                        <div class="col-6 fv-row mb-10">
                                            @include('includes.simpleTextField', [
                                                'label' => 'Reconciliated By',
                                                'value' =>
                                                    $destruction->execution?->reconciliatedBy?->name ?? null,
                                                'disabled' => true,
                                                'required' => false,
                                                'name' => 'reconciliated_by',
                                            ])
                                        </div>
                                        <div class="col-6 fv-row mb-10">
                                            @include('includes.simpleTextField', [
                                                'label' => 'Reconciliated Date',
                                                'value' => $destruction->execution->created_at ?? null,
                                                'disabled' => true,
                                                'required' => false,
                                                'name' => 'reconciliated_date',
                                            ])
                                        </div>
                                    </div>
                                @else
                                    <form class="row add_new_form" style="width: 100%"
                                        action="{{ route('admin.destruction.execute') }}" method="post"
                                        enctype="multipart/form-data">
                                        @csrf
                                        <input type="hidden" name="destructionId" value="{{ $destruction->id }}">
                                        <div class="row w-100">
                                            <div class="col-6 fv-row mb-10">
                                                @include('includes.simpleTextField', [
                                                    'label' => 'Rec#',
                                                    'name' => 'reconciliation_no',
                                                    'required' => true,
                                                ])
                                            </div>
                                            <div class="col-6 fv-row mb-10">
                                                @include('includes.simpleTextField', [
                                                    'label' => 'Warehouse',
                                                    'name' => 'warehouse',
                                                    'required' => true,
                                                ])
                                            </div>
                                        </div>
                                        <div class="col-2 d-flex justify-content-end py-lg-5 px-lg-15">
                                            <button type="submit" id="SubmitAppointmentBtn"
                                                class="btn fw-bold btn-primary ms-auto">
                                                Submit
                                            </button>
                                        </div>
                                    </form>
                                @endif
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade zIndexClass" id="reconciliation_modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered mw-900px">
            <div class="modal-content">
                <div class="modal-header">
                    <h2>Reconciliation List</h2>
                    <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                        @include('includes.closeIcon')
                    </div>
                </div>
                <div class="modal-body ">
                    <div id="kt_app_content_container" class="app-container container-xxxl">
                        <div class="card">
                            <div class="card-body pt-0">
                                <table class="table align-middle table-row-bordered fs-6 gy-5 dataTable no-footer"
                                    id="destructionTable">
                                    <thead>
                                        <tr class="text-start text-gray-400 fw-bold fs-7  gs-0">
                                            <th>{{ \App\CPU\translate('Rec No') }}</th>
                                            <th>{{ \App\CPU\translate('Warehouse') }}</th>
                                            <th>{{ \App\CPU\translate('Source') }}</th>
                                            <th>{{ \App\CPU\translate('Vendor Site') }}</th>
                                            <th>{{ \App\CPU\translate('Lines No') }}</th>
                                            <th>{{ \App\CPU\translate('Status') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script src="{{ asset('assets/plugins/custom/formrepeater/formrepeater.bundle.js') }}"></script>
    <script src="{{ asset('assets/js/custom/apps/ecommerce/catalog/repeater-js.js') }}"></script>
    <script>
        $('.bookAppointment').datepicker({
            startDate: 'tomorrow',
            clearBtn: true,
            autoclose: true,
            container: "#bookAppointmentDiv",
        });

        $(document).on('click', '#approveRequestQty', function() {
            $('#destructionTable 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 requestNo = $(this).data('request_no');
            var remainigArr = [];
            $('#destructionTable 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) {
                                    if (settings.url.includes(
                                            "{{ route('admin.destruction.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) {
                            if (settings.url.includes(
                                    "{{ route('admin.destruction.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();

            $('#destructionTable 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);
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });
            $.ajax({
                url: "{{ route('admin.destruction.update') }}",
                method: 'POST',
                data: {
                    requestId: requestId,
                    linesData: linesDataJson,
                },
                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.destruction.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 updating 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>
    <script>
        $(".salesQty a").click(function() {
            var line = $(this).attr('href').substring(1);
            $.ajax({
                url: "{{ route('admin.orders.return.getInvoices', 0) }}" + line,
                method: 'GET',
                success: function(res) {
                    $('.invoiceTableBody').empty();
                    if (res.success == true) {
                        var tableRows = '';
                        $(res.invoices).each(function(index, val) {
                            tableRows += `<tr>
                                <td>` + val.type + `</td>
                                <td>` + val.order_number + `</td>
                                <td>` + val.customer_po_number + `</td>
                                <td>` + val.invoice_number + `</td>
                                <td>` + val.invoice_date + `</td>
                                <td>` + val.qty + `</td>
                                <tr>`;
                        });
                        $('.invoiceTableBody').html(tableRows);
                        toastr.success(res.message);
                    } else {
                        toastr.warning(res.message);
                        tableRows = `<tr><td class="centered" colspan="5" >` + res.message +
                            `</td><tr>`;
                        $('.invoiceTableBody').html(tableRows);
                    }

                },
            });
        })
    </script>
    <script>
        $(document).ready(function() {
            let reconciliationModalLoaded = false;
            $('#reconciliation_modal').on('show.bs.modal', function(e) {
                if (!reconciliationModalLoaded) {
                $.ajax({
                    url: "{{ route('admin.destruction.reconciliationList', $destruction->id) }}",
                    type: 'GET',
                    success: function(response) {
                           
                        let tbody = '';
                        response.data.forEach(function(row) {
                            tbody += `<tr>
                                <td>${row.recNo || ''}</td>
                                <td>${row.warehouse || ''}</td>
                                <td>${row.source || ''}</td>
                                <td>${row.vendorSite || ''}</td>
                                <td>${row.numOfLines || ''}</td>
                                <td>${row.status || ''}</td>
                            </tr>`;
                        });
                        $('#reconciliation_modal .modal-body table tbody').html(tbody);
                    },
                    error: function(xhr) {
                        console.error('Error loading reconciliation data:', xhr);
                        toastr.error('Error loading reconciliation data');
                    }
                });
            }
            });
        });
        </script>
    @endpush