@extends('admin.layout.master')
@section('title', 'Extra Charge Setup')
@section('content')
<div class="card sina-card">
    <div class="card-header card-header-s">
        <h4>{{__('obs.product_extra_charge_setup')}}</h4>
    </div>
    <div class="card-body">
        <input type="hidden" name="" id="csrf-token" value="{{ Session::token() }}" />
        <form method="post" action="{{ route('inventory.product.extra_charge_setup.store') }}" class="form_submit">
            <div class="row">
                <div class="col-2">
                    <label for="">{{ __('obs.product')}}</label>
                    <select class="product_live form-control input-sm" style="width: 100%" name="product_id" id="product_id" onchange="getExtraCharge()">
                    </select>
                </div>
                <div class="col-2">
                    <label for="" class="w-100">{{ __('obs.product_price')}}</label>
                    <label for="" class="w-100" id="product_price"></label>
                </div>
            </div>
            <div class="row mt-3 form_other_field" style="border-bottom: 1px solid #000; border-top: 1px solid #000; visibility: hidden">
                <div class="col-4" style="border-left: 1px solid #000">
                    <label for="">{{ __('obs.charge_name')}}</label>
                </div>
                <div class="col-1">
                    <label for="">{{ __('obs.amount')}}</label>
                </div>
                <div class="col-1" style="border-right: 1px solid #000">
                    <label for="">{{ __('obs.type')}}</label>
                </div>
                <div class="col-4">
                    <label for="">{{ __('obs.charge_name')}}</label>
                </div>
                <div class="col-1">
                    <label for="">{{ __('obs.amount')}}</label>
                </div>
                <div class="col-1" style="border-right: 1px solid #000">
                    <label for="">{{ __('obs.type')}}</label>
                </div>
            </div>
            <div class="row form_other_field" style="visibility: hidden">
                @foreach ($extra_charges as $e)
                    <div class="col-4 py-1" style="@if($loop->iteration % 2) border-left: 1px solid #000; @endif border-bottom: 1px solid #000;">
                        <div class="form-group">
                            <input type="checkbox" class="product_extra_charge" data-id="{{$e->id}}" name="product_extra_charge_id[{{$e->id}}]" value="{{$e->id}}" id="product_extra_charge_id_{{$e->id}}" onchange="toggleSingleField({{$e->id}}, this.checked)">
                            <label for="product_extra_charge_id_{{$e->id}}">{{$e->name}}</label>
                        </div>
                    </div>
                    <div class="col-1 py-1" style="border-bottom: 1px solid #000;">
                        <div class="form-group">
                            <input type="number" name="amount[{{$e->id}}]" value="0" id="amount_{{$e->id}}" class="form-control" style="visibility: hidden">
                        </div>
                    </div>
                    <div class="col-1 py-1" style="border-right: 1px solid #000; border-bottom: 1px solid #000;">
                        <div class="form-group">
                            <select name="type[{{$e->id}}]" id="type_{{$e->id}}" data-default="{{ $e->default_type }}" class="form-control" style="visibility: hidden">
                                <option value="1">%</option>
                                <option value="2">{{ __('obs.fixed') }}</option>
                            </select>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="row d-flex justify-content-end mt-2 form_other_field" style="visibility: hidden">
                <div class="col-2">
                    <div class="form-group">
                        <button type="submit" class="btn-sina-submit w-100" id="save">{{ __('obs.save') }}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

@include('admin.layout.common_form_submit_js')
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            liveSearch('product_live', '/product-live-search', false, title = 'Select Product', {}, null);
        });
        async function getExtraCharge() {
            let product_id = $('#product_id').val();
            $('#product_price').html('');
            if (product_id) {
                let product_info = await searchedItemById(product_id);
                if (product_info) {
                    $('#product_price').html(product_info.sell_price);
                }
                toggleOtherField(1);
                getLoadingStatus();
                customAjaxCall(function(res){
                    $('.product_extra_charge').each(function() {
                        let id = $(this).attr('data-id');
                        $(this).prop('checked', false);
                        toggleSingleField(id, 0);
                        $(`#amount_${id}`).val('0');
                        $(`#type_${id}`).val($(`#type_${id}`).attr('data-default'));
                        let current_setup = res.extra_charges.find(x => x.product_extra_charge_id == id);
                        if (current_setup) {
                            $(this).prop('checked', true);
                            toggleSingleField(id, 1);
                            $(`#amount_${id}`).val(current_setup.amount);
                            $(`#type_${id}`).val(current_setup.type);
                        }
                    });
                    closeSweetAlert();
                }, 'GET', "{{ route('inventory.product.extra_charge_setup.get_current_setup') }}", {product_id: product_id});
            } else {
                toggleOtherField(0);
            }
        }
        function toggleOtherField(type) {
            if (type == 1) {
                $('.form_other_field').css('visibility', 'visible');
            } else {
                $('.form_other_field').css('visibility', 'hidden');
            }
        }
        function toggleSingleField(id, type) {
            if (type == 1) {
                $('#amount_' + id).css('visibility', 'visible');
                $('#type_' + id).css('visibility', 'visible');
            } else {
                $('#amount_' + id).css('visibility', 'hidden');
                $('#type_' + id).css('visibility', 'hidden');
            }
        }
    </script>
@endsection