@extends('layouts.master')

@section('page_title', 'Purchase Details')
@section('title', 'Add Purchases')
@section('main_item', 'Purchases')
@section('sub_item', 'Add Purchases')

@section('content')

    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h4 class="header-title mt-0">Add Purchases</h4>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label style="font-weight: bold" style="font-weight: bold" for="supplier">Supplier</label>
                            <div class="input-group">
                                <select class="custom-select" id="supplier" name="suppliers_id" required>
                                    <option value="">Select Supplier</option>
                                    @foreach ($suppliers as $supplier)
                                        <option value="{{ $supplier->id }}">{{ $supplier->business_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="input-group-append">
                                <a id="add-supplier" href="javascript:void(0)" class="btn btn-outline-light"
                                    style="background:#ed4b00; color: white;" type="button" data-toggle="modal"
                                    data-target=".bd-example-modal-lg">Add Supplier</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label style="font-weight: bold" style="font-weight: bold" for="ref_number">Purchase No</label>
                            <input type="text" class="form-control" id="ref_number" name="" required="">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label style="font-weight: bold" style="font-weight: bold" for="date-format">Purchase
                                Date</label>
                            <input type="text" class="form-control mdate" placeholder="" id="mdate" name=""
                                required>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label style="font-weight: bold" for="currency_type" style="font-weight: bold">Default Currency
                                Type</label>
                            <select class="form-control" id="currency_type" name="currency_type">
                                <option value="">Select Currency Type</option>
                                <option value="lkr" @if ($setting->select_currency_type != '1') style="display: none" @endif>LKR
                                </option>
                                <option value="usd" @if ($setting->select_currency_type == '1') style="display: none" @endif>USD
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4" id="div_currency_rate">
                        <div class="form-group">
                            <label style="font-weight: bold" for="currency_rate">USD Currency Rate (Rs.)</label>
                            <input type="text" class="form-control currency_rate" placeholder="currency_rate"
                                id="currency_rate" name="currency_rate"
                                value="{{ number_format($setting->currency_rate, 2) }}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="row justify-content-center">
                    <div class="col-md-6 ">
                        <div class="form-group">
                            <div class="input-group">
                                <select class="custom-select select2" id="grn-product-list" disabled>
                                    <option selected="">Choose Product</option>
                                    @foreach ($products as $product)
                                        <option id="{{ $product->id }}" value="{{ $product->id }}">
                                            {{ $product->sku }} | {{ $product->product_name }} |@if (!empty($product->attribute_value))
                                                ({{ $product->attribute_value }})
                                            @else
                                                (single)
                                            @endif
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <form action="{{ route('grns.store') }}" method="POST" id="grn-create">
                    @csrf
                    <div class="table-responsive dash-social" style="height: 300px;" style="overflow: scroll;">
                        <table id="datatable" class="table table-striped">
                            <thead class="thead-dark">
                                <tr>
                                    <th>Product Name</th>
                                    <th>Purchase Quantity</th>
                                    <th>Purchase Price @if ($setting->select_currency_type == '1')
                                            <span> (LKR) </span>
                                        @else
                                            <span> (USD) </span>
                                        @endif
                                    </th>
                                    <th id="convert_to_p_price">Purchase Price Convert to LKR</th>
                                    <th>Selling Price @if ($setting->select_currency_type == '1')
                                            <span> (LKR) </span>
                                        @else
                                            <span> (USD) </span>
                                        @endif
                                    </th>
                                    <th id="convert_to_s_price">Selling Price Convert to LKR</th>
                                    <th @if ($setting->second_woocommerece_api_setting_enable != '1') style="display: none" @endif>Second
                                        Woocomerece Selling Price @if ($setting->select_currency_type == '1')
                                            <span> (LKR) </span>
                                        @else
                                            <span> (USD) </span>
                                        @endif
                                    </th>
                                    <th>Second Selling Price @if ($setting->select_currency_type == '1')
                                            <span> (LKR) </span>
                                        @else
                                            <span> (USD) </span>
                                        @endif
                                    </th>
                                    <th>Line Total</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody id="t-body">
                            </tbody>
                        </table>
                    </div>
            </div>
            <div hidden>
                <input type="text" class="form-control" placeholder="Reference Number" id="ref_number_copy"
                    name="ref_no" readonly>
                <input type="text" class="form-control" placeholder="" id="mdate_copy" name="grn_date" required readonly>
                <input type="text" class="form-control" placeholder="" id="supplier_copy" name="contact_id" required
                    readonly>

                <div class="form-group">
                    <input type="text" class="form-control currency_rate" placeholder="currency rate"
                        id="copy_currency" name="currency_rate" value="{{ $setting->currency_rate }}">
                </div>
            </div>
        </div>
    </div>
    <div class="form-group" hidden>
        <select class="form-control select2" id="supplier" name="currency_type">
            <option value="">Select Customer</option>
            @if ($setting->select_currency_type == '1')
                <option value="lkr" selected>LKR</option>
            @else
                <option value="usd" selected>USD</option>
            @endif
        </select>
    </div>
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h4 class="header-title mt-0">Total Cost</h4>
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label style="font-weight: bold" for="sub_total">Sub Total</label>
                            <input type="text" class="form-control" placeholder="" id="sub_total" name="grn_total"
                                required="" readonly>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label style="font-weight: bold" for="discount_type">Discount Type</label>
                            <select class="form-control " id="discount_type" name="discount_type" required>
                                <option value="fixed" selected>Fixed</option>
                                <option value="precentage">Precentage</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label style="font-weight: bold" for="discount">Discount</label>
                            <input type="number" class="form-control" placeholder="" id="discount"
                                name="grn_discount" required="">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label style="font-weight: bold" for="net_total">Net Total</label>
                            <input type="text" class="form-control" style="font-weight: bold" placeholder=""
                                id="net_total" name="grn_nettotal" required readonly>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h4 class="header-title mt-0">Add Payment</h4>
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label style="font-weight: bold">Payment Ref No</label>
                            <input type="text" class="form-control" id="payment_ref_no" name="payment_ref_no">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label style="font-weight: bold">Paid Amount</label>
                            <input type="text" class="form-control" id="paid_amount" name="paid_amount">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label style="font-weight: bold">Payment Method</label>
                            <select class="form-control select2" name="payment_method" id="payment_method">
                                <option value="cash">Cash</option>
                                <option value="card">Card</option>
                                <option value="cheque">Cheque</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label style="font-weight: bold">Payment Account</label>
                            <select id="account_id" class="select2 form-control mb-3 custom-select" name="account_id"
                                style="width: 100%; height:36px;" required>
                                @foreach ($accounts as $account)
                                    <option value="{{ $account->id }}" {{ $account->is_default == 1 ? 'selected' : '' }}>
                                        {{ $account->account_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label style="font-weight: bold">Payment Note</label>
                            <textarea type="text" class="form-control" id="payment_note" name="payment_note"></textarea>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12 text-right">
                        <button id="save-btn" type="submit" class="btn btn-primary px-5 py-2">Save</button>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {{-- Model Sart here --}}
    <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="mt-0 header-title">Add Supplier</h4>
                            <p class="text-muted mb-3"></p>
                            <input type="text" class="form-control" placeholder="type" id="type" name="type"
                                value="customer" readonly hidden>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label style="font-weight: bold" for="name">Name</label>
                                        <input type="text" class="form-control" placeholder="Name" id="name"
                                            name="name" required="">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label style="font-weight: bold" for="businesss_name">Business Name</label>
                                        <input type="text" class="form-control" placeholder="Business Name"
                                            id="business_name" name="business_name">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label style="font-weight: bold" for="primary_mobile">Primary Mobile</label>
                                        <input type="tel" class="form-control @error('mobile') is-invalid @enderror"
                                            placeholder="Primary Mobile" id="mobile" name="mobile" required=""
                                            data-parsley-type="digits">
                                        @error('mobile')
                                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                                {{ $message }}
                                                <button type="button" class="close" data-dismiss="alert"
                                                    aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label style="font-weight: bold" for="secondary_mobile">Secondary Mobile</label>
                                        <input type="tel" class="form-control @error('mobile') is-invalid @enderror"
                                            placeholder="Secondary Mobile" id="secondary_mobile" name="mobile_2"
                                            data-parsley-type="digits">
                                        @error('mobile_2')
                                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                                {{ $message }}
                                                <button type="button" class="close" data-dismiss="alert"
                                                    aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label style="font-weight: bold" for="landline">Landline</label>
                                        <input type="text" class="form-control @error('mobile') is-invalid @enderror"
                                            placeholder="Landline" id="landline" name="landline"
                                            data-parsley-type="digits">
                                        @error('landline')
                                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                                {{ $message }}
                                                <button type="button" class="close" data-dismiss="alert"
                                                    aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label style="font-weight: bold" for="landmark">Landmark</label>
                                        <input type="text" class="form-control" placeholder="Landmark" id="landmark"
                                            name="landmark" required="">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label style="font-weight: bold" for="city">City</label>
                                        <input type="text" class="form-control" placeholder="City" id="city"
                                            name="city" required="">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label style="font-weight: bold" for="province">District</label>
                                        <select class="form-control" id="province" name="district_id" required>
                                            <option value="">Select</option>
                                            @foreach ($districts as $district)
                                                <option value="{{ $district->id }}">{{ $district->name_en }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12 text-right">
                                    <button class="btn btn-primary px-5 py-2" id="supplier_save" data-dismiss="modal"
                                        aria-label="Close">Save</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $('#supplier').select2();
            $("#account_id").select2();
            $('#mdate').val(moment(new Date()).format("YYYY-MM-DD"));
            $('#mdate_copy').val(moment(new Date()).format("YYYY-MM-DD"));
        })
        $(document).on('change', '#grn-product-list', function() {
            var selected = $('#grn-product-list').find(':selected').val();
            var rowCount = $('#datatable tbody tr').length;
            $.ajax({
                method: 'GET',
                url: '/grns/product/add/currency',
                data: {
                    selected: selected,
                    rowCount: rowCount,
                    currency_type: $('#currency_type').val(),
                },
                success: function(response) {
                    $(response).appendTo($("#datatable tbody"));
                    calucalte()
                }
            })
        })
        $(document).on('change', '#ref_number, #supplier, #mdate, #currency_rate', function() {
            $("#ref_number_copy").val($("#ref_number").val());
            $("#mdate_copy").val($("#mdate").val());
            $("#copy_currency").val($("#currency_rate").val());
            $("#supplier_copy").val($("#supplier").find(':selected').val());
            $("#copy_currency_type").val($("#currency_type").find(':selected').val());
        })
        $(document).on('change', '.qty, .s_price, .p_price', function() {
            let qty = $(this).closest("tr").find(".qty").val();
            let p_price = $(this).closest("tr").find(".p_price").val();
            let line_total = parseFloat(qty) * parseFloat(p_price);
            $(this).closest("tr").find(".line_total").html(line_total);
            $(this).closest("tr").find(".line_total_price").val(line_total);
            calucalte();
        })
        $(document).on('keyup', '.usd_qty, .usd_s_price, .usd_p_price, .currency_rate, .p_price_to_lkr, .s_price_to_lkr',
            function() {
                var qty = $(this).closest("tr").find(".usd_qty").val();
  
                var p_price = $(this).closest("tr").find(".usd_p_price").val();
         
                var s_price = $(this).closest("tr").find(".usd_s_price").val();
                
                var currency_rate = $('#currency_rate').val();

                var p_price_to_lkr = parseFloat(p_price) * parseFloat(currency_rate);
                var line_total = parseFloat(p_price_to_lkr) * parseFloat(qty);
                var s_price_to_lkr = parseFloat(s_price) * parseFloat(currency_rate);

                $(this).closest("tr").find(".line_total").html(line_total);
               
                $(this).closest("tr").find(".line_total_price").val(line_total);
                $(this).closest("tr").find(".p_price_to_lkr").val(p_price_to_lkr);
                $(this).closest("tr").find(".s_price_to_lkr").val(s_price_to_lkr);
                $(this).closest("tr").find(".currency_rate").val(currency_rate);
                calucalte();
            })

        function calucalte() {
            let total = 0.00;
            $('#datatable tbody tr').each(function() {
                total += parseFloat($(this).find(".line_total_price").val());
            });
            $('#sub_total').val(total.toFixed(2))
            $('#net_total').val(total.toFixed(2))
            $('#paid_amount').val(total.toFixed(2))
            $('#discount').val('0.00')
        }
        $('#currency_type').on('change', function() {
            if ($(this).val() != '') {
                $('#grn-product-list').prop('disabled', false);
            } else {
                $('#grn-product-list').prop('disabled', 'disabled');
            }
        });
        $(document).on('click', '.remove_row', function() {
            $(this).closest("tr").remove();
            calucalte();
        })

        $(document).on('click', '#supplier_save', function() {
            let name = $('#name').val();
            let business_name = $('#business_name').val();
            let mobile = $('#mobile').val();
            let secondary_mobile = $('#secondary_mobile').val();
            let landline = $('#landline').val();
            let landmark = $('#landmark').val();
            let city = $('#city').val();
            let district_id = $('#province').val();

            $.ajax({
                method: 'POST',
                url: "{{ route('grn.supplier') }} ",
                data: {
                    "_token": "{{ csrf_token() }}",
                    'name': name,
                    'business_name': business_name,
                    'mobile': mobile,
                    'secondary_mobile': secondary_mobile,
                    'landline': landline,
                    'landmark': landmark,
                    'city': city,
                    'district_id': district_id,
                },
                success: function(response) {
                    $('#supplier').empty().html(response);
                    $("#supplier_copy").val($("#supplier").find(':selected').val());
                  
                }
            })
        })
        $(document).on('change', '#discount', function() {
            let discount_type = $("#discount_type").val();
            let sub_total = $('#sub_total').val();
            let discount = $("#discount").val();
            if (discount_type == 'fixed') {
                let sub = sub_total - discount;
                $("#net_total").val(sub);
                $("#paid_amount").val(sub);
            } else {
                let precentage = sub_total * discount / 100;
                let sub = sub_total - precentage;
                $("#net_total").val(sub);
                $("#paid_amount").val(sub);
            }
        });
        $(document).on('change', '#discount_type', function() {
            let sub_total = $('#sub_total').val();
            $("#discount").val('');
            $("#net_total").val(sub_total);
        });
        $("input[name='paid_amount']").change(function() {
            let paid_amount = $('#paid_amount').val();
            let net_total = $('#net_total').val();
            if (Math.round(paid_amount) > net_total) {
                Swal.fire(
                    'Warning',
                    'Paid Amount is greater than Net Total',
                    'warning'
                )
                $('#paid_amount').val('');
            }
        });
        $(document).on('click', '#save-btn', function(e) {
            e.preventDefault();
            let supplier_id = $('#supplier_copy').val();
            let item_count = $('#t-body tr').length;
            if (item_count == 0) {
                $.toast({
                    heading: 'Error',
                    text: "No products in the table.!",
                    position: 'top-right',
                    bgColor: '#f1646c',
                    icon: 'error',
                    showHideTransition: 'fade',
                    loaderBg: '#ecf0f1'
                })
                return false;
            }
            if (supplier_id == '') {
                $.toast({
                    heading: 'Error',
                    text: "Supplier is required.!",
                    position: 'top-right',
                    bgColor: '#f1646c',
                    icon: 'error',
                    showHideTransition: 'fade',
                    loaderBg: '#ecf0f1'
                })
            } else {
                $('#grn-create').submit();
            }
        })
        $('#div_currency_rate').hide();
        $('#currency_type').on('change', function() {
            var selectedValue = $(this).val();
            if (selectedValue === 'lkr') {
                $('#div_currency_rate').hide();
                $('#convert_to_p_price').hide();
                $('#convert_to_s_price').hide();
                $('#rate_hide').hide();
            } else {
                $('#div_currency_rate').show();
                $('#currency_rate').show();
                $('#convert_to_p_price').show();
                $('#convert_to_s_price').show();
                $('#rate_hide').show();
            }
        });
        $(document).ready(function() {
            let clicks = 0;
            $('#save-btn').click(function() {
                clicks++;
                if (clicks == 2) {
                    $(this).prop('disabled', true);
                }
            });
        });
        $(document).on('change', '#supplier', function() {
            let supplier = $('#supplier').val();
            if (supplier != '') {
                $("#save-btn").prop("disabled", false);
            }
        });
    </script>

@endsection