@extends('backend.admin.layouts.app')

@section('content')
    <style>
        .faqs_table {
            overflow: auto;
        }
    </style>
    <div class="row">
        
         <!-- Modal -->
        <div class="modal fade" id="tokenAddModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Token Add</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>

                    </div>
                    <div class="modal-body">
                        <form id="tokenCreate" action="{{ route('admin.token.create') }}" method="POST"
                            class="form-horizontal mt-2 sales-form" enctype="multipart/form-data">
                            @csrf

                            <div class="form-group">
                                <label for="status">Select Course <span
                                        style="color: red; font-weight:bold">*</span></label>
                                <select class="form-control" name="course">
                                    <option value="" selected>Select</option>
                                    @foreach ($courses as $course)
                                        <option value="{{ $course->id }}">{{ $course->name }}</option>
                                    @endforeach


                                </select>
                                <span class="text-danger error-message" id="category-error"></span>
                            </div>


                            

                            <div class="form-group">
                                <label for="name">Token title <span
                                        style="color: red; font-weight:bold">*</span></label>
                                <input name="title"  class="rounded form-control" placeholder="">
                                <span class="text-danger error-message" id="title-error"></span>
                            </div>
                            <div class="form-group">
                                <label for="name">Token Discount <span
                                        style="color: red; font-weight:bold">*</span></label>
                                <input type="number" name="discount"  class="rounded form-control" placeholder="">
                                <span class="text-danger error-message" id="title-error"></span>
                            </div>
                            <div class="form-group">
                                <label for="status">Status : </label>&nbsp;&nbsp;&nbsp;
                                &nbsp;&nbsp;&nbsp;<input type="radio" id="statusEditOne" name="status" value="1"
                                    checked>&nbsp;&nbsp;&nbsp;<label for="statusEditOne">Active</label>
                                &nbsp;&nbsp;&nbsp;<input type="radio" id="statusEditTwo" name="status"
                                    value="0">&nbsp;&nbsp;&nbsp;<label for="statusEditTwo">Inactive</label>
                                <span class="text-danger error-message" id="status-error"></span>
                            </div>


                            
                            
                           

                            




                            <button type="submit" class="btn btn-primary float-right mt-4">Update</button>
                        </form>
                    </div>

                </div>
            </div>
        </div>

        {{-- token edit modal start --}}

        <!-- Modal -->
        <div class="modal fade" id="tokenEditModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Token Edit</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>

                    </div>
                    <div class="modal-body">
                        <form id="tokenEditFrom" action="{{ route('admin.token.edit') }}" method="POST"
                            class="form-horizontal mt-2 sales-form" enctype="multipart/form-data">
                            @csrf

                            <input type="hidden" value="" id="token_id" name="token_id" />


                            <div class="form-group">
                                <label for="status">Select Course <span
                                        style="color: red; font-weight:bold">*</span></label>
                                        <select class="form-control" name="up_course" id="course">
                                    <option value="" selected>Select</option>
                                    @foreach ($courses as $course)
                                        <option value="{{ $course->id }}">{{ $course->name }}</option>
                                    @endforeach


                                </select>
                                <span class="text-danger error-message" id="category-error"></span>
                            </div>


                            

                            <div class="form-group">
                                <label for="name">Token title <span
                                        style="color: red; font-weight:bold">*</span></label>
                                <input name="title_up" id="title" class="rounded form-control" placeholder="">
                                <span class="text-danger error-message" id="title_up-error"></span>
                            </div>
                            <div class="form-group">
                                <label for="name">Token Discount <span
                                        style="color: red; font-weight:bold">*</span></label>
                                <input type="number" name="discount_update" id="discount" class="rounded form-control" placeholder="">
                                <span class="text-danger error-message" id="discount-up-error"></span>
                            </div>
                            <div class="form-group">
                                <label for="status">Status : </label>&nbsp;&nbsp;&nbsp;
                                &nbsp;&nbsp;&nbsp;<input type="radio" id="statusEditOne" name="status" value="1"
                                    checked>&nbsp;&nbsp;&nbsp;<label for="statusEditOne">Active</label>
                                &nbsp;&nbsp;&nbsp;<input type="radio" id="statusEditTwo" name="status"
                                    value="0">&nbsp;&nbsp;&nbsp;<label for="statusEditTwo">Inactive</label>
                                <span class="text-danger error-message" id="status-error"></span>
                            </div>


                            
                            
                           

                            




                            <button type="submit" class="btn btn-primary float-right mt-4">Update</button>
                        </form>
                    </div>

                </div>
            </div>
        </div>

        {{-- token edit modal close --}}
        <div class="col-md-12">
            <section class="content">
                <!-- Default box -->
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Token List</h3>
                        <a href="" class="float-right btn btn-primary btn-sm" data-toggle="modal"
                            data-target="#tokenAddModal"> <i class="fas fa-plus-circle"></i> Add Token</a>
                        
                    </div>
                    <!-- /.card-header -->
                    <div style="overflow-y:auto" class="card-body">
                        <table class="table table-bordered table-striped token_table">
                            <thead>
                                <tr>
                                    <th>SL</th>
                                    <th>Course</th>
                                    <th>Code</th>
                                    <th>Title</th>
                                    <th>Discount</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card-body -->
                <!-- /.card -->
            </section>
        </div>
    </div>
@endsection

