@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 mb-4">
                <h3 class="card-title align-items-start flex-column">
                    <span class="card-label fw-bold fs-3">{{$sessions[0]->session}} : Rotations</span>
                </h3>
                <div class="card-toolbar">
                    <a target="_blank" href="{{route('grouplist', ['id' => $event->id])}}" class="btn btn-sm btn-danger me-1">
                        All Rotations</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}}" />
                        <input type="hidden" name="event_session_id" value="{{$sessions[0]->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="{{ route('rotationadd', ['id' => $event->id,'sessionid'=>$sessions[0]->id]) }}" 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}}" />
                        <input type="hidden" name="event_session_id" value="{{$sessions[0]->id}}" />
                        <label for="day" class="col-sm-1 control-label"><b>Rotation Name:</b></label>
                        <div class="col-sm-6">
                            <input id="divisionname" type="text" class="form-control" name="divisionname" maxlength="30"
                                minlength="1" value="" required>
                            <span class="error" id="divisionname_error"></span>
                            @if($errors->has("divisionname"))
                            <span class="text-danger">{{$errors->first("divisionname")}}</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>A</th>
                                        <th>B</th>
                                        <th>C</th>
                                        <th>D</th>
                                        @if($event->gender != 'F')
                                        <th>E</th>
                                        <th>F</th>
                                        @endif
                                    </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>
                                        <td><input type="radio" name="clubs[{{ $index }}][selected]" value="B_{{$row->id}}" /></td>
                                        <td><input type="radio" name="clubs[{{ $index }}][selected]" value="C_{{$row->id}}" /></td>
                                        <td><input type="radio" name="clubs[{{ $index }}][selected]" value="D_{{$row->id}}" /></td>
                                        @if($event->gender != 'F')
                                        <td><input type="radio" name="clubs[{{ $index }}][selected]" value="E_{{$row->id}}" /></td>
                                        <td><input type="radio" name="clubs[{{ $index }}][selected]" value="F_{{$row->id}}" /></td>
                                        @endif
                                        <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,
            columnDefs: [{
                    orderable: !1,
                    targets: 4,
                },
                {
                    orderable: !1,
                    targets: 5,
                },
                {
                    orderable: !1,
                    targets: 6,
                },
            ],
        });
        // 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