@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">
                	Registration Slots
            	</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">
                    	Registration Slots
                    </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">
                    @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;
                        }
                    @endphp
                    <form method="get" action="{{route('tournaments.tee-slots')}}">
                        <div class="row justify-content-center">                                                        
                            <div class="col-sm-4">
                                <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-3">
                                <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>
                    </form>
                </div>
            </div>
            <br />
            @if($selected_tour && $selected_date)
            <form method="post" action="">
                @if(isset($editData) && !empty($editData))
                    @method('PUT')
                    <input type="hidden" name="slot_id" value="{{$editData->id}}" />                
                @endif
                @csrf
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">@if(isset($editData) && !empty($editData)) Update Tee Slot @else New Tee Slot @endif</h3>
                        <input type="hidden" name="tour" value="{{ $selected_tour }}" />                        
                        <input type="hidden" name="date" value="{{ $selected_date }}" />                        
                    </div>
                    <div class="card-body">
                        <div class="row justify-content-center">
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label>Tee Category</label>
                                    <select class="form-control select2 tee-category-select" name="tee_category" required="">
                                        <option value="">Select Tee Category</option>
                                        @foreach($tee_categories as $tee_category)
                                        <option value="{{$tee_category->id}}" {{isset($editData) && !empty($editData) && $editData->tee_category == $tee_category->id?'selected':''}}>{{$tee_category->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>                            
                            <div class="col-sm-2">
                                <div class="form-group">
                                    <label>Start</label>
                                    <input type="text" name="slot_start" value="{{isset($editData) && !empty($editData)?date('g:i A', strtotime($editData->slot_start)):''}}" class="form-control timepicker" required="" />
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="form-group">
                                    <label>End</label>
                                    <input type="text" name="slot_end" value="{{isset($editData) && !empty($editData)?date('g:i A', strtotime($editData->slot_end)):''}}" class="form-control timepicker" required="" />
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="form-group">
                                    <label>Allow Player</label>
                                    <input type="number" value="{{isset($editData) && !empty($editData)?$editData->slot_player_allow:''}}" name="slot_player_allow" class="form-control" required="" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer text-right">
                        <button type="submit" class="btn btn-primary">@if(isset($editData) && !empty($editData)) Update @else Add @endif</button>
                    </div>
                </div>                
            </form>
            <br />
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Slot for the Date {{request()->date}}</h3>
                </div>
                <div class="card-body">
                    <table class="table table-sm table-bordered">
                        <thead>
                            <tr>
                                <th class="text-center">Slot No</th>
                                <th class="text-center">Tee Type</th>                                
                                <th class="text-center">Start Time</th>
                                <th class="text-center">End Time</th>
                                <th class="text-center">Allow Player</th>
                                <th class="text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($tournament_tee_slots as  $slot)
                            <tr>
                                <td class="text-center">{{$loop->index + 1}}</td>
                                <td class="text-center">{{$slot->category->name}}</td>                                
                                <td class="text-center">{{date('g:i A', strtotime($slot->slot_start))}}</td>
                                <td class="text-center">{{date('g:i A', strtotime($slot->slot_end))}}</td>
                                <td class="text-center">{{$slot->slot_player_allow}}</td>
                                <td class="text-center">
                                    <a href="{{ route('tournaments.tee-slots', $slot->id) }}" class="btn btn-info btn-sm"><i class="fa fa-edit"></i></a>
                                    <a href="#" class="btn btn-danger btn-sm tee-slot-remove-btn"><i class="fa fa-remove"></i></a>
                                    <form action="{{route('tournaments.tee-slots')}}" method="post" style="display: none;">
                                        <input type="hidden" name="id" value="{{$slot->id}}">
                                        @csrf
                                        @method('DELETE')
                                    </form>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            @endif
    	</div>
    </div>   
    
</div>
@endsection
@section('page_script')
<script type="text/javascript">
	$(function(){								
	   $('.year-select').on('change', function(){
            $('.tournament-select').val('');
            $('.date-select').val('');
            $(this).closest('form').submit();
       });

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

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

        $('.tee-slot-remove-btn').on('click', function(e){
            e.preventDefault();
            if(confirm('Are you sure to remove this slot?')){
                $(this).closest('td').find('form').submit();
            }
        });
	});

    $(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>
@endsection