@extends('admin.layouts.main')
@section('title',"Danh sách Rank")

@section('css')
<link rel="stylesheet" href="{{asset('lib/sweetalert2/css/sweetalert2.min.css')}}">
@endsection

@section('content')
<div class="content-wrapper">

    @include('admin.partials.content-header',['name'=>"Rank","key"=>"Danh sách Rank"])

    <div class="content">
        <div class="container-fluid">
            <div class="row">
                {{-- Danh sách rank --}}
                <div class="col-md-6" id="left-col">
                    <button type="button" class="btn btn-primary mb-3" id="btn-show-form">
                        + Thêm rank
                    </button>
                    <div class="card card-outline card-primary">
                        <div class="card-tools text-right pl-3 pr-3 pt-2 pb-2">
                            <div class="count">Tổng số bản ghi <strong>{{ $data->count() }}</strong></div>
                        </div>
                        <div class="card-body table-responsive p-0 lb-list-category">
                            <table class="table table-head-fixed" style="font-size: 13px;">
                                <thead>
                                    <tr>
                                        <th>STT</th>
                                        <th>Rank</th>
                                        <th>Yêu cầu</th>
                                        {{--<th>Số thứ tự</th>--}}
                                        <th>Thao tác</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($data as $key=>$rank)
                                    <tr>
                                        <td>{{$key + 1}}</td>
                                        <td @if($rank->id == 1) style="color:red;" @endif>{{$rank->name}}</td>
                                        <td @if($rank->id == 1) style="color:red;" @endif>{{number_format($rank->total)}} Vnđ</td>
                                        {{--<td>{{$rank->order}}</td>--}}
                                        <td>
                                            <a href="javascript:;"
                                                class="btn btn-sm btn-info btn-edit-rank tooltip11"
                                                data-url="{{ route('admin.rank.edit', ['id' => $rank->id]) }}">
                                                <i class="fas fa-edit"></i><span class="tooltiptext">Sửa</span>
                                            </a>
                                        {{--<a data-url="{{route('admin.rank.destroy',['id'=>$rank->id])}}"
                                            class="btn btn-sm btn-danger lb_delete tooltip11">
                                            <i class="far fa-trash-alt"></i><span class="tooltiptext">Xóa</span>
                                            </a>--}}
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 d-none" id="right-form" style="margin-top: 45px;">
                    <div class="card card-outline card-success">
                        <div class="card-header">
                            <h3 class="card-title">Thêm rank</h3>
                            <button type="button" class="close" id="btn-close-form">&times;</button>
                        </div>
                        <div class="card-body">
                            <form id="rank-form" action="{{route('admin.rank.store')}}" method="POST" data-type="create">
                                @csrf
                                <input type="hidden" name="id" id="rank_id">

                                <div class="form-group">
                                    <label for="rank_name">Rank</label>
                                    <input type="text" class="form-control" name="name" id="rank_name" placeholder="Nhập tên rank" required>
                                </div>
                                <div class="form-group">
                                    <label for="rank_total">Yêu cầu</label>
                                    <input type="number" class="form-control" name="total" id="rank_total" placeholder="Vnđ" required>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <label class="col-sm-12 control-label" for="">Nhập quyền lợi</label>
                                        <div class="col-sm-12">
                                            <textarea class="form-control" name="description" id="description" rows="3" placeholder="Nhập quyền lợi">{{ old('description') }}</textarea>
                                            @error('description')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                {{--<div class="form-group">
                                    <label for="rank_order">Số thứ tự</label>
                                    <input type="text" class="form-control" placeholder="Số thứ tự" name="order" id="rank_order">
                                </div>--}}
                                <button type="submit" class="btn btn-success" id="btn-submit-rank">Thêm mới</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
@endsection

@section('js')
<script>
    $(document).ready(function() {
        CKEDITOR.replace('description');

        $('#btn-show-form').click(function() {
            $('#rank-form').attr('action', '{{ route("admin.rank.store") }}');
            $('#rank-form').attr('data-type', 'create');
            $('#rank-form')[0].reset();
            $('#rank_id').val('');
            $('#btn-submit-rank').text('Thêm mới');
            $('.card-title').text('Thêm rank');
            $('#right-form').removeClass('d-none');

            CKEDITOR.instances.description.setData('');
        });

        $('#btn-close-form').click(function() {
            $('#right-form').addClass('d-none');
        });

        $(document).on('click', '.btn-edit-rank', function() {
            let url = $(this).data('url');

            $.ajax({
                url: url,
                method: 'GET',
                success: function(res) {
                    if (res.code === 200) {
                        let rank = res.data;
                        $('#rank_id').val(rank.id);
                        $('#rank_name').val(rank.name);
                        $('#rank_total').val(rank.total);

                        let updateUrl = '{{ route("admin.rank.update", ["id" => ":id"]) }}';
                        updateUrl = updateUrl.replace(':id', rank.id);
                        $('#rank-form').attr('action', updateUrl);
                        $('#rank-form').attr('data-type', 'edit');
                        $('#btn-submit-rank').text('Cập nhật');
                        $('.card-title').text('Cập nhật rank');
                        $('#right-form').removeClass('d-none');

                        // Gán dữ liệu vào CKEditor
                        CKEDITOR.instances.description.setData(rank.description ?? '');
                    }
                }
            });
        });
    });
</script>
@endsection