@extends('backend.layouts.app')
<style>
.calculation{
    display: block ruby;
}
.form-group {
    margin-bottom: 0rem !important;
}
.card-body{
    font-size:12px;
}
.table thead th{
    font-size:12px;
    text-align:center;
}
.table tbody td{
    font-size:12px;
    text-align:center;
}
</style>
@section('content')

<div class="col-xl-12">
	<div class="breadcrumb-holder">
		<h5 style="text-align: center">Other Bill Collection</h5>
            <a href="{{route('bill-collection')}}" class="btn btn-success" style="color: #000000; border: 1px solid #eee; margin: 0px auto;">
					<i class="fa fa-home" aria-hidden="true" style="font-size: 20px; "></i>
					{{-- <img src="{{ url('public/backend/images/icons/admission.png') }}" style="width: 20px"> --}}
                    Bill Collection
			</a>
		<ol class="breadcrumb float-right">
		</ol>
		<div class="clearfix"></div>
	</div>
</div>
<div class="container-fluid">
	<div class="col-md-12">
		<div style="text-align: right; margin-bottom: 20px;">

        </div>
        <div class="card" style=" margin-top: -19px; ">
            <div class="card-header">
                <!-- <h3 class="card-title"><a href="{{ route('swimming-registration.index') }}" class="btn btn-info">Due Collection</a></h3> -->
                <div class="btn-group">
                    <!-- <button type="button" class="btn btn-info" data-toggle="modal" data-target="#create"><i class="fa fa-fw fa-plus-square"></i></button> -->
                    <!-- <a href="{{ route('swimming-registration.create') }}" class="btn btn-info"><i class="fa fa-fw fa-plus-square"></i></a> -->
                </div>
            </div>
            <div class="card-body">	
            <form id="submitForm" action="{{ route('other-bill-collection.store') }}" method="post">
            @csrf
                <div class="row" style=" margin-top: -19px; ">
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Date <span style="color:red">*</span></label>
                            <input type="date" class="form-control" value="@if(isset($data)){{ $data['entry_date'] }}@else2026-06-10@endif" name="entry_date"  >
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Time <span style="color:red">*</span></label>
                            <input type="text" class="form-control" value="@if(isset($data)){{ $data['entry_time'] }}@else08:08:16@endif" name="entry_time" readonly >
                        </div>
                    </div>
                </div>	
                <div class="row memberDivPortion">
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Search (Membership No)</label>
                            <input type="text" name="search" class="form-control" value="@if(isset($data)) {{ $data['membership_id'] }} @endif" name="" id="search" placeholder="Search" autocomplete="off" style=" width: 151px; " required>
                        </div>
                    </div>
                    <!-- <div class="col-md-4">
                        <div class="form-group">
                            <label>Search (Name)</label>
                            <input type="text" class="form-control" value="@if(isset($data)) {{ $data['membership_id'] }} @endif" name="" id="membership_name_search" placeholder="Search" autocomplete="off">
                        </div>
                    </div> -->
                </div>
            <div class="row memberDivPortion"  style="margin-top:7px;">
                <span id="member_error_text" style="color:red;font-size: 8px;">(Member Not Found)</span>
                <div class="col-md-12">
                    <table class="table table-bordered memberDetailsTable">
                        <thead>
                            <tr>
                                <th width="150px">Membership Id</th>
                                <th>Member Name</th>
                                <th>Phone</th>
                                <th>Status</th>
                                <th width="150px">Subscription type</th>
                                <th>Photo</th>
                            </tr>
                        </thead>
                        <tbbody>
                            <tr height="">
                                <td >
                                    <input type="hidden" class="form-control" value="@if(isset($data)) {{ $data['membership_id'] }} @endif" name="membership_id" id="membership_id" placeholder="Membership Id" readonly>
                                    <p id="show_membership_id"></p>
                                </td>
                                <td>
                                    <input type="hidden" class="form-control" value="{{ old('member_name') }}" id="member_name" name="member_name" placeholder="Member Name" readonly/>
                                    <p id="show_member_name"></p>
                                </td>
                                <td>
                                    <input type="hidden" class="form-control" value="{{ old('member_name') }}" id="member_phone" name="member_phone" placeholder="Member Name" readonly/>
                                    <p id="show_member_phone"></p>
                                </td>
                                <td>
                                    <input type="hidden" class="form-control" value="{{ old('member_name') }}" id="member_status" name="member_status" placeholder="Member Name" readonly/>
                                    <p id="show_member_status"></p>
                                </td>
                                <td>
                                    <input type="hidden" class="form-control" value="{{ old('show_subscription_type') }}" id="subscription_type" name="show_subscription_type" placeholder="show_subscription_type" readonly/>
                                    <p id="show_subscription_type"></p>
                                </td>
                                <td>
                                    <div id="member-photo-container">
                        
                                    </div>
                                </td>
                            </tr>
                        </tbbody>
                    </table>
                </div>
            </div>
                <hr style=" margin-top: -3px; ">	
                <div class="row scrollDepartment" style=" margin-top: -11px; ">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Bill Name<span style="color:red">*</span></label>
                            <select class="form-control select2" name="" id="bill_name" style="width: 100%;">
                            <option value="" selected="selected">Select Bill Name</option>
                            @if(sizeof($bills) > 0)
                            @foreach($bills as $bill)
                                <option value="{{ $bill->id }}"> {{ $bill->bill_name }} </option>
                            @endforeach
                            @endif
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Bill Amount<span style="color:red">*</span></label>
                            <input type="number" step="any" min="0" class="form-control" value="" name="" placeholder="Bill Amount" id="bill_amount">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Total</label><span style="color:red">*</span>
                            <input type="number" step="any" min="0" class="form-control" value="" name="" placeholder="Total" id="total">
                        </div>
                    </div>
                    <div class="col-md-1" style="padding-top: 30px;">
                        <div class="form-group">
                            <button type="button" id="addOnRow" class="btn btn-info"><i class="fa fa-fw fa-plus-square"></i></button>
                            <span style="color:red">*</span>
                        </div>
                    </div>
                </div>
                <div class="row" style="margin-top: 3px;padding: 11px;">
                    <table class="table table-striped table-bordered serviceDetailsTable" >
                        <thead>
                            <tr>
                                <th>Bill Name</th>
                                <th>Bill Amount</th>
                                <th>Total</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if(isset($data))
                            @if(sizeof($data['bill_name_id'])>0)
                                @foreach($data['bill_name_id'] as $key=>$value)
                                <tr class="serviceDetailsTable">
                                    <td> <input type="hidden" name="bill_name_id[]" value="{{ $value}}">{{ App\Model\BillCollection\BillCollectionName::find($value)->bill_name }}</td>
                                    <td><input type="hidden" name="bill_amount[]" value="{{ $data['bill_amount'][$key] }}">{{ $data['bill_amount'][$key] }}</td>
                                    <td id="service_total_table"><input type="hidden" name="total[]" value="{{ $data['total'][$key] }}">{{ $data['total'][$key] }}</td>
                                    <td><a href="javascript:;" class="deleteSwmming"><i class="fa fa-trash"></i></a></td>
                                </tr>
                                @endforeach
                            @endif
                            @endif
                        </tbody>
                    </table>
                </div>
                <hr style=" margin-top: -11px; ">
                <div class="row">
                    <div class="col-md-6">
                        <div class="col-md-6" style=" right: 12px; ">
                            <div class="form-group">
                                <label>Payment Method<span style="color:red">*</span></label>
                                <select class="form-control select2" name="p_method" style="width: 100%;" id="p_method" required>
                                    <option value="" selected="selected">Select Payment Method</option>
                                    @if(sizeof($p_method) > 0)
                                    @foreach($p_method as $p_id)
                                    <option value="{{ $p_id->id }}" @if( old('p_method')== $p_id->id ) selected @endif )>{{ $p_id->name }}</option>
                                    @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                        <div class="payment_method_wise_show">
                            <div class="col-md-6" style=" right: 12px; ">
                                <div class="form-group">
                                    <label>Bank Name</label>
                                    <select class="form-control select2" name="bank_id" style="width: 100%;" id="bank">
                                        <option value="" selected="selected">Select Bank </option>
                                        @if(sizeof($bank_lists) > 0)
                                        @foreach($bank_lists as $list)
                                        <option value="{{ $list->id }}">{{ $list->name }}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6" style=" right: 12px; ">
                                <div class="form-group">
                                    <label>Check/Card No</label>
                                    <input type="text" name="check_or_card_no" id="" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-6" style=" right: 12px; ">
                                <div class="form-group">
                                    <label>Check Date(For Check)</label>
                                    <input type="date" name="check_date" id="" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-6" style=" right: 12px; ">
                                <div class="form-group">
                                    <label>Reference</label>
                                    <input type="text" name="reference" id="" class="form-control">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6" style="right: 21.5%;">
                        <table style="float:right;font-size: 12px;">
                            <tr>
                                <td> <label>Sub-Total</label> </td>
                                <td> 
                                @if(isset($data))
                                    <input type="number" step="any" class="form-control" value="{{ $data['sub_total'] }}" name="sub_total" placeholder="Sub-Total" id="sub_total" readonly> 
                                @else
                                    <input type="number" step="any" class="form-control" value="0" name="sub_total" placeholder="Sub-Total" id="sub_total" readonly> 
                                @endif
                                </td>
                            </tr>
                            <tr>
                                <td><label>Discount</label></td>
                                <td> 
                                @if(isset($data))
                                    <input type="number" step="any" class="form-control" value="{{ $data['discount'] }}" name="discount" placeholder="Discount" id="discount">
                                @else
                                    <input type="number" step="any" class="form-control" value="0" name="discount" placeholder="Discount" id="discount">
                                @endif
                                </td>
                            </tr>
                            <tr>
                                <td><label>Grand Total</label></td>
                                <td> 
                                @if(isset($data))
                                    <input type="number" step="any" class="form-control" value="{{ $data['grand_total'] }}" name="grand_total" placeholder="Grand Total" id="grand_total" readonly>
                                @else
                                    <input type="number" step="any" class="form-control" value="0" name="grand_total" placeholder="Grand Total" id="grand_total" readonly>
                                @endif
                                    
                                </td>
                            </tr>
                            <tr>
                                <td> <label>Paid Amount</label></td>
                                <td> 
                                @if(isset($data))
                                    <input type="number" step="any" class="form-control" value="{{ $data['paid_amount'] }}" name="paid_amount" placeholder="Paid Amount" id="paid_amount" >
                                @else
                                    <input type="number" step="any" class="form-control" value="0" name="paid_amount" placeholder="Paid Amount" id="paid_amount" >
                                @endif

                                </td>
                            </tr>
                            <tr>
                                <td><label>Change Amount</label></td>
                                <td>
                                @if(isset($data))
                                    <input type="number" step="any" class="form-control" value="{{ $data['change_amount'] }}" name="change_amount" placeholder="Change Amount" id="change_amount" >
                                @else
                                    <input type="number" step="any" class="form-control" value="0" name="change_amount" placeholder="Change Amount" id="change_amount" >
                                @endif
                                    
                                </td>
                            </tr>
                            <tr>
                                <td><label>Due Amount</label></td>
                                <td>
                                @if(isset($data))
                                <input type="number" step="any" class="form-control" value="{{ $data['due_amount'] }}" name="due_amount" placeholder="Due Amount" id="due_amount" readonly>
                                @else
                                    <input type="number" step="any" class="form-control" value="0" name="due_amount" placeholder="Due Amount" id="due_amount" readonly>
                                @endif
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <!-- <div class="col-md-6">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Payment Method<span style="color:red">*</span></label>
                                <select class="form-control select2" name="p_method" style="width: 100%;" id="p_method" required>
                                    <option value="" selected="selected">Select Payment Method</option>
                                    @if(sizeof($p_method) > 0)
                                    @foreach($p_method as $p_id)
                                    <option value="{{ $p_id->id }}" @if( old('p_method')== $p_id->id ) selected @endif )>{{ $p_id->name }}</option>
                                    @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                    </div> -->
                    <div class="col-md-6">
                        <div class="form-group" style="text-align: right;top: 24px;">
                            <!-- <input type="submit" value="Preview" name="button_type" class="btn btn-success"> -->
                            <input type="hidden" value="Preview" name="button_type">
                            <button type="button" id="submitFormBtn" class="btn btn-success">Preview</button>
                        </div>
                    </div>
                </div>
            </form>
            </div>
        </div>			
	</div>
