@extends('backend.layouts.app')
<style>
    table thead tr th{
        font-size:11px;
    }
</style>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script>
    $('document').ready(function(){
        var table = $('#example1').DataTable({
                language: {
                    "lengthMenu": "Display _MENU_ Records",
                    'paginate': {
                        'previous': '<span> <i class="fa fa-arrow-circle-left" style=" font-size: 18px; " aria-hidden="true"></i></span>',
                        'next': '<span><i class="fa fa-arrow-circle-right" style=" font-size: 18px; " aria-hidden="true"></i></span>',
                    },
                },
                "lengthMenu": [[5,10,50,100,300,500, -1], [5,10,50,100,300,500, "All"]],
                'ordering':false,
                "autoWidth": false,
                initComplete: function () {
                    this.api().columns([1,3,6]).every(function () {
                        var column = this;
                        var select = $('<select class="form-control select2"><option value="">Search</option></select>')
                            .appendTo($(column.header()).empty()).on('change', function () {
                                var val = $.fn.dataTable.util.escapeRegex($(this).val());
                                column.search(val ? '^' + val + '$' : '', true, false).draw();
                            });
                        column.data().unique().sort().each(function (d, j) {
                            select.append('<option value="' + d + '">' + d + '</option>');
                        });
                    });
                },
                "infoCallback": function( settings, start, end, max, total, pre ) {
                    var api = this.api();
                    var pageInfo = api.page.info();
                    var htmlView = '<strong>Total Records: '+total+'</strong>'
                    return htmlView;
                },
        });
        // $(".filterhead").each( function ( i ) {
        //     var select = $('<select class="select2" width="100%;"><option value="">Search</option></select>')
        //     .appendTo( $(this).empty() )
        //     .on( 'change', function () {
        //        var term = $(this).val();
        //         table.column().search(term, false, false ).draw();
        //     } );
 	    //      table.column().data().unique().sort().each( function ( d, j ) {
        //           console.log(j);
        //     	select.append( '<option value="'+d+'">'+d+'</option>' )
        //     } );
		// } );
        $('.select2').select2();
    }); 
</script>

@section('content')

