@extends('staff::layouts.default')
@section('title',trans('admin_default.league_group'))

@section('breadcrumb')
    <li class="active"><a href="#">{{trans('admin_default.league_group')}}</a></li>
@endsection

@section('style')
    <style>
        .page-content {
            display: block !important;
        }
    </style>
@endsection

@section('content')
    <div class="content-wrapper">
        <div class="panel panel-white border-top-success">
            <div class="panel-heading">
                <h5 class="panel-title text-bold">
                    <i class="icon-calendar position-left"></i>
                    {{trans('admin_default.league_group')}}
                </h5>
            </div>
            <div class="panel-body">
                <a href="javascript:void(0);"
                   data-toggle="modal"
                   data-target="#league-group"
                   class="btn btn-primary">
                    <i class="icon-plus2 position-left"></i>
                    {{ trans('admin_default.add_league_group') }}
                </a>
                <div>
                    <table class="table table-xlg">
                        <thead>
                            <tr>
                                <th width="50">#</th>
                                <th>League Name</th>
                                <th width="400"></th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $i = 1;
                            @endphp
                            @foreach($league_groups as $league_group)
                                <tr>
                                    <td>{{ $i++ }}</td>
                                    <td>
                                        <a href="{{ route('league.group.show',$league_group->id) }}">
                                            {{$league_group->name}}
                                        </a>
                                    </td>
                                    <td class="text-right">
                                        <ul class="icons-list">
                                            <li class="dropdown">
                                                <a href="javascript:void(0)" class="dropdown-toggle"
                                                   data-toggle="dropdown">
                                                    <i class="icon-menu9"></i>
                                                </a>
                                                <ul class="dropdown-menu dropdown-menu-right">
                                                    <li>
                                                        <a href="#"
                                                           data-toggle="modal"
                                                           data-target="#league-group"
                                                           data-url="{{ route('league.group.update',$league_group->id) }}"
                                                           data-name="{{$league_group->name}}"
                                                           class="btn-edit-league-table">
                                                            <i class="icon-pencil7"></i> {{trans('admin_default.edit')}}
                                                        </a>
                                                        <a href="#"
                                                           data-toggle="modal"
                                                           data-target="#confirm-modal"
                                                           data-msg="{{ trans('admin_default.are_you_sure_you_want_to_delete') }}"
                                                           data-url="{{ route('league.group.destroy',$league_group->id) }}"
                                                           class="btn-delete">
                                                            <i class="icon-trash"></i> {{trans('admin_default.delete')}}
                                                        </a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </td>
                                </tr>
                            @endforeach

                            @if($league_groups->isEmpty())
                                <tr>
                                    <td>{{trans('admin_default.empty')}}</td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div id="league-group" class="modal fade">
        <form
                class="form-horizontal"
                method="POST"
                id="form-add"
                action="">
            {{csrf_field()}}
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="col-sm-12">
                            <fieldset class="content-group">
                                <legend class="text-semibold">
                                    <i class="icon-add"></i>
                                    {{ trans('admin_default.add_group') }}
                                </legend>
                                <div class="form-group">
                                    <label for="name" class="control-label">
                                        {{trans('admin_default.name')}}
                                    </label>
                                    <input type="text" name="name" class="form-control" id="name">
                                </div>
                            </fieldset>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-link"
                                data-dismiss="modal">{{trans('admin_default.close')}}</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="icon-floppy-disk position-left"></i> {{trans('admin_default.save')}}
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <form id="form-delete" action="" method="POST" style="display: none;">
        {!! csrf_field() !!}
    </form>

@endsection

@section('script')
    @parent

    <script>
        let league = $("#league-group");
        league.on('show.bs.modal', function ($event) {
            const btn = $($event.relatedTarget);

            const url = btn.data('url');

            const form = $(this).children('form');

            if (typeof url === "undefined") {
                $(form).attr('action', `{{ route('league.group.store') }}`);
            } else {
                form.attr('action', url);
                $(this).find('#name').val(btn.data('name'));
            }

        });

        league.on('hide.bs.modal', function ($event) {
            const form = $(this).children('form');
            $(form).attr('action', null);
        });

        $("#confirm-modal").on('show.bs.modal', function ($event) {
            const btn = $($event.relatedTarget);

            $(this).find('#msg').text(btn.data('msg') + "?");
            $("#form-delete").attr('action', btn.data('url'));
        });

        $("#yes-confirm").on('click', function () {
            $("#form-delete").submit();
        });

    </script>
@endsection