</div>

<input type="hidden" id="modalValue" value="{{ Session::get('modal') }}">
@endsection

@section('modal_content')

@endsection
@section('page_script')>
<script>
    $('document').ready(function(){
        $('#search').focus();
        $('#member_error_text').hide();
        $('#p_method option')
        .filter(function() { return $.trim( $(this).text() ) == 'Cash'; })
        .attr('selected',true);

 
        $('#submitForm2').hide();
        $('select[name="s_id"]').change(function(){
            var id = $(this).val();
            getService(id);
        });
        $('select[name="swimming_service"]').change(function(){
            autoScroll("scrollDepartment");
            var service_category = $('select[name="s_id"]').val();
            var service_id = $(this).val();
            var member_ship_id = $('input[name="membership_id"]').val();
            //selected text
            var service_text = $(this).find('option:selected').text();
            if(service_text == 'Training'){
                $('#coach_name').prop("disabled", false);
            }else{
                $('#coach_name').val('').change(); 
                $('#coach_name').prop("disabled", true);
            }
            $.ajax({
                type: 'get',
                url: $('#mainUrlSwmiimg').val()+'/getServiceWisePrice',
                data:{
                    'service_category':service_category,
                    'service_id':service_id,
                    'member_ship_id': member_ship_id,
                },
                success:function(data){
                    if(data){
                        $('#unit_price').val(data.price);
                        $('#qty').val(0);
                        $('#service_total').val(0);
                    }else{
                        $('#unit_price').val(0);
                    }
                },
                error:function(data){
                    console.log(data);
                },
            });

        });
        $('#search').keyup(function(){
            var term = $(this).val();
            getMemberDetails(term);
        });
        getMemberDetails($('#search').val());
        // $('#token_no,#locker_no').on('change',function(){
        //     autoScroll("scrollDepartment")
        // });
        $('#qty').on('keyup change',function(){
            totalCalculation();
        });
        $('#unit_price').on('keyup change',function(){
            totalCalculation();
        });
        $('#addOnRow').click(function(){
            var bill_name_id = $('#bill_name').trigger('selected').val();
            var bill_name_text = $('#bill_name').find(":selected").text();
            var bill_amount = $('#bill_amount').val();
            var total = $('#total').val();
            if(bill_name_id != '' && bill_amount != ''){
                var subTotal = parseFloat($('#sub_total').val())+parseFloat(total);
                $('#sub_total').val(subTotal.toFixed(2));
                $('#grand_total').val(subTotal.toFixed(2));
                $('#due_amount').val(subTotal.toFixed(2));
                var showcaseTable = $('table .serviceDetailsTable').closest("tr");
                var checkInsertData = 1;
                // $.each(showcaseTable,function(e){
                //     var checkCode = $(this).find('#tb_code').text();
                //     if(checkCode == data.model.code){
                //         checkInsertData = 0;
                //         return false;
                //     }else{
                //         checkInsertData = 1;
                //     }
                // });
                if(checkInsertData == 1){
                    var newRow = $("<tr class='serviceDetailsTable'>");
                    var col = '';
                        col +='<td><input type="hidden" name="bill_name_id[]" value="'+bill_name_id+'">'+bill_name_text+'</td>';
                        col +='<td><input type="hidden" name="bill_amount[]" value="'+bill_amount+'">'+bill_amount+'</td>';
                        col +='<td id="service_total_table"><input type="hidden" name="total[]" value="'+total+'">'+total+'</td>';
                        col +='<td><a href="javascript:;" class="deleteSwmming"><i class="fa fa-trash"></i></a></td>';
                    newRow.append(col);
                    $("table.serviceDetailsTable tbody").append(newRow);
                }
                $('.deleteSwmming').click(function(){
                    $(this).closest('tr').remove();
                    var sum = 0;
                    var showcaseTable = $('table .serviceDetailsTable').closest("tr");
                    $.each(showcaseTable,function(e){
                        sum += parseFloat($(this).find('#service_total_table').text()); 
                    });
                    $('#sub_total').val(sum.toFixed(2));
                    $('#grand_total').val(sum.toFixed(2));
                    $('#due_amount').val(sum.toFixed(2));
                    
                    $('#discount').val(0);
                    $('#paid_amount').val(0);
                    $('#change_amount').val(0);
                    // $('#due_amount').val(0);
                });
            }else{
                alert('Please checkout the form');
            }
        });
        $('.deleteSwmming').click(function(){
            $(this).closest('tr').remove();
            var sum = 0;
            var showcaseTable = $('table .serviceDetailsTable').closest("tr");
            $.each(showcaseTable,function(e){
                sum += parseFloat($(this).find('#service_total_table').text()); 
            });
            $('#sub_total').val(sum.toFixed(2));
            $('#grand_total').val(sum.toFixed(2));
            $('#due_amount').val(sum.toFixed(2));
            
            $('#discount').val(0);
            $('#paid_amount').val(0);
            $('#change_amount').val(0);
            // $('#due_amount').val(0);
        });
        $('#discount').keyup(function(){ 
            var subTotal = parseFloat($('#sub_total').val());
            var discount = subTotal - parseFloat($(this).val());
            
            $('#grand_total').val(discount.toFixed(2));
            $('#due_amount').val(discount.toFixed(2));
        });
        $('#paid_amount').keyup(function(){
            var grand_total = parseFloat($('#grand_total').val());
            var due_amount = grand_total - parseFloat($(this).val());
            if(due_amount >=0){
                $('#due_amount').val(due_amount.toFixed(2));
                $('#change_amount').val((due_amount.toFixed(2)));
            }else{
                $('#due_amount').val(0);
                $('#change_amount').val(-(due_amount.toFixed(2)));
            }
     
        });
        $('#submitFormBtn').click(function(){
            var membership_id = $('#membership_id').val();
            var member_name = $('#member_name').val();
            var guest_name = $('#guest_name').val();
            var phone_no = $('#phone_no').val();
            var sum = 0;
            var showcaseTable = $('table .serviceDetailsTable').closest("tr");
            $.each(showcaseTable,function(e){
                sum += parseFloat($(this).find('#service_total_table').text()); 
            }); 
            var tableRowCount =  $('.serviceDetailsTable tbody tr').length;
            console.log(tableRowCount);
            if(tableRowCount > 0){
                $(this).attr('type','submit');
            }else{
                alert('Please check out the table');
            }
        });
        $('.payment_method_wise_show').hide();
        $('#p_method').change(function(){
            var text = $(this).find('option:selected').text();
            if(text == 'Cash'){
                $('.payment_method_wise_show').hide();
            }else{
                $('.payment_method_wise_show').show();
            }
        });
        $('#bill_amount').on('keyup change',function(){
            $('#total').val($(this).val());
        });
    });
    function totalCalculation(){
        var qty =  $('#qty').val();
        var unit_price = $('#unit_price').val();
        var total = qty * unit_price;
        $('#service_total').val(total.toFixed(2));
    }
    function subTotalAmount(){
        var subTotal = $('#sub_total').val();
    }
    function getService(id){
        if(id){
            $.ajax({
                type: 'get',
                url: $('#mainUrlSwmiimg').val()+'/getserviceDepartmentWiseService',
                data:{
                    'id':id,
                },
                success:function(data){
                    $('select[name="swimming_service"]').empty();
                    var output = '<option value="" selected="selected">Select Service</option>';
                    var output = '';
                    if(data.length > 0){
                        $.each(data,function(i,e){
                            output += '<option value="'+e.id+'">'+e.service_name+'</option>';
                        });
                    }
                    $('select[name="swimming_service"]').append(output);
                },
                error:function(data){
                    console.log(data);
                },
            });
        }
    }
    function autoScroll(divPossion){
        $('html, body').animate({
            scrollTop: $('.'+divPossion).offset().top
        }, 1500);
    }
    function getMemberDetails(term){
        if(term != ""){
            $.ajax({
                type: 'get',
                url: $('#mainUrlSwmiimg').val()+'/getMembershipDetails',
                data:{
                    'term':term,
                },
                success:function(data){
                    console.log(data);
                    var last_array = data;
                    console.log(last_array);
                    if(last_array != 'Not Find'){
                        
                        $('#member_error_text').hide();
                        $('#membership_id').val(last_array.id);
                        $('#member_name').val(last_array.label);

                        $('#member_phone').val(last_array.phone);
                        $('#member_status').val(last_array.status);

                        $('#show_membership_id').text(last_array.id);
                        $('#show_member_name').text(last_array.label);

                        $('#show_member_phone').text(last_array.phone);
                        $('#show_member_status').text(last_array.status);

                        $('#show_subscription_type').text(last_array.monthly_sub_type);
                        $('#member-photo-container').html(last_array.photo);
                    }else{
                        $('#member_error_text').show();
                        $('#membership_id').val('');
                        $('#member_name').val('');

                        $('#member_phone').val('');
                        $('#member_status').val('');

                        $('#show_membership_id').text('');
                        $('#show_member_name').text('');

                        $('#show_member_phone').text('');
                        $('#show_member_status').text('');
                        $('#show_subscription_type').text('');
                        $('#member-photo-container').html('');
                    }
                },
                error:function(data){
                    console.log(data);
                },
            });
        }else{
            $('#member_error_text').show();
            $('#membership_id').val('');
            $('#member_name').val('');

            $('#show_membership_id').text('');
            $('#show_member_name').text('');
            $('#member-photo-container').html('');
        }
    }
</script>

@endsection