@extends('backend.layouts.app')
<style>
.calculation{
    display: block ruby;
}
.form-group {
    margin-bottom: 0rem !important;
}
</style>
@section('content')

<div class="col-xl-12">
	<div class="breadcrumb-holder">
		<h5 style="text-align: center"> Yoga Registration </h5>
		    <a href="{{route('swimming-pool')}}" style="color: #000000; border: 1px solid #eee; width: 60%; margin: 15px auto; box-shadow: 0px 0px 5px 5px #9e9c9c;">
                <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"> --}}
                    Swimming Dashboard
            </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">
            <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('yoga.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="2026-06-10" 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="07:54:56" name="entry_time" readonly >
                        </div>
                    </div>
                </div>	
                <div class="row">
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Search</label>
                            <input type="text" class="form-control" value="{{ old('search') }}" name="" id="search" placeholder="Search" autocomplete="off">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Membership Id</label>
                            <input type="hidden" class="form-control" value="{{ old('membership_id') }}" name="membership_id" id="membership_id" placeholder="Membership Id" readonly>
                            <p id="show_membership_id"></p>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Member Name <span id="member_error_text" style="color:red;font-size: 8px;">(Member Not Found)</span></label>
                            <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>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Phone</label>
                            <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>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Status</label>
                            <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>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>   Subscription type</label>
                            <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>
                        </div>
                    </div>
                 
                </div>
                <div class="row" style=" margin-top: 33px; ">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Armed Forces/OC/NM/Guest</label>
                            <input type="text" class="form-control" value="{{ old('guest_name') }}" name="guest_name" id="guest_name" placeholder="Guest Name" autocomplete="off">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Phone No</label>
                            <input type="text" class="form-control" value="{{ old('phone_no') }}" name="phone_no" id="phone_no" placeholder="Phone No" autocomplete="off">
                        </div>
                    </div>
                    <div class="col-sm-3" id="member-photo-container">
                        
                    </div>
                </div>
                <div class="row" >
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Locker No</label>
                            <input type="text" class="form-control" value="" name="locker_no" id="locker_no" placeholder="Locker No">
                        </div>
                    </div>
                    <div class="col-md-2 up">
                        <div class="form-group">
                            <label>Token No</label>
                            <input type="text" class="form-control" value="" name="token_no" id="token_no" placeholder="Token No">
                        </div>
                    </div>
                </div>	
                <div class="row scrollDepartment">
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Department<span style="color:red">*</span></label>
                            <select class="form-control select2" name="s_id" style="width: 100%;" required>
                            <option value="" selected="selected">Select Department</option>
                            @if(sizeof($s_deparment) > 0)
                            @foreach($s_deparment as $s_id)
                                <option value="{{ $s_id->id }}" @if( old('s_id') == $s_id->id ) selected @endif )> {{ $s_id->department_type }} </option>
                            @endforeach
                            @endif
                            </select>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Service<span style="color:red">*</span></label>
                            <select class="form-control select2" name="swimming_service" style="width: 100%;">
                                <option value="" selected="selected">Select Service</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Trainer Name</label>
                            <select class="form-control select2" id="coach_name" style="width: 100%;" disabled>
                                <option value="" selected="selected">Select Trainer</option>
                                @if(sizeof($coachs)>0)
                                @foreach($coachs as $coach)
                                <option value="{{ $coach->id }}">{{ $coach->coach_name }}</option>
                                @endforeach
                                @endif
                            </select>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Per. Person Price<span style="color:red">*</span></label>
                            <input type="number" step="any" class="form-control" value="{{ old('guest_name') }}" name="" placeholder="Per. Person Price" id="unit_price">
                        </div>
                    </div>
                    <div class="col-md-1">
                        <div class="form-group">
                            <label>Person<span style="color:red">*</span></label>
                            <input type="number" step="any" class="form-control" value="{{ old('guest_name') }}" name="" placeholder="" id="qty">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Total</label>
                            <input type="number" step="any" class="form-control" value="{{ old('guest_name') }}" name="" placeholder="Total" id="service_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>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <table class="table table-striped table-bordered serviceDetailsTable" >
                        <thead>
                            <tr>
                                <th>S. Category</th>
                                <th>Service</th>
                                <th>Coach</th>
                                <th>Per Person Price</th>
                                <th>Person</th>
                                <th>Total</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
                <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 class="payment_method_wise_show">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Bank Name<span style="color:red">*</span></label>
                                    <select class="form-control select2" name="bank_id" style="width: 100%;" id="bank">
                                        <option value="" selected="selected">Select Bank </option>
                                        @if(sizeof($bank_list) > 0)
                                        @foreach($bank_list as $p_id)
                                        <option value="{{ $p_id->id }}" @if( old('bank_id')== $p_id->id ) selected @endif )>{{ $p_id->name }}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Check/Card No<span style="color:red">*</span></label>
                                    <input type="text" name="check_or_card_no" id="" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Check Date(For Check)<span style="color:red">*</span></label>
                                    <input type="date" name="check_date" id="" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Reference<span style="color:red">*</span></label>
                                    <input type="text" name="reference" id="" class="form-control">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <table style="float:right;">
                            <tr>
                                <td> <label>Sub-Total</label> </td>
                                <td> <input type="number" step="any" class="form-control" value="0" name="sub_total" placeholder="Sub-Total" id="sub_total" readonly> </td>
                            </tr>
                            <tr>
                                <td><label>Discount</label></td>
                                <td> <input type="number" step="any" class="form-control" value="0" name="discount" placeholder="Discount" id="discount"></td>
                            </tr>
                            <tr>
                                <td><label>Grand Total</label></td>
                                <td> <input type="number" step="any" class="form-control" value="0" name="grand_total" placeholder="Grand Total" id="grand_total" readonly></td>
                            </tr>
                            <tr>
                                <td> <label>Paid Amount</label></td>
                                <td> <input type="number" step="any" class="form-control" value="0" name="paid_amount" placeholder="Paid Amount" id="paid_amount" ></td>
                            </tr>
                            <tr>
                                <td><label>Change Amount</label></td>
                                <td><input type="number" step="any" class="form-control" value="0" name="change_amount" placeholder="Change Amount" id="change_amount" ></td>
                            </tr>
                            <tr style="display:none;">
                                <td><label>Due Amount</label></td>
                                <td><input type="number" step="any" class="form-control" value="0" name="due_amount" placeholder="Due Amount" id="due_amount" readonly></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">Submit</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(){
        $('#p_method option')
        .filter(function() { return $.trim( $(this).text() ) == 'Cash'; })
        .attr('selected',true);

        $('select[name="s_id"] option')
        .filter(function() { return $.trim( $(this).text() ) == 'Yoga'; })
        .attr('selected',true);

        getService($('select[name="s_id"]').val());

        $('#member_error_text').hide();
        $('#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();
            if(term){
                $.ajax({
                    type: 'get',
                    url: $('#mainUrlSwmiimg').val()+'/getMembershipDetails',
                    data:{
                        'term':term,
                    },
                    success:function(data){
                        console.log(data);
                        var last_array = data[data.length -1];
                        // console.log(last_array);
                        if(last_array.label != '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('');
                            $('#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('');
            }
        });
        // $('#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 service_department_id = $('select[name="s_id"]').trigger('selected').val();
            var service_department_text = $('select[name="s_id"]').find(":selected").text();
            var service_id = $('select[name="swimming_service"]').trigger('selected').val();
            var service_text =  $('select[name="swimming_service"]').find(":selected").text();
            var coach_id = $('#coach_name').val();
            var coach_name = $('#coach_name').find(":selected").text();
            var unit_price = $('#unit_price').val();
            if(coach_name == 'Select Trainer Name'){
                coach_name = 'N/A';
            }
            var qty = $('#qty').val();
            var service_total = $('#service_total').val();
            if((qty != 0) && service_department_id != ''
             && service_id != ''){
                var subTotal = parseFloat($('#sub_total').val())+parseFloat(service_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="service_department_id_arr[]" value="'+service_department_id+'">'+service_department_text+'</td>';
                        col +='<td><input type="hidden" name="service_id_arr[]" value="'+service_id+'">'+service_text+'</td>';
                        col +='<td><input type="hidden" name="coach_id_arr[]" value="'+coach_id+'">'+coach_name+'</td>';
                        col +='<td><input type="hidden" name="unit_price_arr[]" value="'+unit_price+'">'+unit_price+'</td>';
                        col +='<td><input type="hidden" name="qty_arr[]" value="'+qty+'">'+qty+'</td>';
                        col +='<td id="service_total_table"><input type="hidden" name="service_total_arr[]" value="'+service_total+'">'+service_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 service_total = $(this).closest('tr').find('#service_total_table').text();
                    // var subTotal = parseFloat($('#sub_total').val()) - parseFloat(service_total);
                    // $('#sub_total').val(subTotal.toFixed(2));
                    $(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');
            }
        });
        $('#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()); 
            }); 
            if(sum >= 0){
                if(membership_id){
                    if(member_name){
                        $(this).attr('type','submit');
                    }else{
                        alert('You must have fill up the Member Membership Id and Member Name');
                    }
                }else if(guest_name){
                    if(phone_no){
                        $(this).attr('type','submit');
                    }else{
                        alert('You must have fill up the Guest Name and Phone No');
                    }
                }
            }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();
            }
        });
    });
    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);
    }
</script>

@endsection