@extends('backend.layouts.app')
@section('title', $module_title)

@section('breadcrumb')
<ol class="breadcrumb border-0 m-0">
    <li class="breadcrumb-item"><a href="{{route("backend.$module_name.index")}}">Home</a></li>
    <li class="breadcrumb-item active">{{$module_title}}</li>
</ol>
@endsection
@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
      


<div class="w-full md:flex md:justify-between border-b">
    <div class="w-full">
           <h4 class="text-xl mt-1 font-semibold card-title mb-0">
            <i class="fas fa-list"></i>
            List Berita
            </h4>
    </div>

    <div class="flex w-full justify-end">
       <div class="hidden md:block" id="buttons">
    </div> 

    </div>
   
    
</div>

<div class="w-full md:flex my-1 md:grid md:grid-cols-4 gap-2"> 

<div class="form-group">
    <a href="{{ route("backend.berita.create") }}"
            data-toggle="tooltip"
            class="btn py-2 w-full btn-dark btn-sm rounded px-5 rounded-2xl">
            <i class="bi bi-plus"></i>Tambah &nbsp;{{ $module_title }}
        </a>  

</div>

<div class="form-group">
    <select class="form-control select2" name="type" id="type">
        <option value="">Tipe</option>
        <option value="breaking" @if (old('type') == "breaking") {{ 'selected' }} @endif>Breaking News</option><option value="headline" @if (old('type') == "headline") {{ 'selected' }} @endif>Headline</option>
    </select>
</div>

     @if(!auth()->user()->hasRole('reporter'))
       <div class="form-group">
                <select class="form-control select2 w-full" name="reporter" id="reporter">
                    <option value="0">Reporter</option>
                   @foreach(\App\Models\User::role('reporter')->get() as $k)
                        <option value="{{ $k->id }}" {{ old('reporter') == $k->id ? 'selected' : '' }}>
                            {{ $k->name }}
                        </option>
                    @endforeach
                </select>
            </div>  
        @endif
            


 <div class="form-group">
                <select class="form-control select2" name="kategori" id="kategori">
                    <option value="0">kategori</option>
                    @foreach(\Modules\Berita\Models\KategoriBerita::get() as $k)
                    <option value="{{ $k->id }}" {{ old('kategori') == $k->id ? 'selected' : '' }}>
                    {{ $k->kategori_berita }}</option>
                    @endforeach
                </select>
            </div>




</div>


        <div class="table-responsive mt-1">
            <table id="datatable" style="width: 100%" class="table table-bordered table-hover table-responsive-sm">
                <thead>
                    <tr class="uppercase">
                        <th style="width: 6%!important;">No</th>
                      
                        <th class="text-left">{{ label_case('judul') }}</th>
                        <th class="text-center">{{ label_case('kategori') }}</th>
                        <th style="width: 14% !important;" class="text-center">
                        {{ label_case('type berita') }}</th>
                      
                        
                        <th style="width: 10%!important;" class="text-center">
                            {{ __('Action') }}
                        </th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
            </div>
        </div>
    </div>
</div>
@endsection

<x-library.datatable />
  <x-library.select2 />
@push ('after-styles')
<!-- DataTables Core and Extensions -->


@endpush
@push('after-scripts')

