@extends('admin.layout.master')
@section('title', 'Product Sale Price')
@section('custom_style')
    <style>
        label {
            font-size: 13px
        }
        .table thead tr th,
        .table tbody tr 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">{{__('obs.product')}} {{__('obs.sales')}} {{__('obs.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>{{__('obs.add')}} {{__('obs.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">{{__('obs.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-3 col-12 flex-wrap pr-0 mb-2">
                    <label for="category_id">{{__('obs.category')}}</label>
                    <select class="form-control category_id" style="width: 100%" name="category_id" id="category_id">
                        <option value=""></option>
                        @forelse ($categories as $cat)
                            <option value="{{$cat->code}}" > {{$cat->name_eng .' ('. $cat->code.')'}} </option>
                            @forelse ($cat->child as $sub_cat)
                                <option value="{{$sub_cat->code}}">&nbsp;&nbsp; {{$sub_cat->name_eng}}</option>
                                @forelse ($sub_cat->child as $sub_sub_cat)
                                    <option value="{{$sub_sub_cat->code}}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{$sub_sub_cat->name_eng}}</option>
                                @empty
                                @endforelse
                            @empty
                            @endforelse
                        @empty
                        @endforelse
                    </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">{{__('obs.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>{{__('obs.product')}}</th>
                            <th>{{__('obs.unit')}} {{__('obs.qty')}}</th>
                            <th>{{__('obs.date')}}</th>
                            <th>{{__('obs.buy')}} {{__('obs.price')}}</th>
                            <th>{{__('obs.sell')}} {{__('obs.price')}}</th>
                            <th>{{__('obs.action')}}</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            @include('admin.global.loader')
        </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', true);
            productSearch('product_live');
            activeFlatpickr('range');
            select2('category_id');

            $('#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 = () => {
            ajaxCall('/datewise-product-price-filter', 'GET', {
                pro_id: $('#pro_id').val(),
                date: $('#date_range').val(),
                category_id: $('#category_id').val(),
            }, setData);
        }
        const setData = data => {
            let current_code = '';
            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">Unit Qty</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>`;
                let cat_index = 0;
                for (const [index, item] of data.entries()) { debugger
                    let i = index+1;
                    if (current_code != item.product.cat_code) {
                        console.log(item.product.cat_by_cat_code);
                        html += `<tr>
                            <td style="display: none" class="text-left"> <strong>${ ++cat_index }</strong> </td>
                            <td style="display: none"> </td>
                            <td style="display: none"> </td>
                            <td style="display: none"> </td>
                            <td colspan="7" class="text-center"><strong>${ item.product.cat_by_cat_code.name_eng }</strong></td>
                            <td style="display: none"> </td>
                            <td style="display: none"> </td>
                        </tr>`;
                        current_code = item.product.cat_code;
                    }
                    html += `<tr>
                        <td class="text-center">${ i }</td>
                        <td>${ item.product.name_eng }</td>
                        <td class="text-center"><strong>${ item.product.unit_quantity }</strong>/${ item.product.secoundary_unit.name }</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();
            $('#loader').hide();
            // activeFlatpickr();
        }
        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