@extends('admin.layout.master')
@section('title', 'Product Sale Price')
@section('custom_style')
    <style>
        label {
            font-size: 13px
        }  
        .table thead th,
        .table tbody td {
            padding: 0rem;
            padding-right: 0.35rem;
            padding-left: 0.35rem;
            border: 1px solid #2c7f6f;
        }
        .modal-tbl th,
        .modal-tbl td {
            padding: .20rem; 
        }
        .nav-tabs .nav-link.active,
        .nav-tabs .nav-item.show .nav-link {
            border-top: 1px solid #2c7f6f;
            border-bottom: 1px solid #e2e2e2;
            border-left: 1px solid #2c7f6f;
            border-right: 1px solid #2c7f6f;
            background: none !important;
            color: #2c7f6f;
        } 
        .nav-link:hover {
            border-bottom: #2c7f6f !important;
        } 
        a.nav-link.active:hover {
            border-bottom: #e2e2e2 !important;
        } 
        a.nav-link {
            color: #9e9e9e;
        } 
        .nav-tabs {
            border-bottom: 1px solid #2c7f6f;
        }  
    </style>
@endsection
@section('content')
    <div class="card sina-card">
        <div class="card-header card-header-s d-flex flex-wrap align-items-center">
            <h4 class="col-6 pl-0">Product Sales Price </h4>
            <div class="col-6 d-flex justify-content-end">
                <a class="btn-sina-title-add d-flex align-items-center" type="button" name="button" onclick="$('#create_modal').modal('show')">
                    <div class="col pl-0 pr-2">
                        <i class="fas fa-plus-circle"></i>
                    </div>
                    <div>Add New</div>
                </a>
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-4 pr-0 mb-2">
                    <label for="pro_id">Product</label>
                    <select class="product_filter form-control select_2" style="width: 100%" name="pro_id" id="pro_id"> </select>
                </div>
                <div class="col-md-4 pr-0 mb-2">
                    <label for="date_range">Date</label>
                   <input type="text" name="date_range" id="date_range" class="form-control range_picker">
                </div>
                <div class="col-md-1 col-1 flex-wrap pr-0 text-center mb-2 pt-1"> <br>
                    <button class="btn btn-danger btn-sm" onclick="filterTable()" type="button">Filter</button>
                </div>
            </div>
            <div class="table-responsive" id="div_table">
                <table class="table table-striped table-bordered" id="DataResult">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Product</th>
                            <th>date</th>
                            <th>Buy Price</th>
                            <th>Sell Price</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @include('inventory.product.datewise_product_price.create')
@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() {
            productSearch('product_filter');
            productSearch('product_live');
            activeFlatpickr('range');

            $('#form').on('submit', function(event) {
                event.preventDefault();
                const callback = data => {
                    console.log(data);
                    p_ids = [];
                    $('#modal_tbody').empty();
                    for (let i = 0; i < 5; i++) addNew();
                    $('#create_modal').modal('hide');
                    filterTable();
                }
                ajaxCallWithFormData('/datewise-product-price', 'POST', new FormData(this), callback);
            });
        });

        const activeFlatpickr = type => {
            if (type != 'range') {
                flatpickr('.date_picker', {
                    dateFormat: 'd-m-Y',
                });
            } else {
                flatpickr('.range_picker', {
                    mode: 'range',
                    dateFormat: 'd-m-Y',
                    defaultDate: [],
                });
            }
        }
        
        const filterTable = () => {
            const setData = data => {
                let html = `<table class="table table-striped table-bordered" id="DataResult">
                    <thead>
                        <tr>
                            <th class="text-center">#</th>
                            <th class="text-center">Product</th>
                            <th class="text-center">date</th>
                            <th class="text-center">Buy Price</th>
                            <th class="text-center">Sell Price</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>`;
                    for (const [index, item] of data.entries()) {
                        let i = index+1;
                        html += `<tr>
                            <td>${ i }</td>
                            <td>${ item.product.name_eng }</td>
                            <td class="text-center"> <input type="date" onchange="updateField(${item.id}, 'date', this.value);" onblur="$(this).attr('readonly', true);" ondblclick="$(this).attr('readonly', false);" readonly id="e_date${ i }" class="form-control" value=${ GetFormattedDate(item.date) }> </td>
                            <td class="text-center"> <input type="number" onchange="updateField(${item.id}, 'buy_price', this.value);" onblur="$(this).attr('readonly', true);" ondblclick="$(this).attr('readonly', false);" readonly step=".00001" id="e_buy_price${ i }" class="form-control" value=${ item.buy_price }> </td>
                            <td class="text-center"> <input type="number" onchange="updateField(${item.id}, 'sell_price', this.value);" onblur="$(this).attr('readonly', true);" ondblclick="$(this).attr('readonly', false);" readonly step=".00001" id="e_sell_price${ i }" class="form-control" value=${ item.sell_price }> </td>
                            <td> <a href="#" id="status${i}" style="font-size: 25px;" title="Status" onclick="updateField(${item.id}, 'status', ${item.status==1?0:1});"><i class="text-${ (item.status == 1 ? 'success' : 'danger') } fas fa-toggle-${ (item.status == 1 ? 'on' : 'off') }"></i></a> </td>
                        </tr>`;
                    }
                    html += `</tbody>
                </table>`;
                $('#div_table').html(html);
                $('#DataResult').dataTable();
                activeFlatpickr();
            }
            ajaxCall('/datewise-product-price-filter', 'GET', {
                pro_id: $('#pro_id').val(),
                date: $('#date_range').val(),
            }, setData);
        }

        const updateField = (id, field_name, val) => {
            ajaxCall('/datewise-product-price/update', 'GET', {
                id: id,
                field_name: field_name,
                val: val
            }, ()=> {
                alert('Success');
                filterTable();
            });
            
        }
    </script>
@endsection