@extends('master')
@section('title', 'Home Breaking')
@push('script')
    <link rel="stylesheet" type="text/css"
        href="{{ asset('asset/admin/src/plugins/datatables/css/dataTables.bootstrap4.min.css') }}" />
    <link rel="stylesheet" type="text/css"
        href="{{ asset('asset/admin/src/plugins/datatables/css/responsive.bootstrap4.min.css') }}" />
@endpush
@section('content')


    <div class="card-box mb-30">
        <div class="pd-20">
            <h4 class="h4">Home Breaking</h4>

        </div>
        <div class="pb-20 p-4 table-responsive">
            <table class="table hover nowrap data" id="data">
                <thead style="background-color: #142127!important;color:#fff; ">
                    <tr>
                        <th class="table-plus datatable-nosort">No</th>
                        <th>Row Tag</th>
                        <th>News</th>
                        <th width=30px>Action</th>
                    </tr>
                </thead>

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


    <!-- Modal edit-->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myLargeModalLabel">
                        Edit @yield('title')
                    </h4>
                </div>
                <div class="modal-body">
                    <form id="formedit" method="post">
                        <div class="form-group">
                            <label>Select News</label>
                            <input class="form-control" type="text" name="id" id="id" hidden />
                            <select class="form-control" name="id_news" id="news" style="width: 100%; height: 38px">
                                <option></option>
                            </select>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        Close
                    </button>
                    <button type="button" class="btn btn-primary editSaveButton">
                        Save changes
                    </button>
                </div>
            </div>
        </div>
    </div>


@endsection

@push('javascript')
    <script src="{{ asset('asset/admin/src/plugins/datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('asset/admin/src/plugins/datatables/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('asset/admin/src/plugins/datatables/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('asset/admin/src/plugins/datatables/js/responsive.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('asset/admin/vendors/scripts/datatable-setting.js') }}"></script>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });



            $('body').on('click', '.edit', function() {
                var id = $(this).data('id');

                $.ajax({
                    url: 'homebreaking/' + id + '/edit',
                    type: 'get',
                    dataType: 'json',
                    success: function(result_show) {
                        $('#editModal').modal('show');
                        $('#id').val(result_show.data.id);
                        $('#id_news').val(result_show.data.id_news);

                        var categorySelect = $('#news');
                        categorySelect.empty(); // Clear existing options
                        categorySelect.append('<option></option>');

                        result_show.news.forEach(function(news) {
                            var option = '<option value="' + news.id_news + '">' + news.title + '</option>';
                            categorySelect.append(option);
                        });
                    },
                    error: function(error) {
                        console.log("Error:", error);
                    }
                })

            })

            $('body').on('click', '.editSaveButton', function() {
                var id = $('#id').val();
                $('.editSaveButton').removeClass('btn-primary').addClass('btn-primary disabled').text(
                    'Loading....');

                var formedit = new FormData($('#formedit')[0]);
                $.ajax({
                    url: '{{ url('panel/updatehomebreaking') }}/' + id,
                    enctype: 'multipart/form-data',
                    type: 'post',
                    processData: false,
                    contentType: false,
                    cache: false,
                    data: formedit,
                    success: function(result) {
                        $('.editSaveButton').removeClass('btn-primary disabled ').addClass(
                                'btn-primary')
                            .text('Save changes');
                        if (result.status == 'success') {
                            $('#formedit')[0].reset();
                            Swal.fire({
                                title: "Info !!",
                                text: result.message,
                                icon: "success"
                            }).then(function() {
                                $('#editModal').modal('hide');
                                table.draw();
                            });

                        } else {
                            $.each(result.message, function(prefix, val) {
                                toastr.error(val);
                            });
                        }
                    }
                })


            })



            $('body').on('click', '.delete', function() {
                var id = $(this).data('id');

                Swal.fire({
                    title: "Are you sure?",
                    text: "You won't be able to revert this!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Yes, delete it!"
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: '{{ route('homebreaking.destroy', '') }}/' + id,
                            type: 'DELETE',
                            cache: false,
                            success: function(result) {
                                if (result.status == 'success') {
                                    Swal.fire({
                                        title: "Info !!",
                                        text: "Your data has been deleted.",
                                        icon: "success"
                                    }).then(function() {
                                        table.draw();
                                    });
                                }
                            }
                        });
                    }
                });
            });


            var table = $('.data').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('homebreaking.create') }}",
                },
                order: [0, 'asc'],
                columns: [{
                        render: function(data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        },
                    },
                    {
                        data: 'row_tag',
                        name: 'row_tag'
                    },
                    {
                        data: 'title',
                        render: function(data) {
                            if (data == null) {
                                return 'News not found';
                            } else {
                                return data;
                            }
                        }
                    },
                    {
                        data: 'id',
                        render: function(data) {
                            return '<div class="dropdown"><a class="btn btn-link font-24 p-0 line-height-1 no-arrow dropdown-toggle" href="#" role="button" data-toggle="dropdown"><i class="dw dw-more"></i> </a> <div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list"><a class="dropdown-item edit" href="#" data-id="' +
                                data +
                                '"><i class="dw dw-edit2"></i> Edit</a></div></div>';
                        },
                    },
                ]
            });


        })
    </script>
@endpush