@extends('backend.layouts.app')
@section('content')
<div class="container-fluid">

    <div class="row">
        <div class="col-xl-12">
            <div class="breadcrumb-holder">
                <h1 class="main-title float-left">
                	Score Entry
            	</h1>
                <ol class="breadcrumb float-right">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a> </li>
                    <li class="breadcrumb-item"><a href="{{ route('tournaments') }}">Tournament</a> </li>
                    <li class="breadcrumb-item active">
                    	Score Entry
                    </li>
                </ol>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    
    <div class="row">
    	<div class="col-sm-12">
    		<div class="card">
                <div class="card-header">
                    <h3 class="card-title">Tournament Parameters</h3>
                </div>
                <div class="card-body">
                    <form method="get" action="{{route('tournaments.score-entry')}}">
                        @csrf
                        <div class="row">
                            @php                                
                                if(isset($tournaments) && $tournaments->count() > 0){
                                    $selected_tour = request()->tour?request()->tour:$tournaments->last()->id;
                                }else{
                                    $selected_tour = null;
                                }

                                if(count($slot_dates) > 0){
                                    $selected_date = request()->date?request()->date:$slot_dates[0];
                                }else{
                                    $selected_date = null;
                                }

                                if(count($flights) > 0){
                                    $selected_flight_id = request()->flight_id?request()->flight_id:$flights->first()->id;
                                }else{
                                    $selected_flight_id = null;
                                }
                            @endphp                            
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label>Tournament</label>
                                    <select class="form-control select2 tournament-select" name="tour">
                                        <option value="">Select Tournament</option>
                                        @foreach($tournaments as $tournament)
                                        <option value="{{$tournament->id}}" @if($tournament->id == $selected_tour) selected @endif>{{$tournament->tour_name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="form-group">
                                    <label>Slot Date</label>
                                    <select class="form-control select2 date-select" name="date">
                                        <option value="">Select Date</option>
                                        @foreach($slot_dates as $slot_date)
                                        <option value="{{$slot_date}}" @if($slot_date == $selected_date) selected @endif>{{$slot_date}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="form-group">
                                    <label class="control-label">Membership No</label>
                                    <input type="text" name="membership_no" class="form-control" id="membership-filter" />
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label class="control-label">Name</label>
                                    <input type="text" name="golfer_name" id="golfer_name" class="form-control" disabled="">
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="form-group">
                                    <label class="control-label">Tee Category</label>
                                    <input type="text" name="tee_category_name" id="tee_category_name" class="form-control" disabled="">
                                </div>
                            </div>          
                        </div>
                    </form>
                </div>
            </div>

            <div class="card mt-2">
                <form action="{{route('tournaments.score-entry', ['tour' => $selected_tour, 'date' => $selected_date])}}" method="post">
                    @csrf
                    @if($selected_tour)
                    <input type="hidden" name="tournament_id" value="{{ $selected_tour }}" />
                    @endif
                    <div class="card-body socre-fields" id="scoreForm">
                        
                    </div>                                      
                </form>
            </div>          
    	</div>
    </div>    
</div>
@endsection

@section('before_body_end')
<script type="text/javascript">
	$(function(){								
    	$('.year-select').on('change', function(){
            $('.tournament-select').val('');
            $('.date-select').val('');
            $('tee_select').val('');
            $('.registration_select').val('');
            $(this).closest('form').submit();
        });

        $('.tournament-select').on('change', function(){
            $('.date-select').val('');
            $('tee_select').val('');
            $('.registration_select').val('');
            $(this).closest('form').submit();
        });

        $('.date-select').on('change', function(){
            $('tee_select').val('');
            $('.registration_select').val('');
            $(this).closest('form').submit();
        });

        $('#membership-filter').on('keyup', function(){
            var data = $(this).closest('form').serialize();
            $('#golfer_name').val('');
            $('#tee_category_name').val('');
            $('#scoreForm').html('');
            $.ajax({
                url: '{{ route('tournaments.score-entry-card-ajax') }}',
                type: 'POST',
                data: data,
                dataType: 'json',
                success: function(result){
                    if(result.registration){
                        $('#golfer_name').val(result.registration.golfer_name);
                        if(result.registration.tee_category){
                            $('#tee_category_name').val(result.registration.tee_category.name);
                        }
                        $('#scoreForm').html(result.scoreForm);
                    }
                }
            });
        });

        $(document).on('change', '.hole-value, .handicap', function(){
            totalScore = 0;
            $('.hole-value').each(function(){
                totalScore += +$(this).val();
            });

            $('.total-value').val(totalScore);
            $('input[name="total_less_handicap"]').val(Math.floor(totalScore-($('input[name="handicap"]').val()/2)));
        });

        $(document).on('keyup', '.socre-fields input.focus-enable', function(e) {                              
            var inputs = $(this).closest('form').find(':input:not([readonly])');                
            if($(this).val()){
                inputs.eq(inputs.index(this)+1).focus().select();
            }           
        });                      
	});

    $(function() {
        $('.timepicker').daterangepicker({
            singleDatePicker: true,
            showDropdowns: true,
            autoUpdateInput: true,
            timePicker: true,
            // drops: "up",
            autoApply:true,
            locale: {
                format: 'hh:mm A',
                daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
                firstDay: 0
            }
        }).on('show.daterangepicker', function(ev, picker) {
             picker.container.find(".calendar-table").hide();
        });
    });
</script>
<style type="text/css">
    table th, table td {
        text-align: center;
    }
</style>
@endsection