@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">
                @if($type == 'create')
                    Create Registration Slot
            	@else
                    Edit Registration Slot
                @endif
                </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">
                    @if($type == 'create')
                        Create Registration Slot
                    @else
                        Edit Registration Slot
                    @endif
                    </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">
                @if($type == "create")
                    <form id="submitForm" action="{{ route('tournaments-slots.store') }}" method="post">
                        @csrf
                        <div class="row" >
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Tournament Name<span style="color:red">*</span></label>
                                    <select class="form-control select2" name="tournament_id" style="width: 100%;" id="tournament_id" required>
                                        <option value="" selected="selected">Select Tournament Name</option>
                                        @if(sizeof($tournament) > 0)
                                        @foreach($tournament as $tour)
                                        <option value="{{ $tour->id }}" @if( old('tournament_id')== $tour->id ) selected @endif )>{{ $tour->tour_name }}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Tee. Category<span style="color:red">*</span></label>
                                    <select class="form-control select2" name="tee_category" style="width: 100%;" required>
                                        <option value="" selected="selected">Select Tournament Category</option>
                                        @if(sizeof($tee_category) > 0)
                                        @foreach($tee_category as $tee_cat)
                                        <option value="{{ $tee_cat->id }}" @if( old('tee_category')== $tee_cat->id ) selected @endif )>{{ $tee_cat->name }}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>Tee. Slot Date<span style="color:red">*</span></label>
                                    <select class="form-control select2" name="tee_slot_date" style="width: 100%;" id="tee_slot_date" required>
                                        <option value="" selected="selected">Select Tee. Slot Date</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="form-group">
                                    <label>Interval Minutes</label>
                                    <input type="text" name="interval_minutes" class="form-control @error('interval_minutes') is-invalid @enderror" />
                                    <p class="text-warning">Write in minutes please</p>
                                    @error('interval_minutes')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="form-group" style="padding-top: 28px;">
                                    <label style="control-label"><input type="checkbox" class="icheck" name="hide_online" value="1"> Hide Online</label>
                                </div>
                            </div>
                        </div>	
                        <div class="row">
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>Tee. Start Time</label>
                                    <input type="text" class="form-control js-timepicker" value="" name="tee_start_time" id="tee_start_time" placeholder="Tee. Start Time" autocomplete="off">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>Tee. End Time</label>
                                    <input type="text" class="form-control js-timepicker" value="" name="tee_end_time" id="tee_end_time" placeholder="Tee. End Time" autocomplete="off">
                                </div>
                            </div>
                            
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>Start Tee.</label>
                                    <select class="form-control select2" name="start_tee" style="width: 100%;" required>
                                        <option value="" selected="selected">Select Start Tee.</option>
                                        <option value="1">1<option>
                                        <option value="10">10<option>
                                    </select>
                                </div>
                            </div>                        
                            <div class="col-sm-2">
                                <div class="form-group">
                                    <label>Reserved Time Start</label>
                                    <input type="text" name="reserved_time_start" class="form-control js-timepicker @error('reserved_time_start') is-invalid @enderror" />
                                    @error('reserved_time_start')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="form-group">
                                    <label>Reserved Time End</label>
                                    <input type="text" name="reserved_time_end" class="form-control js-timepicker @error('reserved_time_end') is-invalid @enderror" />
                                    @error('reserved_time_end')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="form-group">
                                    <label>Slot Duration</label>
                                    <input type="text" name="flight_duration" class="form-control @error('flight_duration') is-invalid @enderror" />
                                    <p class="text-warning">Write in minutes please</p>
                                    @error('flight_duration')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>                            
                        </div>       
                        <div class="card-footer">
                            <button class="btn btn-success float-right" type="submit">Submit</button>
                        </div>	
                    </form>
                @else
                    <form id="submitForm" action="{{ route('tournaments-slots.update',$editData->id) }}" method="post">
                        @csrf
                        @method('put')
                        <div class="row" >
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Tournament Name<span style="color:red">*</span></label>
                                    <select class="form-control select2" name="tournament_id" style="width: 100%;" id="tournament_id" required>
                                        <option value="" selected="selected">Select Tournament Name</option>
                                        @if(sizeof($tournament) > 0)
                                        @foreach($tournament as $tour)
                                        <option value="{{ $tour->id }}" @if( $editData->tournament_id == $tour->id ) selected @endif )>{{ $tour->tour_name }}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Tee. Category<span style="color:red">*</span></label>
                                    <select class="form-control select2" name="tee_category" style="width: 100%;" required>
                                        <option value="" selected="selected">Select Tournament Category</option>
                                        @if(sizeof($tee_category) > 0)
                                        @foreach($tee_category as $tee_cat)
                                        <option value="{{ $tee_cat->id }}" @if( $editData->tee_category == $tee_cat->id ) selected @endif )>{{ $tee_cat->name }}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <input type="hidden" id="edit_tee_slot_date" value="{{ $editData->tee_slot_date }}">
                                    <label>Tee. Slot Date<span style="color:red">*</span></label>
                                    <select class="form-control select2" name="tee_slot_date" style="width: 100%;" id="tee_slot_date" required>
                                        <option value="" selected="selected">Select Tee. Slot Date</option>
                                    </select>
                                </div>
                            </div>
                        </div>	
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Tee. Start Time</label>
                                    <input type="text" class="form-control js-timepicker" value="{{ $editData->tee_start_time }}" name="tee_start_time" id="tee_start_time" placeholder="Tee. Start Time" autocomplete="off">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Tee. End Time</label>
                                    <input type="text" class="form-control js-timepicker" value="{{ $editData->tee_end_time }}" name="tee_end_time" id="tee_end_time" placeholder="Tee. End Time" autocomplete="off">
                                </div>
                            </div>                      
                            
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Start Tee.</label>
                                    <select class="form-control select2" name="start_tee" style="width: 100%;" required>
                                        <option value="" selected="selected">Select Start Tee.</option>
                                        <option value="1" @if($editData->start_tee == 1) selected @endif> 1<option>
                                        <option value="10" @if($editData->start_tee == 10) selected @endif> 10<option>
                                    </select>
                                </div>
                            </div>
                        </div>            
                        <div class="card-footer">
                            <button class="btn btn-success float-right" type="submit">Update</button>
                        </div>	
                    </form>
                @endif
                </div>
            </div>
        </div>	
    </div>
    <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="example">
                        <thead>
                            <tr>
                                <th>Sl</th>
                                <th>Tournament Name</th>
                                <th>Tee Slot Date</th>
                                <th>Tee Cat.</th>
                                <th>Tee Start Time</th>
                                <th>Tee End Time</th>
                                <th>Reserved Form</th>
                                <th>Reserved to</th>
                                <th>Created By</th>
                                <th>Action</th>
                            </tr>
                            <tr class="filte">
                                <th>Sl</th>
                                <th>Tournament Name</th>
                                <th>Tee Slot Date</th>
                                <th>Tee Cat.</th>
                                <th>Tee Start Time</th>
                                <th>Tee End Time</th>
                                <th>Reserved Form</th>
                                <th>Reserved to</th>
                                <th>Created By</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if(sizeof($model) > 0)
                            @foreach($model as $m)
                                <tr>
                                    <td>{{ ++$sl }}</td>
                                    <td>{{ $m->tournament->tour_name }}</td>
                                    <td>{{ $m->tee_slot_date }}</td>
                                    <td>{{ $m->category->name }}</td>
                                    <td>{{ $m->tee_start_time }}</td>
                                    <td>{{ $m->tee_end_time }}</td>
                                    <td>{{ $m->reserved_form }}</td>
                                    <td>{{ $m->reserved_to }}</td>
                                    <td>{{ $m->user->username }}</td>
                                    <td class="text-center">
                                        <form method="post" action="{{ route('tournaments-slots.destroy', $m->id) }}">
                                            @method('DELETE')
                                            @csrf
                                            <button class="btn btn-danger btn-sm" type="submit" onclick="if (!confirm('Are you sure?')) { return false }"><i class="fa fa-remove"></i></a>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                            @endif
                        </tbody>
                    </table>			
                </div>
            </div>
        </div>	
    </div>  
</div>
<input type="hidden" id="type" value="{{ $type }}">
@endsection

@section('modal_content')

@endsection
@section('page_script')>

<script>
     $('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>');
                    });
                });
            }
        });        
        $('.select2').select2();
    }); 

   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);
                },
            });
        }
    }
</script>

@endsection