@extends('admin.layout.master')
@section('title', strtoupper($type) . ' MANAGEMENT')
@section('custom_style')
    <style>
        input[type=text],
        input[type=file],
        input[type=number] {
            height: 27px !important;
            margin: 0 !important;
            padding: 0 5px !important;
        }

        .table th,
        .table td {
            padding: 0px;
            color: black;
        }

        .table th {
            background: var(--cl-primary);
            padding: 5px !important;
            color: white !important;
        }

        .form-control {
            border-radius: 0px !important;
        }

        .select2-container .select2-selection--single {
            height: auto !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 25px !important;
            padding: 0px 5px !important;
        }

        #attachmentLabel {
            width: 175px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        #filePreview img,
        #filePreview embed {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
            margin-bottom: 5px;
        }
    </style>
@endsection
@section('content')
    <div class="card sina-card">
        <div class="card-header card-header-s">
            <h4>{{ strtoupper($type) }} {{ __('obs.edit') }}</h4>
        </div>
        <div class="card-body">
            <input type="hidden" name="" id="csrf-token" value="{{ Session::token() }}" />
            <fieldset style="">
                <form id="form1" method="post" action="{{ route('prepurchase.update') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="d-flex flex-column-reverse align-items-center mb-3">
                        <input type="file" id="attachment" name="attachment" style="display: none;">
                        <label for="attachment" id="attachmentLabel" class="mt-1 py-1 px-2 border border-primary"
                            style="cursor: pointer; border-style: dashed !important;">
                            &#10147; 
                            @if ($content->attachment!==null)
                                Change Attachment
                            @else
                                Add an Attachment
                            @endif
                        </label>
                        <div id="filePreview">
                            @if ($content->attachment)
                                @php
                                    $fileType = pathinfo($content->attachment, PATHINFO_EXTENSION);
                                    $fileUrl = asset('storage/requisition') . '/' . $content->attachment;
                                @endphp
                                @if (in_array($fileType, ['jpg', 'jpeg', 'png', 'gif']))
                                    <img src="{{ $fileUrl }}" alt="Attachment Image" width="100" height="100" />
                                @elseif($fileType === 'pdf')
                                    <embed src="{{ $fileUrl }}" type="application/pdf"
                                        style="width: 100px; height: 100px;">
                                @else
                                    <p>Preview not available for this file type.</p>
                                @endif
                                <div class="d-flex align-items-center justify-content-center gap-2">
                                    <a href="{{ $fileUrl }}" target="_blank" title="View Attachment"><i class="bi bi-eye-fill fs-4"></i></a>
                                    <label for="attachment" class="text-primary" style="cursor: pointer;" title="Edit Attachment"><i class="bi bi-pencil-square fs-5"></i></a>
                                </div>
                            @endif
                        </div>
                    </div>

                    <div>
                        @if ($content->supplier)
                            <div class="row mb-1">
                                <input type="hidden" name="quotation_id" id="quotation_id"
                                    value="{{ Request()->quotation_id }}">
                                <div class="col-md-4 col-12 d-flex flex-wrap pr-0 mb-3">
                                    <div class="col-3 px-0">
                                        <label for="note">{{ __('obs.vendor') }}</label>
                                    </div>
                                    <div class="col-9 px-0">
                                        <!-- <select name="vendor_id" id="vendor_id" class="form-control vendor" required>
                                                <option value="{{ $content->supplier->id }}">{{ $content->supplier->name_eng }}</option>
                                            </select> -->
                                        @include('v2.inventory.global.party_live_dd', [
                                            'type' => 1,
                                            'cls' => 'p',
                                            'id' => 'vendor_id',
                                            'name' => 'vendor_id',
                                            'selected_party' => $content->supplier,
                                        ])

                                    </div>
                                </div>

                                <div class="col-md-6 col-12 d-flex flex-wrap pr-0 mb-3">
                                    <div class="col-3 px-0">
                                        <label for="note">{{ __('obs.description') }}</label>
                                    </div>
                                    <div class="col-9 px-0">
                                        <input type="text" class="form-control" name="note" id="note"
                                            value="{{ $content->note }}">

                                    </div>
                                </div>
                            </div>
                        @endif
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>{{ __('obs.product') }}</th>
                                        <th>{{ __('obs.note') }}</th>
                                        @if ($type == 'requisition')
                                            <th>{{ __('obs.qty') }}</th>
                                        @elseif($type == 'quotation')
                                            <th>{{ __('obs.req.') }} {{ __('obs.qty') }}</th>
                                        @else
                                            <th>{{ __('obs.quot.') }} {{ __('obs.qty') }}</th>
                                        @endif
                                        @if ($type != 'requisition')
                                            <th>{{ __('obs.qty') }}</th>
                                            <th>{{ __('obs.price') }}</th>
                                            <th>{{ __('obs.subtotal') }}</th>
                                        @endif
                                    </tr>
                                </thead>
                                <tbody id="tbl_body">
                                    @php
                                        $i = 0;
                                    @endphp
                                    @if ($content)
                                        @forelse ($content->details as $p=>$item)
                                            <tr id="tr{{ $i }}">
                                                <td style="place-content: center; padding: 0 5px;">{{ $i + 1 }}</td>
                                                <td>
                                                    <div class="d-flex"
                                                        style="height: 27px; place-items: center; padding:0 5px;">
                                                        {{ $item->product->name_eng }}
                                                        {{ store_info()->is_barcode_show ? '(' . $item->product->barcode . ')' : '' }}
                                                        <input type="hidden" name="product_id[{{ $item->id }}]"
                                                            value="{{ $item->product_id }}">
                                                    </div>
                                                </td>
                                                <td>
                                                    <input type="text" name="desc[{{ $item->id }}]"
                                                        id="desc{{ $item->id }}" value="{{ $item->note }}"
                                                        class="form-control">
                                                </td>
                                                {{-- <td class="text-center">
                                            {{$item->quantity}}
                                        </td> --}}
                                                @if ($type == 'requisition')
                                                    <td class="">
                                                        <input type="number" min="0" step=".01"
                                                            value="{{ $item->quantity }}"
                                                            name="quantity[{{ $item->id }}]"
                                                            id="quantity{{ $i }}"
                                                            class="form-control requisition-form-control">
                                                    </td>
                                                @elseif($type == 'quotation')
                                                    <td class="text-center">
                                                        <input type="number" min="0" step=".01"
                                                            name="req[{{ $item->id }}]" id="req{{ $item->id }}"
                                                            class="form-control" value="{{ $item->requisition_qty }}"
                                                            readonly>

                                                    </td>
                                                @else
                                                    <td class="text-center">
                                                        <input type="number" min="0" step=".01"
                                                            name="req[{{ $item->id }}]" id="req{{ $item->id }}"
                                                            class="form-control" value="{{ $item->quotation_qty }}"
                                                            readonly>

                                                    </td>
                                                @endif
                                                @if ($type !== 'requisition')
                                                    <td>
                                                        <input type="number" onkeyup="setSubtotal('{{ $i }}')"
                                                            min="0" step=".01" value="{{ $item->quantity }}"
                                                            name="quantity[{{ $item->id }}]"
                                                            id="quantity{{ $i }}" class="form-control">
                                                    </td>
                                                    <td>
                                                        <input type="number"
                                                            onkeyup="setSubtotal('{{ $i }}')" min="0"
                                                            step=".01" name="rate[{{ $item->id }}]"
                                                            id="rate{{ $i }}" class="form-control"
                                                            value="{{ $item->rate }}">
                                                        <input type="hidden" name="quotation_rate[{{ $item->id }}]"
                                                            value="{{ $item->rate }}">
                                                    </td>
                                                    <td class="text-right">
                                                        <input type="number" min="0" step=".01"
                                                            name="subtotal[{{ $item->id }}]"
                                                            id="subtotal{{ $item->id }}"
                                                            class="form-control subtotal" readonly
                                                            value="{{ $item->rate * $item->quantity }}">
                                                    </td>
                                                @endif
                                            </tr>
                                            @php
                                                $i++;
                                            @endphp
                                        @empty
                                        @endforelse
                                    @endif
                                </tbody>
                                <input type="hidden" name="" id="index_num" value="{{ $i }}">
                                <input type="hidden" name="edit_type" id="edit_type" value="{{ $type }}">
                                <input type="hidden" name="edit_id" value="{{ request()->id }}">
                                @if ($type != 'requisition')
                                    <tfoot>
                                        <tr>
                                            <td colspan="{{ $type == 'quotation' ? 6 : 6 }}" class="text-right">
                                                {{ __('obs.total') }}</td>
                                            <td class="text-right"> <input type="number" min="0" step=".01"
                                                    name="total_amount" id="total_amount"
                                                    class="form-control-sm total_amount" readonly value="0"></td>
                                        </tr>
                                        <tr>
                                            <td colspan="{{ $type == 'quotation' ? 4 : 4 }}" class="text-right">
                                                {{ __('obs.discount') }} {{ __('obs.(%)') }} </td>
                                            <td class="text-right"> <input type="number" max="100" step=".01"
                                                    name="discount" id="discount" class="form-control-sm discount"
                                                    onkeyup="setDiscount()" value="{{ $content->discount }}"></td>
                                            <td class="text-right">{{ __('obs.discount') }} {{ __('obs.(amount)') }}</td>
                                            <td class="text-right"> <input type="number" name="discount_amount"
                                                    id="discount_amount" class="form-control-sm discount_amount" readonly>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="{{ $type == 'quotation' ? 6 : 6 }}" class="text-right">
                                                {{ __('obs.net') }} {{ __('obs.amount') }}</td>
                                            <td class="text-right"> <input type="number" name="net_amount"
                                                    id="net_amount" class="form-control-sm net_amount" value=""
                                                    readonly></td>
                                        </tr>
                                    </tfoot>
                                @endif
                            </table>
                        </div>
                        <div class="row">
                            <div class="col-12 text-right mt-2 mt-md-0">
                                <button class="btn btn-sm btn-primary btn-pill btn-sina-submit"
                                    style="position: fixed;bottom:10%;right:0" onclick="addRow()" type="button"
                                    name="add_Row" id="add_Row"><i class="fas fa-plus"></i></button>
                            </div>
                        </div>

                        <div class="row pb-0  modal-footer">
                            <input class="btn-sina-submit" type="submit" id="save" value="Update">
                        </div>
                    </div>
                </form>
            </fieldset>
        </div>
    </div>

    @include('inventory.prepurchase.po.install_modal')
