@extends('admin.layouts.app')
@section('title', $type.' Return Note Book')
@push('styles')
    <style>
        .table th {
            min-width: 169px;
        }
        .form-group.is-invalid {
            border: 1px solid red !important;
        }
    </style>
@endpush
@section('container')
    <!-- Page-Title -->
    <div class="row">
        <div class="col-sm-12">
            <div class="page-title-box">
                <div class="float-end">
                    <a href="{{ route('return-note-book.index',['type'=>$type]) }}" class="btn btn-primary"><i class="ti ti-arrow-back-up me-2"></i>
                        {{ ucfirst($type) }} Return Note Book List</a>
                </div>
                <h4 class="page-title">Add {{ ucfirst($type) }} New Return Book</h4>
            </div>
            <!--end page-title-box-->
        </div>
        <!--end col-->
    </div>
    <!-- end page title end breadcrumb -->

    <div class="row">
        @if (session('success'))
            <div class="alert alert-info">
                <ul>
                    {{ session('success') }}
                </ul>
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger">
                <ul>
                    {{ session('error') }}
                </ul>
            </div>
        @endif
    </div>

    <div class="row">
        <div class="col-lg-12">
            <form method="POST" id="order_form" action="{{ route('return-note-book.store',['type'=>$type]) }}" class="form" enctype="multipart/form-data">
                @csrf
                <div class="card">

                    <!--end card-header-->
                    <div class="card-body">

                        <div class="row">
                            <div class="col-md-3">
                                    <div class="mb-2">
                                        <label for="name" class="mb-2">{{ $type == 'sale' ? 'Client' : 'Supplier' }}</label>
                                        <select name="party" id="party" class="form-select default-select">
                                            <option value="">Select One</option>
                                            @foreach ($parties as $party)
                                                <option value="{{ $party->id }}"
                                                    {{ old('party') == $party->id ? 'selected' : '' }}>
                                                    {{ $party->name }}
                                                    @if($party->address)
                                                        - {{ $party->address }}
                                                    @endif
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('party')
                                        <p class="mt-1 text-danger">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>

                        </div>
                    </div>
                    <!--end card-body-->
                    <div class="card-body">

                        <div class="row">
                            <div class="col-md-12">
                               <div class="table-responsive">
                                   <table class="table table-bordered">
                                       <thead>
                                       <tr>
                                           <th>Date</th>
                                           @if($type == 'sale')
                                               <th>Product</th>
                                           @else
                                                <th>Item Code</th>
                                           @endif
                                           <th>Brand Name</th>
                                           @if($type == 'purchase')
                                            <th>Group</th>
                                           @endif
                                           <th>Reason for return</th>
                                           <th>Quantity</th>
                                           <th>Price</th>
                                           <th>Amount</th>
                                           <th>Adjusted Date</th>
                                           <th>Change product Name</th>
                                           <th style="min-width: 40px!important;"></th>
                                       </tr>
                                       </thead>
                                       <tbody id="product-container">

                                       @if (old('date') != null && sizeof(old('date')) > 0)
                                           @foreach (old('date') as $key => $item)
                                               <tr class="product-item">
                                                   <td><div class="form-group {{ $errors->has('date.' . $loop->index) ? 'is-invalid' : '' }}"><input type="date" autocomplete="off" class="form-control" value="{{ old('date.' . $loop->index) }}" name="date[]"></div></td>
                                                   @if($type == 'sale')
                                                       <td>
                                                           <div class="form-group {{ $errors->has('product.' . $loop->index) ? 'is-invalid' : '' }}"
                                                                style="min-width: 200px;">
                                                               <select class="form-control product default-select"
                                                                       style="width: 100%;" id="product" name="product[]"
                                                                       required>
                                                                   <option value="">Select Product</option>
                                                                   @foreach ($products as $product)
                                                                       <option
                                                                           {{ old('product.' . $key) == $product->id ? 'selected' : '' }}
                                                                           value="{{ $product->id }}">
                                                                           {{ $product->productSubCategory->name ?? ''}} - {{ $product->name }}
                                                                       </option>
                                                                   @endforeach

                                                               </select>
                                                           </div>
                                                       </td>
                                                   @else
                                                       <td><div class="form-group {{ $errors->has('item_code.' . $loop->index) ? 'is-invalid' : '' }}"><input type="text" class="form-control" value="{{ old('item_code.' . $loop->index) }}" name="item_code[]"></div></td>
                                                   @endif

                                                   <td><div class="form-group {{ $errors->has('brand_name.' . $loop->index) ? 'is-invalid' : '' }}"><input type="text" class="form-control" value="{{ old('brand_name.' . $loop->index) }}" name="brand_name[]"></div></td>
                                                   @if($type == 'purchase')
                                                   <td><div class="form-group {{ $errors->has('group_name.' . $loop->index) ? 'is-invalid' : '' }}"><input type="text" class="form-control" value="{{ old('group_name.' . $loop->index) }}" name="group_name[]"></div></td>
                                                   @endif
                                                   <td><div class="form-group {{ $errors->has('return_reason.' . $loop->index) ? 'is-invalid' : '' }}"><input type="text" class="form-control" value="{{ old('return_reason.' . $loop->index) }}" name="return_reason[]"></div></td>
                                                   <td><div class="form-group {{ $errors->has('quantity.' . $loop->index) ? 'is-invalid' : '' }}"><input type="number" step="any" class="form-control quantity" value="{{ old('quantity.' . $loop->index) }}" name="quantity[]"></div></td>
                                                   <td><div class="form-group {{ $errors->has('price.' . $loop->index) ? 'is-invalid' : '' }}"><input type="number" step="any" class="form-control price" value="{{ old('price.' . $loop->index) }}" name="price[]"></div></td>
                                                   <td><div class="form-group {{ $errors->has('amount.' . $loop->index) ? 'is-invalid' : '' }}"><input type="number" step="any" readonly class="form-control amount" value="{{ old('amount.' . $loop->index) }}" name="amount[]"></div></td>
                                                   <td><div class="form-group {{ $errors->has('adjusted_date.' . $loop->index) ? 'is-invalid' : '' }}"><input type="date" autocomplete="off" class="form-control" value="{{ old('adjusted_date.' . $loop->index) }}" name="adjusted_date[]"></div></td>
                                                   <td><div class="form-group {{ $errors->has('change_product_name.' . $loop->index) ? 'is-invalid' : '' }}"><input type="text" class="form-control" value="{{ old('change_product_name.' . $loop->index) }}" name="change_product_name[]"></div></td>
                                                   <td class="text-center"><a role="button" class="btn btn-danger btn-remove btn-close"><i class="feather icon-trash-2"></i></a></td>
                                               </tr>
                                           @endforeach
                                       @else
                                           <tr class="product-item">
                                               <td><div class="form-group"><input type="date" autocomplete="off" class="form-control" name="date[]"></div></td>
                                               @if($type == 'sale')
                                                   <td>
                                                       <div class="form-group product_area" style="min-width: 200px;">
                                                           <select class="form-select default-select product" id="default"
                                                                   required style="width: 100%;" name="product[]">
                                                               <option value="">Select Product</option>
                                                               @foreach ($products as $product)
                                                                   <option value="{{ $product->id }}">
                                                                       {{ $product->productSubCategory->name ?? ''}} - {{ $product->name }}
                                                                   </option>
                                                               @endforeach
                                                           </select>
                                                           <input type="hidden" name="product_name[]" class="product_name">
                                                       </div>
                                                   </td>
                                               @else
                                                   <td><div class="form-group"><input type="text" class="form-control" name="item_code[]"></div></td>
                                               @endif

                                               <td><div class="form-group"><input type="text" class="form-control" name="brand_name[]"></div></td>
                                               @if($type == 'purchase')
                                               <td><div class="form-group"><input type="text" class="form-control" name="group_name[]"></div></td>
                                               @endif
                                               <td><div class="form-group"><input type="text" class="form-control" name="return_reason[]"></div></td>
                                               <td><div class="form-group"><input type="number" step="any" class="form-control quantity" name="quantity[]"></div></td>
                                               <td><div class="form-group"><input type="number" step="any" class="form-control price" name="price[]"></div></td>
                                               <td><div class="form-group"><input type="number" step="any" readonly class="form-control amount" name="amount[]"></div></td>
                                               <td><div class="form-group"><input type="date" autocomplete="off" class="form-control" name="adjusted_date[]"></div></td>
                                               <td><div class="form-group"><input type="text" class="form-control" name="change_product_name[]"></div></td>
                                               <td class="text-center"><a role="button" class="btn btn-danger btn-remove btn-close"><i class="feather icon-trash-2"></i></a></td>
                                           </tr>
                                       @endif
                                       </tbody>
                                       <tfoot>
                                       <tr>
                                           <td>
                                               <a role="button" class="btn btn-info btn-sm" id="btn-add-product">Add
                                                   Product</a>
                                           </td>
                                           <th colspan="{{ $type == 'purchase' ? 4 : 3}}" class="text-end">Total Amount</th>
                                           <th id="total_quantity">0</th>
                                           <th></th>
                                           <th id="total_amount">0.00</th>
                                           <th colspan="3"></th>
                                       </tr>
                                       </tfoot>
                                   </table>
                               </div>
                            </div>
                        </div>
                    </div>
                    <!--end card-body-->
                    <div class="card-footer">
                        <div class="text-end">
                            <button class="btn btn-primary btn_order_submit" type="button">Add Return Book</button>
                        </div>
                    </div>
                </div>
                <!--end card-->


                <!--end card-->
            </form>
            <!--end form-->
        </div> <!-- end col -->
    </div> <!-- end row -->
    <template id="template-product">
        <tr class="product-item">
            <td><div class="form-group"><input type="date" autocomplete="off" class="form-control" name="date[]"></div></td>
            @if($type == 'sale')
                <td>
                    <div class="form-group product_area" style="min-width: 200px;">
                        <select class="form-select default-select product" id="default"
                                required style="width: 100%;" name="product[]">
                            <option value="">Select Product</option>
                            @foreach ($products as $product)
                                <option value="{{ $product->id }}">
                                    {{ $product->productSubCategory->name ?? ''}} - {{ $product->name }}
                                </option>
                            @endforeach
                        </select>
                        <input type="hidden" name="product_name[]" class="product_name">
                    </div>
                </td>
            @else
                <td><div class="form-group"><input type="text" class="form-control" name="item_code[]"></div></td>
            @endif
            <td><div class="form-group"><input type="text" class="form-control" name="brand_name[]"></div></td>
            @if($type == 'purchase')
            <td><div class="form-group"><input type="text" class="form-control" name="group_name[]"></div></td>
            @endif
            <td><div class="form-group"><input type="text" class="form-control" name="return_reason[]"></div></td>
            <td><div class="form-group"><input type="number" step="any" class="form-control quantity" name="quantity[]"></div></td>
            <td><div class="form-group"><input type="number" step="any" class="form-control price" name="price[]"></div></td>
            <td><div class="form-group"><input type="number" step="any" readonly class="form-control amount" name="amount[]"></div></td>
            <td><div class="form-group"><input type="date"  autocomplete="off" class="form-control" name="adjusted_date[]"></div></td>
            <td><div class="form-group"><input type="text" class="form-control" name="change_product_name[]"></div></td>
            <td class="text-center"><a role="button" class="btn btn-danger btn-remove btn-close"><i class="feather icon-trash-2"></i></a></td>
        </tr>
    </template>
