@extends("admin.layout.master")
@section("title","Dashboard")
@section ("content")
<div class="d-flex flex-column flex-column-fluid">
    <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
        <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
            <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">

                    <li class="breadcrumb-item text-muted">
                        <a href="{{route('gymnast_event-list')}}"
                            class="text-muted text-hover-primary">{{$event->name}}</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div id="kt_app_content_container" class="app-container container-xxl">
        <div class="card mb-5 mb-xl-8">
            <div class="card-header flex-wrap border-0 pt-6 pb-0">
                <div style="border-style: dashed; border-color: var(--kt-success) !important; display: none;"
                    class="alert alert-dismissible bg-light-success d-flex flex-column flex-sm-row mb-0">
                    <i class="bi bi-info-circle text-success me-4 mb-5 mb-sm-0" style="font-size: 20px;"><span
                            class="path1"></span><span class="path2"></span><span class="path3"></span></i>
                    <!--end::Icon-->
                    <div class="d-flex flex-column pe-0 pe-sm-10">
                        <span>Create Teams: Click this button to automatically form teams for clubs with upto 6 participants(min 3) , based on their age division and level.
                        </span>
                    </div>
                </div>
            </div>
            <div class="card-header mb-4">
                <h3 class="card-title align-items-start flex-column">
                    <span class="card-label fw-bold fs-3">Team</span>
                </h3>
                <div class="card-toolbar">
                <a href="{{route('formteam', ['id' => $event->id])}}" class="btn btn-sm btn-primary me-1">
                        Create Teams(3-6 participants)</a> 
                        <a href="{{route('teamlist', ['id' => $event->id])}}" class="btn btn-sm btn-danger me-1">
                            View Teams</a> 
                    <a href="{{route('teammemberlist', ['id' => $event->id])}}" class="btn btn-sm btn-danger me-1">
                        View Team members</a>                       
                </div>
            </div>
            <div class="card-body pt-0">
                <form class="form" action="{{$searchaction}}" method="POST">
                    @csrf
                        <div class="form-group row mb-2">
                        <input type="hidden" name="eventid" value="{{$event->id}}" />
                        <div class="col-sm-3">
                            <select id="category" name="category[]" class="form-select form-select-solid" data-control="select2" data-close-on-select="false" data-placeholder="Select National Grade" data-allow-clear="true" multiple="multiple">
                                <option value="">National Grade</option>
                                <option value="National 4">National 4</option>
                                <option value="National 5">National 5</option>
                                <option value="National 6">National 6</option>
                                <option value="National 7">National 7</option>
                            </select>
                        </div>
                        <div class="col-sm-2">
                            <select id="level" name="level[]" class="form-select form-select-solid" data-control="select2" data-close-on-select="false" data-placeholder="Select Level" data-allow-clear="true" multiple="multiple">
                                <option value="">Level</option>                               
                                @foreach ($levels as $level)
                                    <option value="{{ $level }}">{{ $level }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-sm-2">
                            <select class="form-control" id="gender" name="gender">
                                <option value="M">M</option>
                                <option value="F">F</option>
                            </select>
                        </div>
                        <div class="col-lg-2">
                            <button type="submit" name="Search" value="Search" class="btn btn-info mr-2">Search</button>
                        </div>
                        <div class="col-lg-2">
                        <a href="" class="btn btn-light mr-2">Reset</a>
                        </div>
                    </div>
                    </form>
                    <form class="form" action="{{$action}}" method="POST" id="divisionfrm">
                    @csrf
                    <div class="form-group row">
                        <input type="hidden" name="eventid" value="{{$event->id}}" />
                        <label for="day" class="col-sm-1 control-label"><b>Team Name:</b></label>
                        <div class="col-sm-6">
                            <input id="teamname" type="text" class="form-control" name="teamname" maxlength="30"
                                minlength="1" value="" required>
                            <span class="error" id="teamname_error"></span>
                            @if($errors->has("teamname"))
                            <span class="text-danger">{{$errors->first("teamnamename")}}</span>
                            @endif
                        </div>
                        <div class="col-lg-2">
                            <button type="submit" name="Create" value="Create" class="btn btn-success mr-2">Create</button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-10 ml-lg-auto">
                            <table class="table table-row-dashed align-middle gs-0 gy-4" id="ds_datatable_table">
                                <thead>
                                    <tr class="fw-bold">

                                        <th class="min-w-150px">Gymnast</th>
                                        <th class="min-w-150px">Club</th>
                                        <th class="min-w-100px">National Grade</th>
                                        <th class="min-w-100px">Level</th>
                                        <th>Select</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($result as $index => $row)
                                    <tr>
                                        <td>{{ $row ->gymnast }}</td>
                                        <td>{{ $row ->club }}</td>
                                        <td>{{ $row ->category }}</td>
                                        <td>{{ $row ->level }}</td>
                                        <td><input type="radio" name="clubs[{{ $index }}][selected]" value="A_{{$row->id}}" /></td>
                                        <input type="hidden" name="clubs[{{ $index }}][clubid]" value="{{ $row->clubid }}">
                                        <input type="hidden" name="clubs[{{ $index }}][category]" value="{{ $row->category }}">
                                        <input type="hidden" name="clubs[{{ $index }}][level]" value="{{ $row->level }}">
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @endsection
    @push("js")
    <script>
    $(document).ready(function() {
        
        $("#ds_datatable_table").DataTable({
           
            dom: "<'row'<'col-sm-3 float-start'f><'col-sm-3'><'col-sm-3'><'col-sm-3 float-end'>><'row'<'col-sm-12'tr>><'row'<'col-sm-12 col-md-1'l><'col-sm-12 col-md-5'i><'col-sm-12 col-md-6'p>>",
            info: 1,
            order: [],
            pageLength: 100,
            lengthChange: 1,
            
        });
        // Store all selected values across pagination
        var selectedValues = {};
        // When a radio button is selected, store its value
        $(document).on('change', 'input[type=radio]', function() {
            var name = $(this).attr('name');
            selectedValues[name] = $(this).val();
            
            // Also store other relevant hidden values like clubid, category, and level if they exist
            var rowIndex = name.match(/\d+/)[0]; // Extract the row index from the name attribute
            
            // Store additional club data
            selectedValues[`clubs[${rowIndex}][clubid]`] = $(`input[name="clubs[${rowIndex}][clubid]"]`).val();
            selectedValues[`clubs[${rowIndex}][category]`] = $(`input[name="clubs[${rowIndex}][category]"]`).val();
            selectedValues[`clubs[${rowIndex}][level]`] = $(`input[name="clubs[${rowIndex}][level]"]`).val();
        });

        // Before submitting the form, append hidden inputs for all selected radio buttons and their corresponding data
        $('form').on('submit', function(e) {
            for (var name in selectedValues) {
                if (selectedValues.hasOwnProperty(name)) {
                    $('<input />').attr('type', 'hidden')
                                .attr('name', name)
                                .attr('value', selectedValues[name])
                                .appendTo('form');
                }
            }
        });
    });
    </script>

    @endpush