@endsection
@section('script')
    <script>
        const store_setting = @json(store_info());
    </script>
    <script type="text/javascript" src="{{ asset('inventory/blade_js/common.js') }}"></script>
    <script>
        $(document).ready(function() {
            getSum();
        });
        let requsitionData = [];
        // $('.select2').select2();

        $('#attachment').on('change', function(event) {
            const file = event.target.files[0];
            const $attachmentLabel = $('#attachmentLabel');
            const $filePreview = $('#filePreview');

            if (file) {
                $attachmentLabel.text(file.name);
                $filePreview.empty();
                const fileType = file.type;
                if (fileType.startsWith("image/")) {
                    const img = $('<img>').attr('src', URL.createObjectURL(file))
                        .css({
                            'width': '100px',
                            'height': '100px'
                        })
                        .on('load', function() {
                            URL.revokeObjectURL(this.src);
                        });
                    $filePreview.append(img);
                } else if (fileType === "application/pdf") {
                    const embed = $('<embed>').attr('src', URL.createObjectURL(file))
                        .attr('type', 'application/pdf')
                        .css({
                            'width': '100px',
                            'height': '100px'
                        });
                    $filePreview.append(embed);
                } else {
                    $filePreview.append($('<p>').text('Preview not available for this file type.'));
                }
            } else {
                $filePreview.html(`
                @if ($content->attachment)
                    @if (in_array($fileType, ['jpg', 'jpeg', 'png', 'gif']))
                        <img src="{{ asset($content->attachment) }}" style="width: 100px; height: 100px;">
                    @elseif ($fileType === 'pdf')
                        <embed src="{{ asset($content->attachment) }}" type="application/pdf" style="width: 100px; height: 100px;">
                    @else
                        <p>Preview not available for this file type.</p>
                    @endif
                @endif
            `);
            }
        });
        $('#quotation_search').select2({
            minimumInputLength: 3,
            // tags: [],
            ajax: {
                url: "/po/create",
                dataType: 'json',
                type: "GET",
                quietMillis: 0,
                data: function(term) {
                    return {
                        type: 2,
                        name: term
                    };
                },
                processResults: function(data) {
                    return {
                        results: $.map(data, function(item) {
                            return {
                                text: item.quotation_no,
                                id: item.id
                            }
                        })
                    };
                }
            }
        });
        // partySearch('vendor',1);
        // $('#vendor_id').select2({
        //     minimumInputLength: 3,
        //     // tags: [],
        //     ajax: {
        //         url: "{{ route('vendor.index') }}",
        //         dataType: 'json',
        //         type: "GET",
        //         quietMillis: 0,
        //         data: function (term) {
        //             return {
        //                 type: 2,
        //                 name: term
        //             };
        //         },
        //         processResults: function (data) {
        //             return {
        //                 results: $.map(data, function (item) {
        //                     return {
        //                         text: item.name_eng,
        //                         id: item.id
        //                     }
        //                 })
        //             };
        //         }
        //     }
        // });

        function getQuotationData() {
            $('#install_model_table').dataTable().fnDestroy();
            $('#install_model_tbody').empty();
            var returnData;
            var start = $('#start_date').val();
            var end = $('#end_date').val();
            $.ajaxSetup({
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
            });
            $.ajax({
                type: "GET",
                url: "/po/create",
                data: {
                    start: start,
                    end: end,
                    type: 3,
                },
                success: function(data) {
                    console.log(data);
                    if (data.length > 0) {
                        for (let index = 0; index < data.length; index++) {
                            requsitionData[index] = data[index];
                            returnData += `<tr onclick="setDataForQuotation(` + data[index].id + `)" role="row" class="odd">
                                    <td class="sorting_1">` + (index + 1) + `</td>
                                    <td class="tr_td_group_code-205">` + data[index].quotation_no + `</td>
                                    <td class="tr_td_title-205"><b>` + getFormatedDate(data[index].created_at) + `</b></td>
                                </tr>`;
                        }
                    }

                    $('#install_model_tbody').html(returnData);
                    $("#install_model").modal("show");
                    $('#install_model_table').DataTable({
                        "destroy": true,
                    });
                },
                error: function(response) {
                    // $('#load_tbody_previous_recipe_model').empty();
                },
            });
        }

        function getFormatedDate(dateToBeFormated) {
            var now = new Date(dateToBeFormated);
            var day = ("0" + now.getDate()).slice(-2);
            var month = ("0" + (now.getMonth() + 1)).slice(-2);
            var return_date = now.getFullYear() + "-" + (month) + "-" + (day);
            return return_date;
        }

        function addRow() {
            var index = parseInt($('#index_num').val()) + 1;
            var type = $('#edit_type').val();
            var returnData = '';
            returnData += `<tr id="tr-n` + index + `">
                                <td>` + (index) +
                `</td>
                                <td>
                                    <div class="d-flex text-center">
                                        <select class="form-control new_product" style="width: 100%" name="new_product_id[` +
                index + `]">
                                            <option value=" ">-- Select Product --</option>
                                        </select>
                                    </div>
                                </td>
                                <td>
                                    <input type="text" name="new_desc[` + index + `]" id="desc` + index + `" class="form-control">
                                </td>`;
            // returnData+=` <td class="text-center">0</td>`;
            if (type == 'requisition') {
                returnData += `<td class="">
                                                <input type="number" min="0" onkeyup="setSubtotal('` + index +
                    `')"  name="new_quantity[` + index + `]" id="quantity` + index + `" step=".01" class="form-control" value="0">

                                                </td>`;
            } else if (type == 'quotation') {
                returnData += `<td class=""> <input type="number" min="0"  name="req[` + index + `]"
                                    id="req` + index +
                    `" step=".01" class="form-control-sm" value="0" readonly>  </td>`;
            } else {
                returnData += `<td class=""> <input type="number" min="0"  name="req[` + index + `]"
                                    id="req` + index +
                    `" step=".01" class="form-control-sm" value="0" readonly>  </td>`;
            }
            if (type != 'requisition') {
                returnData += `<td class="text-center">
                                                <input type="number" min="0" onkeyup="setSubtotal('n` + index +
                    `')"  name="new_quantity[` + index + `]" id="quantityn` + index + `" step=".01" class="form-control-sm" value="0">

                                                </td>
                                                <td>
                                                <input type="number" onkeyup="setSubtotal('n` + index +
                    `')" min="0" step=".01"  name="new_rate[` + index + `]"
                                                    id="raten` + index + `" class="form-control-sm" value="0">
                                                    <input type="hidden" name="quotation_rate[` + index +
                    `]" id="quotation_rate` + index + `" class="form-control" value="0">
                                                </td>
                                                <td class="text-right">
                                                <div class="input-group text-right">
                                                    <input type="number" min="0" step=".01"  name="subtotal[` + index + `]"
                                                        id="subtotaln` + index + `" style="width:90%" class="form-control-sm subtotal" readonly value="0">
                                                    <div class="input-group-append" style="width:10%">
                                                        <button type="button" onclick="deleteRow('n` + index + `'')" class="btn btn-danger btn-sm">
                                                            <span class="fa fa-minus"></span><span class="btn_text-` +
                    index + `"></span>
                                                        </button>
                                                    </div>
                                                </div>
                                            </td>`;
            }
            // returnData+=` <td class="text-center"> <input type="number" min="0"  name="req[`+index+`]"
        //     id="req`+index+`" step=".01" class="form-control-sm" value="0" readonly>  </td>`;
            // returnData+=`<td class="text-center">
        //                 <input type="number" min="0" onkeyup="setSubtotal('`+index+`')"  name="quantity[`+index+`]" id="quantity`+index+`" step=".01" class="form-control-sm" value="0">

        //                 </td>
        //             <td>
        //                 <input type="number" onkeyup="setSubtotal('`+index+`')" min="0" step=".01"  name="rate[`+index+`]"
        //                     id="rate`+index+`" class="form-control-sm" value="0">
        //                     <input type="hidden" name="quotation_rate[`+index+`]" id="quotation_rate`+index+`" class="form-control" value="0">
        //             </td>
        //             <td class="text-right">
        //                 <div class="input-group text-right">
        //                     <input type="number" min="0" step=".01"  name="subtotal[`+index+`]"
        //                         id="subtotal`+index+`" style="width:90%" class="form-control-sm subtotal" readonly value="0">
        //                     <div class="input-group-append" style="width:10%">
        //                         <button type="button" onclick="deleteRow(`+index+`)" class="btn btn-danger btn-sm">
        //                             <span class="fa fa-minus"></span><span class="btn_text-`+index+`"></span>
        //                         </button>
        //                     </div>
        //                 </div>
        //             </td>
        //             </tr>`;
            $('#index_num').val((index));
            $('#tbl_body').append(returnData);
            initSelect2();
        }

        function setDataForQuotation(i) {
            $('#quotation_id').val(i);
            returnData = '';
            quotation = requsitionData[i];
            data = quotation.details;
            if (data.length > 0) {
                for (let index = 0; index < data.length; index++) {
                    returnData += `<tr id="tr-` + index + `">
                                <td>` + (index + 1) + `</td>
                                <td>
                                    <div class="d-flex text-center">
                                       ` + data[index].product.name_eng + `
                                       <input type="hidden" name="product_id[` + index + `]" id="product_id` + index +
                        `" class="form-control" value="` + data[index].product_id + `">
                                    </div>
                                </td>
                                <td>
                                    <input type="text" name="desc[` + index + `]" id="desc` + index + `" class="form-control">
                                </td>`;
                    // returnData+=` <td>`+data[index].quantity+`</td>`;

                    returnData += `<td class="text-center">
                                    <input type="number" min="0"  name="req[` + index + `]"
                                    id="req` + index + `" step=".01" class="form-control-sm" value="` + data[index]
                        .quantity + `" readonly>
                                </td>`;

                    returnData += `<td class="text-center">
                                                <input type="number" min="0" onkeyup="setSubtotal('` + index +
                        `')"  name="quantity[` + index + `]" id="quantity` + index +
                        `" step=".01" class="form-control-sm" value="` + data[index].quantity + `">
                                                <input type="hidden" name="quotation_rate[` + index +
                        `]" id="quotation_rate` + index + `" class="form-control" value="` + data[index].rate + `">
                                                </td>
                                            <td>
                                                <input type="number" onkeyup="setSubtotal('` + index +
                        `')" min="0" step=".01"  name="rate[` + index + `]"
                                                    id="rate` + index + `" class="form-control-sm" value="0">
                                            </td>
                                            <td class="text-right">
                                                <input type="number" min="0" step=".01"  name="subtotal[` + index + `]"
                                                    id="subtotal` + index + `" class="form-control-sm subtotal" readonly value="0">
                                            </td>
                                            </tr>`;
                    $('#index_num').val('');
                    $('#index_num').val(parseInt(index) + 1);
                }
            }
            // returnData+=`<tr>
        //                 <td colspan="6" class="text-right">Total</th><th> <input type="number" min="0" step=".01"  name="total_amount"
        //                                         id="total_amount" class="form-control-sm total_amount" readonly></th></tr>
        //             <tr>
        //                 <th colspan="6" class="text-right">Discount (%)</th><th> <input type="number" max="100" step=".01"  name="discount"
        //                 id="discount" class="form-control-sm discount"></th><th> <input type="number"  name="discount_amount"
        //                 id="discount_amount" class="form-control-sm discount_amount" readonly></th>
        //             </tr>
        //             <tr>
        //                 <th colspan="6" class="text-right">Net Amount</th><th> <input type="number"  name="net_amount"
        //                 id="net_amount" class="form-control-sm net_amount" readonly></th>
        //             </tr>`;
            $('#tbl_body').html(returnData);
            getSum();
            $("#install_model").modal("hide");
        }

        function getSum() {
            var sum = 0;
            $('.subtotal').each(function() {
                sum += parseFloat(this.value);
            });
            $('#total_amount').val(sum);
            setDiscount();
        }

        function setSubtotal(i) {
            var subtotal = 0;
            var qty = parseFloat($('#quantity' + i).val());
            var rate = parseFloat($('#rate' + i).val());
            $('#subtotal' + i).val((qty * rate));
            getSum();
            setDiscount();
        }

        function setDiscount() {
            var total = 0;
            var discount_amount = 0;
            var discount_rate = (parseFloat($('#discount').val()) / 100);
            total = $('#total_amount').val();
            discount_amount = (discount_rate * total)
            $('#discount_amount').val(discount_amount);
            $('#net_amount').val(total - discount_amount);
            // getSum();
        }

        function deleteRow(row_id) {
            $('#tr-' + row_id).remove();
            getSum();
        }

        function initSelect2() {
            productSearch('new_product');
            // $('.new_product').select2({
            //             minimumInputLength: 3,
            //             // tags: [],
            //             ajax: {
            //                 url: "/product-live-search",
            //                 dataType: 'json',
            //                 type: "POST",
            //                 quietMillis: 50,
            //                 data: function (term) {
            //                     return {
            //                         _token: "{{ csrf_token() }}",
            //                         type: 2,
            //                         p_ids: [],
            //                         name: term
            //                     };
            //                 },
            //                 processResults: function (data) {
            //                     return {
            //                         results: $.map(data, function (item) {
            //                             return {
            //                                 text: item.name_eng + ' -- ' + item.barcode,
            //                                 id: item.id
            //                             }
            //                         })
            //                     };
            //                 }
            //             }
            //         });
        }
    </script>
@stop