@endsection

@push('scripts')
    <script>
        document.querySelectorAll('.default-select').forEach(function(element) {
            new Selectr(element);
        });
        var productIds = [];
        $(function() {
            addProduct__delete();
            calculate();

            //
            $(document).on('click','.btn_order_submit',function () {
                Swal.fire({
                    title: 'Are you sure?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes'

                }).then((result) => {
                    if (result.isConfirmed) {
                        $('#order_form').submit();
                    }
                })
            });

            $('body').on('keyup',
                '.quantity, .price',
                function() {
                    calculate();
                });
            $('body').on('change',
                '.quantity, .price',
                function() {
                    calculate();
                });
        });

        function addProduct__delete() {
            $('#btn-add-product').click(function() {
                let html = $('#template-product').html();
                let item = $(html);
                $('#product-container').append(item);

                let defaultSelect = item.find('.default-select');

                if (defaultSelect.length > 0) {
                    new Selectr(defaultSelect[0]);
                }

                if ($('.product-item').length >= 1) {
                    $('.btn-remove').show();
                }

            });
            $('body').on('click', '.btn-remove', function() {
                var product_id = $(this).closest('tr').find('.product').val();
                $(this).closest('.product-item').remove();
                calculate();
                if ($('.product-item').length <= 1) {
                    $('.btn-remove').hide();
                }
                productIds = $.grep(productIds, function(value) {
                    return value != product_id;
                });
            });
            if ($('.product-item').length <= 1) {
                $('.btn-remove').hide();
            } else {
                $('.btn-remove').show();
            }
        }

        function calculate() {
            let subTotal = 0;
            let totalQuantity = 0;


            $('.product-item').each(function(i) {
                let price = $('.price').eq(i).val();
                let quantity = $('.quantity').eq(i).val();

                if (price == '' || price < 0 || !$.isNumeric(price)) {
                    price = 0;
                }
                if (quantity == '' || quantity < 0 || !$.isNumeric(quantity)) {
                    quantity = 0;
                }
                let amount = quantity * price;

                $('.amount').eq(i).val((amount).toFixed(2));
                subTotal += amount;
                totalQuantity += parseFloat(quantity);
            });

            $('#total_quantity').html(totalQuantity);
            $('#total_amount').html(subTotal.toFixed(2));
        }
    </script>
@endpush