<div class="col-xl-12">
	<div class="breadcrumb-holder">
		<h5 style="text-align: center"> Yoga Monthly Bill Collection </h5>
		    <a href="{{route('swimming-pool')}}"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"> --}}
                    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" style=" display: inline-flex; ">
                <!-- <h3 class="card-title">New Registration </h3> -->
                <p> <b style=" font-size: 15px; "></b> </p>
                <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 style=" left: 10px; top: -7px; " href="{{ route('yoga.create') }}" class="btn btn-info"><i class="fa fa-fw fa-plus-square"></i></a> -->
                </div>
            </div>
            <div class="card-body">		
                <table class="table table-striped table-bordered" id="example1" style="100% !important">
                    <thead>
                        <tr>
                            <th>Sl</th>
                            <th>Type</th>
                            <th>Last Paid Date</th>
                            <th>Name</th>
                            <th>Reg. Fee</th>
                            <th>Last Paid Amt.</th>
                            <th>Next Payment Date</th>
                            <th>Next Charge Amt.</th>
                            <th>Action</th>
                        </tr>
                        <tr>
                            <th>Sl</th>
                            <th>Type</th>
                            <th>Last Paid Date</th>
                            <th>Name</th>
                            <th>Reg. Fee</th>
                            <th>Last Paid Amt.</th>
                            <th>Next Payment Date</th>
                            <th>Next Charge Amt.</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if(sizeof($model) > 0)
                        @foreach($model as $m)
                        <tr>
                            <td width:10px>{{ ++$sl }}</td>
                            <td>@if($m->type == 1) Member @else Guest @endif</td>
                            <td>{{ date('Y-m-d', strtotime($m->swimmingMonthlyPayment->created_at)) }}</td>
                            <td>
                                @if($m->member_name)
                                {{ $m->member_name }}
                                @else
                                {{ $m->guest_name }}
                                @endif
                            </td>
                            <td>{{ App\SwimmingMonthlyServicePayment::wheremonthly_service_reg_id($m->id)->first()->grand_total }}</td>
                            <td>{{ $m->swimmingMonthlyPayment->paid_amount }}</td>
                            <td>{{ date('Y-m-d', strtotime('+1 month', strtotime($m->swimmingMonthlyPayment->created_at))) }}</td>
                            <td>{{ App\SwimmingMonthlyServicePayment::wheremonthly_service_reg_id($m->id)->first()->grand_total + $m->swimmingMonthlyPayment->due_amount }}</td>
                            <td>
                                <div style="display: inline-flex;">
                                                                        <!-- <a title="Exit Entry" class="btn btn-success"  data-toggle="modal" data-target="#exitEntry"  
                                        data-target-id = "{{$m->id}}" data-name = "{{ $memberOrGuestName }}" data-entry_date = "{{ $m->date }}"
                                        data-entry_time = "{{ $m->entry_time }}"
                                    >
                                        <i class="fa fa-user" aria-hidden="true"></i>
                                    </a> -->
                                    <a title="Due Payment" class="btn btn-success"  data-toggle="modal" data-target="#edit"  data-target-id = "{{$m->id}}" 
                                        data-current_due = "{{ App\SwimmingMonthlyServicePayment::wheremonthly_service_reg_id($m->id)->first()->grand_total + $m->swimmingMonthlyPayment->due_amount }}"
                                    >
                                        <i class="fa fa-credit-card" aria-hidden="true"></i>
                                    </a>
                                    <!-- <a href="{{ route('swimming-registration.edit',$m->id) }}" class="btn btn-success" data-target="#edit"  
                                        data-reg = "{{ $m }}" >
                                        <i class="fa fa-fw fa-edit"></i>
                                    </a> -->
                                    <a class="btn btn-danger item-delete-btn btn-sm" href="{{route('yoga.destroy',$m->id)}}"><i class="fa fa-times"></i></a>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                        @endif
                    </tbody>
                </table>			
            </div>
        </div>			
	</div>
</div>

<input type="hidden" id="modalValue" value="{{ Session::get('modal') }}">
<div class="modal fade" id="edit">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Monthly Payment</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
            </div>
            <form id="editForm" action="#" method="post" enctype="multipart/form-data">@csrf
            @method('put')
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="box-body">
                                <div class="form-group">
                                    <label>Payment Date</label>
                                    <input type="date" class="form-control" value="2026-06-10" name="date" id="date" placeholder="Guest Name" autocomplete="off" Readonly>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="box-body">
                                <div class="form-group">
                                <label>Payment Method</label>
                                <select class="form-control select2" name="p_method" id="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( old('p_method')== $p_id->id ) selected @endif )>{{ $p_id->name }}</option>
                                    @endforeach
                                    @endif
                                </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="box-body">
                                <div class="form-group">
                                    <label>Total Amount</label>
                                    <input type="text" class="form-control" value="{{ old('current_due') }}" name="current_due" id="current_due" placeholder="Guest Name" autocomplete="off">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="box-body">
                            <div class="form-group">
                                    <label>Paid Amount</label>
                                    <input type="text" class="form-control" value="{{ old('paid_due') }}" name="paid_due" id="paid_due" placeholder="Paid Amount" autocomplete="off">
                                </div>
                            </div>
                        </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="modal-footer">
                    <button type="button" class="btn btn-danger pull-left" data-dismiss="modal">Close</button>
                    <button type="submit" id="modalSubmit" class="btn btn-success">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="exitEntry">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Exit Entry</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
            </div>
            <form id="exitTimeForm" action="#" method="post" enctype="multipart/form-data">@csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="box-body">
                                <div class="form-group">
                                    <label>Name</label>
                                    <input type="text" class="form-control" value="{{ old('name') }}" name="name" id="name" placeholder="Name" autocomplete="off" Readonly>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="box-body">
                                <div class="form-group">
                                    <label>Entry Date</label>
                                    <input type="date" class="form-control" value="{{ old('entry_date') }}" name="entry_date" id="entry_date" placeholder="Entry Date" autocomplete="off" Readonly>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="box-body">
                                <div class="form-group">
                                    <label>Entry Time</label>
                                    <input type="text" class="form-control" value="{{ old('entry_time') }}" name="entry_time" id="entry_time" placeholder="Entry Time " autocomplete="off" Readonly>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="box-body">
                            <div class="form-group">
                                    <label>Exit Date</label>
                                    <input type="date" class="form-control" value="2026-06-10" name="exit_date" id="exit_time" placeholder="Exit Time" autocomplete="off">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="box-body">
                            <div class="form-group">
                                    <label>Exit Time</label>
                                    <input type="text" class="form-control timepicker" value="07:56:35" name="exit_time" id="exit_time" placeholder="Exit Time" autocomplete="off">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger pull-left" data-dismiss="modal">Close</button>
                    <button type="submit" id="modalSubmit" class="btn btn-success">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('modal_content')

