@extends('backend.layouts.app')
<style>
.calculation{
    display: block ruby;
}

</style>
@section('content')

<div class="col-xl-12">
	<div class="breadcrumb-holder">
		<h5 style="text-align: center"> Swimming Pool Edit Registration </h5>
		    <a href="{{route('swimming-pool')}}" class="btn btn-success" style="color: #000000; border: 1px solid #eee; margin: 15px 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"> --}}
                    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="{{ url()->previous() }}" class="btn btn-info">Registered List</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('swimming-registration.update',$model->id) }}" method="post">
            @method('put')
            @csrf
                <div class="row" >
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Date <span style="color:red">*</span></label>
                            <input type="date" class="form-control" value="{{ $model->date }}" name="entry_date">
                        </div>
                    </div>
                </div>	
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Search</label>
                            <input type="text" class="form-control" value="{{ old('search') }}" name="" id="search" placeholder="Search" >
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Membership Id</label>
                            <input type="text" class="form-control" value="@if($model->membership_id != 0) {{ $model->membership_id }}  @endif" name="membership_id" id="membership_id" placeholder="Membership Id" readonly>
                        </div>
                    </div>
                    <!-- <div class="col-md-2">
                        <div class="form-group">
                            <label>Membership Id</label>
                            <input type="text" class="form-control" value="{{ old('membership_id') }}" name="membership_id" id="membership_id" placeholder="Membership Id" >
                        </div>
                    </div> -->
                    <!-- <div class="col-md-4">
                        <div class="form-group">
                            <label>Member Name <span id="member_error_text" style="color:red;font-size: 8px;">(Member Not Found)</span></label>
                            <input list="member_list_show"type="text" class="form-control" value="{{ old('member_name') }}" id="member_name" name="member_name" placeholder="Member Name"/>
                            <datalist id="member_list_show">
                                <option member_id="" value="Select Member">
                            </datalist>
                        </div>
                    </div> -->
                    <div class="col-md-4">
                        <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="text" class="form-control" value="{{ $model->member_name }}" id="member_name" name="member_name" placeholder="Member Name" readonly/>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Guest Name</label>
                            <input type="text" class="form-control" value="{{ $model->guest_name }}" name="guest_name" id="guest_name" placeholder="Guest Name" >
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Phone No</label>
                            <input type="text" class="form-control" value="{{ $model->phone_no }}" name="phone_no" id="phone_no" placeholder="Phone No" >
                        </div>
                    </div>
                </div>
                <div class="row" >
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Locker No<span style="color:red">*</span></label>
                            <input type="text" class="form-control" value="{{ $model->locker_no }}" name="locker_no" placeholder="Locker No" required>
                        </div>
                    </div>
                </div>	
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Service Department<span style="color:red">*</span></label>
                            <select class="form-control select2" name="s_id" style="width: 100%;">
                            <option value="" selected="selected">Select Category</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-3">
                        <div class="form-group">
                            <label>Service Name<span style="color:red">*</span></label>
                            <select class="form-control select2" name="swimming_service" style="width: 100%;">
                                <option value="" selected="selected">Select Service Name</option>
                            </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: 26px;">
                        <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>Per Person Price</th>
                                <th>Person</th>
                                <th>Total</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if(sizeof($model1)>0)
                            @foreach($model1 as $m)
                                <tr>
                                <td><input type="hidden" name="service_department_id_arr[]" value="{{ $m->service_department_id_arr }}">{{ $m->serviceDepartment->department_type }}</td>
                                <td><input type="hidden" name="service_id_arr[]" value="{{ $m->service_id_arr }}">{{ $m->service->service_name }}</td>
                                <td><input type="hidden" name="unit_price_arr[]" value="{{ $m->unit_price_arr }}">{{ $m->unit_price_arr }}</td>
                                <td><input type="hidden" name="qty_arr[]" value="{{ $m->qty_arr }}">{{ $m->qty_arr }}</td>
                                <td id="service_total_table"><input type="hidden" name="service_total_arr[]" value="{{ $m->service_total_arr }}">{{ $m->service_total_arr }}</td>
                                <td><a href="javascript:;" class="deleteSwmming"><i class="fa fa-trash"></i></a></td>
                                </tr>
                            @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <table style="float:right;">
                            <tr>
                                <td> <label>Sub-Total</label> </td>
                                <td> <input type="number" step="any" class="form-control" value="{{ $model3->last()->sub_total }}" 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="{{ $model3->last()->discount }}" 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="{{ $model3->last()->grand_total }}" 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="{{ $model3->sum('paid_amount') }}" 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>
                                <td><label>Due Amount</label></td>
                                <td><input type="number" step="any" class="form-control" value="{{ $model3->last()->due_amount }}" 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%;" 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( $model3->last()->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(){
        $('#member_error_text').hide();
        $('#submitForm2').hide();
        $('select[name="s_id"]').change(function(){
            var id = $(this).val();
            $.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 Name</option>';
                    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);
                },
            });
        });
        $('select[name="swimming_service"]').change(function(){
            var service_category = $('select[name="s_id"]').val();
            var service_id = $(this).val();
            var member_ship_id = $('input[name="membership_id"]').val();
            $.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);
                },
            });

        });
        // $('input[name="membership_id"]').keyup(function(){
        //     var term = $(this).val();
        //     $.ajax({
        //         type: 'get',
        //         url: $('#mainUrlSwmiimg').val()+'/getMembershipDetails',
        //         data:{
        //             'term':term,
        //         },
        //         success:function(data){
        //             console.log(data);
        //             if(data.length > 0){
        //                 $('#member_list_show option').remove();
        //                 // $('#member_list_show').empty();
        //                 var output = '';
        //                 $.each(data,function(i,e){
        //                     output += '<option member_id="'+e.id+'" value="'+e.label+'">';
        //                 });
        //                 $('#member_list_show').append(output);
        //                 $('#member_error_text').hide();
        //             }else{
        //                 $('#member_error_text').show();
        //             }
        //         },
        //         error:function(data){
        //             console.log(data);
        //         },
        //     });
        // });
        $('#search').keyup(function(){
            var term = $(this).val();
            $.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);
                        
                    }else{
                        $('#member_error_text').show();
                        $('#membership_id').val('');
                        $('#member_name').val('');
                    }
                },
                error:function(data){
                    console.log(data);
                },
            });

        });
        $('#qty').keyup(function(){
            totalCalculation();
        });
        $('#unit_price').keyup(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 unit_price = $('#unit_price').val();
            var qty = $('#qty').val();
            var service_total = $('#service_total').val();
            if((unit_price != 0) && (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="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>';
                        console.log(col);
                    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');
            }
        });
        $('.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);
        });
        $('#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 = 1;
            var showcaseTable = $('table .serviceDetailsTable tbody').closest("tr");
            $.each(showcaseTable,function(e){
                sum += parseFloat($(this).find('#service_total_table').text()); 
            }); 
            console.log(guest_name);
            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');
            }
        });
    });
    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();
    }
</script>

@endsection