@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">

                </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">
                    </li>
                </ol>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title"></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">
                <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">List</h3>
                    <div class="btn-group">
                    </div>
                </div>
                <div class="card-body">		
                    <table class="table table-striped table-bordered" id="">
                        <thead>
                            <!-- <tr>
                                <th>Sl</th>
                                <th>Start Tee</th>
                                <th>Tee Off Time</th>
                                <th>Tee Cat.</th>
                                <th>M/S No</th>
                                <th>Name Of Golfer</th>
                                <th>Remaining Slots</th>
                                <th>Register</th>
                                <th>Storing</th>
                            </tr> -->
                            <tr class="filte">
                                <th>Sl</th>
                                <th>Start Tee</th>
                                <th>Tee Off Time</th>
                                <th>Tee Cat.</th>
                                <th>M/S No</th>
                                <th>Name Of Golfer</th>
                                <th>Remaining Slots</th>
                                <th>Register</th>
                                <th>Sorting</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if(sizeof($details) >0)
                            @foreach($details as $d)
                            <tr>
                                <td>{{ ++$sl }}</td>
                                <td>{{ $model->start_tee }}</td>
                                <td>{{ $d['start'] }} - {{ $d['end'] }}</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            @endforeach
                            @endif
                        </tbody>
                    </table>			
                </div>
            </div>
        </div>	
    </div>  
</div>

@endsection

@section('modal_content')

@endsection
@section('page_script')>

<script>
   var by_defult_person = 4;
    $('document').ready(function(){
        if($('#type').val() == 'edit'){
            TeeSlotDate($('#tournament_id').val());
        }
        $('.onlyTimePicker').datetimepicker({
            format: 'LT',
            // inline: true,
            sideBySide: true,
        });
        $('#tournament_id').change(function(){
            var id = $(this).val();
            TeeSlotDate(id);
        });
        var slot_intervel = 0 , flight_intervel = 0 ;
        $('#slot_intervel').on('keyup change',function(){
            slot_intervel = $(this).val();
            flight_intervel = $('#flight_intervel').val();
            getAllowPerson(slot_intervel,flight_intervel);
        });
        $('#flight_intervel').on('keyup change',function(){
            flight_intervel = $(this).val();
            slot_intervel = $('#slot_intervel').val();
            getAllowPerson(slot_intervel,flight_intervel);
        });
    });
    function getAllowPerson(slot_intervel,flight_intervel){
        var output = (slot_intervel / flight_intervel) * by_defult_person;
        $('#allow_player').val(Math.floor(output));
    }
    function TeeSlotDate(id){
        console.log(id);
        if(id){
            $.ajax({
                type:'get',
                url: "{{ route('getTournamentSlotDate') }}",
                data:{
                    'id':id,
                },
                success:function(data){
                    if(data.length > 0){
                        $('#tee_slot_date').empty();
                        var output = '<option value="" selected="selected">Select Tee. Slot Date</option>';
                        $.each(data,function(i,e){  
                            output += '<option value="'+e+'">'+e+'</option>';
                        });
                        $('#tee_slot_date').append(output);
                    }
                    if($('#type').val() == 'edit'){
                        $('#tee_slot_date').val($('#edit_tee_slot_date').val()).change();
                    }
                },
                error:function(data){
                    console.log(data);
                },
            });
        }
    }

    $('document').ready(function(){
        var table = $('#example').DataTable({
                "bLengthChange": false,
                'ordering':false,
                initComplete: function () {
                this.api().columns([1,3,8]).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>');
                    });
                });
            }
        });        
    }); 
</script>

@endsection