@extends('frontend.layouts.app')
@php
    $company_info = session('company_info');
@endphp

@section('style')

    <style>
        .active{
            background: #9edcff !important;
        }
    </style>

@endsection

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="titlepage text_align_center">
                    <h2>Booked</h2>
                </div>
            </div>
            <div class="col-md-12">
                @if ($sport_booking->count() > 0)
                    <div class="row">
                        <div class="col-md-4" style="max-height: 400px;overflow: auto;border: 1px solid;padding: 10px;">
                            <ul>
                                @foreach ($sport_booking as $book)
                                    <li>
                                        <button type="button" id="id{{$book->id}}" class="book_ac_a"
                                            style="background: ghostwhite; padding:5px; border-radius:5px; margin: 1px 0px; width:100%; text-align: left;"
                                            onclick="book_details('id{{$book->id}}','{{$book->id}}')">
                                            {{$book->game?->name}}
                                            {{$book->book_no}}
                                            @if ($book->transactionStatus)
                                                <span class="{{$book->transactionStatus->icon}}">{{ $book->transactionStatus->name }}</span>
                                            @endif
                                            @if($book->dueAmount() < 0)
                                                <span class="badge badge-danger">{{ abs($book->dueAmount()) }}</span>
                                            @elseif($book->dueAmount() == 0)
                                                <span class="badge badge-success">None</span>
                                            @else
                                                <span class="badge badge-info">{{ abs($book->dueAmount()) }}</span>
                                            @endif
                                        </button>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="col-md-8" style="max-height: 400px; overflow: auto; border: 1px solid;padding: 10px;">
                            <div class="booked_details">
                                <h1 class="text-center">Select Any One</h1>
                            </div>
                        </div>
                    </div>
                @else
                    <h1 class="text-center">You haven't booked yet.</h1>
                @endif
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        function book_details(eid,id) {
            $('.book_ac_a').removeClass('active');
            $('#'+eid).addClass('active');
            $('.booked_details').html('');
            var data = {
                id: id,
                token: "{{ csrf_token() }}"
            };
            $.get(`{{ route('player-booked') }}`, data,
                function (res) {
                    if(res.status == 'success'){
                        $('.booked_details').html(res.html);
                        // toastr.success(res.message);
                    } else {
                        toastr.error(res.message);
                    }
                }
            );
        }
    </script>
@endsection