@push('js')
    <script>
        // description editor js start

        



        $(document).ready(function() {



            $(function() {

                var table = $('.token_table').DataTable({

                    dom: "lBfrtip",
                    buttons: ["copy", "csv", "excel", "pdf", "print"],

                    pageLength: 25,
                    processing: true,
                    serverSide: true,
                    searchable: true,
                    "ajax": {
                        "url": "{{ route('admin.token.show') }}",
                        "datatype": "json",
                        "dataSrc": "data",
                        "data": function(data) {

                        }
                    },

                    drawCallback: function(settings) {

                        $('#is_check_all').prop('checked', false);

                    },

                    columns: [{
                            name: 'DT_RowIndex',
                            data: 'DT_RowIndex',
                            sWidth: '3%'
                        },

                        {
                            data: 'course',
                            name: 'course',
                            sWidth: '10%'
                        },
                        {
                            data: 'code',
                            name: 'code',
                            sWidth: '10%'
                        },
                        {
                            data: 'title',
                            name: 'title',
                            sWidth: '10%'
                        },
                        {
                            data: 'discount',
                            name: 'discount',
                            sWidth: '20%'
                        },
                        {
                            data: 'status',
                            name: 'status',
                            sWidth: '15%'
                        },
                        

                        {
                            data: 'action',
                            name: 'action',
                            sWidth: "15%",
                            orderable: false,
                            searchable: false
                        },

                    ],
                    lengthMenu: [
                        [10, 25, 50, 100, 500, 1000, -1],
                        [10, 25, 50, 100, 500, 1000, "All"]
                    ],
                });
                table.buttons().container().appendTo('#exportButtonsContainer');

                $(document.body).on('click', '#is_check_all', function(event) {
                    alert('Checkbox clicked!');
                    var checked = event.target.checked;
                    if (true == checked) {
                        $('.check1').prop('checked', true);
                    }
                    if (false == checked) {
                        $('.check1').prop('checked', false);
                    }
                });

                $('#is_check_all').parent().addClass('text-center');

                $(document.body).on('click', '.check1', function(event) {

                    var allItem = $('.check1');

                    var array = $.map(allItem, function(el, index) {
                        return [el]
                    })

                    var allChecked = array.every(isSameAnswer);

                    function isSameAnswer(el, index, arr) {
                        if (index === 0) {
                            return true;
                        } else {
                            return (el.checked === arr[index - 1].checked);
                        }
                    }

                    if (allChecked && array[0].checked) {
                        $('#is_check_all').prop('checked', true);
                    } else {
                        $('#is_check_all').prop('checked', false);
                    }
                });

                //Submit filter form by select input changing
                $(document).on('change', '.submitable', function() {

                    table.ajax.reload();

                });


            });




            $('#tokenCreate').on('submit', function(e) {
                e.preventDefault();

                var formData = new FormData(this);
                var form = this;

                $.ajax({
                    url: $(this).attr('action'),
                    type: $(this).attr('method'),
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(res) {
                        console.log(res);
                        $('.error-message').html('');
                        if (res.errors) {
                            $.each(res.errors, function(key, value) {
                                $('#' + key + '-error').html(value[0]);
                            });
                        }
                        if (res.status == 'success') {
                            toastr.success(res.message);
                            $('.token_table').DataTable().draw(false);
                            $('#tokenAddModal').modal('hide');
                            form.reset();
                        }

                    },
                    error: function(xhr) {
                        var errors = xhr.responseJSON.errors;
                        $.each(errors, function(key, value) {
                            $('#' + key + '-error').text(value[0]);
                        });
                    }
                });
            });






            
           

            $(document).on('click', '.editToken', function(e) {
                e.preventDefault();
                let id = $(this).data('id');
                let course = $(this).data('course');
                let title = $(this).data('title');
                let discount = $(this).data('discount');
                let status = $(this).data('status');
                

                

                

                // Set up the form fields with the retrieved data

                $('#token_id').val(id);
                $('#title').val(title);
                $('#course').val(course);
                $('#discount').val(discount);
                $('#status').val(status);
                

                // Show the modal
                $('#tokenEditModal').modal('show');

                


                
            });

            $(document).on('submit', '#tokenEditFrom', function(e) {
                e.preventDefault();

                var formData = new FormData($(this)[0]);

                $.ajax({
                    url: $(this).attr('action'),
                    type: $(this).attr('method'),
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(res) {
                        console.log(res);
                        toastr.success(res.message);
                        $('#tokenEditModal').modal('hide');
                        $('.token_table').DataTable().draw(false);

                        var errors = res.errors;



                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
            });



            $(document).on('click', '#token_delete', function(e) {
                e.preventDefault();


                let id = $(this).data('id');
                $.confirm({
                    title: 'Delete Confirmation',
                    content: 'Are you sure?',
                    buttons: {
                        cancel: {
                            text: 'No',
                            btnClass: 'btn-primary',
                            action: function() {
                                // Do nothing on cancel
                            }
                        },
                        confirm: {
                            text: 'Yes',
                            btnClass: 'btn-danger',
                            action: function() {
                                // Use the 'id' from the outer scope
                                $.ajax({
                                    url: "{{ route('admin.token.delete') }}",
                                    type: 'post',
                                    data: {
                                        id: id,
                                        _token: '{{ csrf_token() }}' // Include the CSRF token for security
                                    },
                                    success: function(response) {
                                        if (response.status == "success") {
                                            toastr.success(response.message);
                                            $('.token_table').DataTable().draw(false);

                                        }
                                    },
                                    error: function(error) {
                                        // Show Toastr error message
                                        toastr.error(error.responseJSON.message);
                                    }
                                });
                            }
                        }
                    }
                });
            });

        });

        // news edit code
    </script>
@endpush