@endsection
@section('page_script')>
<script>
  $('document').ready(function(){
    var err = $('#modalValue').val();
    $('#exitEntry').modal({ 'show' : err =="exitEntry" ? true : false });
    $('#edit').modal({ 'show' : err =="edit" ? true : false });
  });
</script>
<script>
    $('document').ready(function(){
        $('.payment_method_wise_show').hide();
        $('#p_method option')
            .filter(function() { return $.trim( $(this).text() ) == 'Cash'; })
            .attr('selected',true);

        $("#edit").on("show.bs.modal", function(e) { 
            var id = $(e.relatedTarget).data('target-id');
            var current_due = $(e.relatedTarget).data('current_due');
            $('#edit .modal-body #current_due').val(current_due);
            $('#editForm').attr('action',$('#mainUrlSwmiimg').val()+'/yoga-monthlypayment/'+id);
            $('#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();
                }
            });

        });
        $("#exitEntry").on("show.bs.modal", function(e) { 
            var id = $(e.relatedTarget).data('target-id');
            var name = $(e.relatedTarget).data('name');
            var entry_time = $(e.relatedTarget).data('entry_time');
            var entry_date = $(e.relatedTarget).data('entry_date');
             console.log(entry_time);
            $('#exitEntry .modal-body #name').val(name);
            $('#exitEntry .modal-body #entry_time').val(entry_time);
            $('#exitEntry .modal-body #entry_date').val(entry_date);
            $('#exitTimeForm').attr('action',$('#mainUrlSwmiimg').val()+'/entryExitTime/'+id);
        });
        $('.timepicker').timepicker({
            zindex: 99999999,
            timeFormat: 'H:mm:ss',
            dynamic: true,
            dropdown: true,
            scrollbar: true,
            interval: 1,
            showInputs: false,
            minuteStep: 5
        });

        
       
    });
    function serviceDepartment(id){
        $.ajax({
            type: 'get',
            url: $('#mainUrlSwmiimg').val()+'/getserviceDepartmentWiseService',
            data:{
                'id':id,
            },
            success:function(data){
                $('select[name="swimming_service"]').empty();
                if(data.length > 0){
                    var output = '<option value="" selected="selected">Select Service Name</option>';
                    $.each(data,function(i,e){
                        output += '<option value="'+e.id+'">'+e.service_name+'</option>';
                    });
                    $('.modal-body select[name="swimming_service"]').html(output);
                }
            },
            error:function(data){
                console.log(data);
            },
        });
    }
    function getServiceName(id){
        $.ajax({
            type: 'get',
            url: $('#mainUrlSwmiimg').val()+'/getserviceDepartmentWiseServiceName',
            data:{
                'id':id,
            },
            success:function(data){
                localStorage.setItem('resultgetServiceName',data.service_name);
            },
            error:function(data){
                console.log(data);
            },
        });
    }
</script>

@endsection