<script type="text/javascript">
jQuery.noConflict();
(function( $ ) {
    var table = $('#datatable').DataTable({
        processing: true,
        serverSide: true,
        autoWidth: true,
        responsive: true,
        language: {
            search: "<i class='fa fa-search fa-fw'></i> Pencarian : ",
            lengthMenu: "_MENU_ &nbsp;&nbsp;Data Per Halaman ",
            info: "Menampilkan _START_ s/d _END_ dari <b>_TOTAL_ data</b>",
            infoFiltered: "(difilter dari _MAX_ total data)",
            zeroRecords: "Pencarian tidak ditemukan",
            emptyTable: "Data kosong",
            loadingRecords: "Harap Tunggu...",
            paginate: {
                previous: "Prev",
                next: "Next"
            }
        },
        order: [[0, "desc"]],
        columnDefs: [
            {
                targets: 'no-sort',
                orderable: false,
            }
        ],
        pagingType: "simple_numbers",
        ajax: {
            url: "{{ route("backend.berita.index_data") }}",
            data: function (d) {
                d.reporter = $('#reporter').val(); // Add parent value
                d.type = $('#type').val(); // Add parent value
                d.kategori = $('#kategori').val(); // Add parent value
                d.search = $('input[type="search"]').val(); // Add search value
            }
        },
        dom: 'Blfrtip',
        buttons: [
            'excel',
            'pdf',
            'print'
        ],
        columns: [
            {
                data: 'id',
                orderable: false,
                render: function (data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1; // Row index
                }
            },
             
                {data: 'judul', name: 'judul'},
                {data: 'kategori', name: 'kategori'},
                {data: 'breaking_news', name: 'breaking_news'},
            {
                data: 'action',
                name: 'action',
                orderable: false,
                searchable: false
            }
        ]
    });

    table.buttons()
         .container()
         .appendTo("#buttons");

    $('#kategori').change(function(){
        var show_id = $(this).val();
       // alert(show_id); 
        console.log(show_id); 
        table.draw();
    });

    $('#type').change(function(){
        var show_id = $(this).val();
        //alert(show_id); 
        console.log(show_id); 
        table.draw();
    });
   $('#reporter').change(function(){
        var show_id = $(this).val();
        console.log(show_id); 
        table.draw();
    });

  



})(jQuery);
</script>

  
<script type="text/javascript">
jQuery.noConflict();
(function( $ ) {
$(document).on('click', '#Tambah, #Show, #Edit', function(e){
         e.preventDefault();
        if($(this).attr('id') == 'Tambah')
        {
            $('.modal-dialog').addClass('modal-lg');
            $('.modal-dialog').removeClass('modal-sm');
            $('#ModalHeader').html('<i class="bi bi-grid-fill"></i> &nbspTambah {{ Label_case($module_title) }}');
        }
        if($(this).attr('id') == 'Edit')
        {
            $('.modal-dialog').addClass('modal-lg');
            $('.modal-dialog').removeClass('modal-sm');
            $('#ModalHeader').html('<i class="bi bi-grid-fill"></i> &nbsp;Edit {{ Label_case($module_title) }}');
        } 
         if($(this).attr('id') == 'Show')
        {
            $('.modal-dialog').addClass('modal-lg');
            $('.modal-dialog').removeClass('modal-sm');
            $('#ModalHeader').html('<i class="bi bi-grid-fill"></i> &nbsp;Show {{ Label_case($module_title) }}');
        }
        $('#ModalContent').load($(this).attr('href'));
        $('#ModalGue').modal('show');
    });

// Event handler for Breaking News button
$(document).on('click', '.statusBtn', function(e) {
    e.preventDefault();
    let id = $(this).attr('id').split('-')[1]; 
    var url = "{{ route('backend.berita.update_status', ':id') }}".replace(':id', id);

    let button = $(this);

    $.ajax({
        url: url,
        method: 'GET',
        data: { type: 'breaking_news' }, 
        beforeSend: function() {
            button.prop('disabled', true); // Nonaktifkan tombol saat proses berjalan
        },
        success: function(response) {
            let newStatus = response.new_status;
            let table = $('#datatable').DataTable();

            // Update class dan teks tombol
            button.removeClass('btn-success btn-danger')
                  .addClass(newStatus == 'Yes' ? 'btn-success' : 'btn-danger')
                  .text(newStatus == 'Yes' ? 'Active' : 'Inactive');

            // Update data baris di DataTable
            let row = table.row(button.closest('tr')); // Cari baris berdasarkan tombol
            row.data().breaking_news = newStatus; // Update data status pada baris
            row.invalidate().draw(false); // Redraw baris tanpa reload seluruh tabel

            toastr.success('Status berhasil diperbarui menjadi ' + newStatus, 'Sukses');
        },
        error: function(xhr) {
            toastr.error('Terjadi kesalahan: ' + xhr.responseText, 'Error');
        },
        complete: function() {
            button.prop('disabled', false); // Aktifkan kembali tombol
        }
    });
});


 $(document).on('click', '.statusHeadline', function(e) {
    e.preventDefault();
    let id = $(this).attr('id').split('-')[1]; 
    var url = "{{ route('backend.berita.update_status', ':id') }}".replace(':id', id);

    let button = $(this);

    $.ajax({
        url: url,
        method: 'GET',
        data: { type: 'headline' }, // Send type to identify the status
        beforeSend: function() {
            button.prop('disabled', true); // Disable button while processing
        },
        success: function(response) {
            let newStatus = response.new_status;
            let table = $('#datatable').DataTable();

            // Update button class and text
            button.removeClass('btn-success btn-danger')
                  .addClass(newStatus == 'Yes' ? 'btn-success' : 'btn-danger')
                  .text(newStatus == 'Yes' ? 'Active' : 'Inactive');

            // Update data in DataTable row
            let row = table.row(button.closest('tr')); // Get row from button's parent
            row.data().status = newStatus; // Update the status column data
            row.invalidate().draw(false); // Redraw the row

            toastr.success('Status berhasil diperbarui menjadi ' + newStatus, 'Sukses');
        },
        error: function(xhr) {
            toastr.error('Terjadi kesalahan: ' + xhr.responseText, 'Error');
        },
        complete: function() {
            button.prop('disabled', false); // Re-enable button after processing
        }
    });
});



})(jQuery);
</script>


@endpush