@extends('Admin.layout')
<style>
    .custom-file-upload {
        display: flex;
        align-items: center;
        border: 1px solid #dcdcdc;
        border-radius: 8px;
        overflow: hidden;
        height: 44px;
    }
    .custom-file-upload .choose-btn {
        border-radius: 8px 0 0 8px;
        padding: 10px 18px;
        white-space: nowrap;
        height: 44px;
    }
    .custom-file-upload .file-name {
        border: none;
        border-left: 1px solid #dcdcdc;
        height: 44px;
        border-radius: 0 8px 8px 0;
    }
    .custom-file-upload .file-name:focus {
        box-shadow: none;
    }
    .upload-area {
        border: 2px dashed #d3d6db;
        border-radius: 10px;
        cursor: pointer;
    }
    .upload-area:hover {
        background: #f8f9fa;
    }
    .modal {
        z-index: 1055;
    }
</style>
@section('content')
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="mb-0">Create News</h4>
    </div>
    <div class="row justify-content-center mb-4">
        <div class="col-md-6">
            <div class="card p-5 shadow-sm">
                <h6>Create News</h6>
                <form id="categoryForm" action="{{ route('add_news') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">News</label>
                        <input type="text" name="news" class="form-control" placeholder="Enter News"
                            value="{{ old('news') }}">
                    </div>
                    <button type="submit" id="submitBtn" class="btn btn-primary w-100">
                        Submit
                    </button>
                </form>
            </div>
        </div>
    </div>
    <div class="card p-3 shadow-sm">
        <div class="table-responsive">
            <table id="categoryTable" class="table table-bordered">
                <thead>
                    <tr>
                        <th>S.No</th>
                        <th>Created Date</th>
                        <th>News</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
  <div class="modal fade" id="editModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content p-4">

<form id="editNewsForm">

@csrf

<input type="hidden" id="edit_id" name="id">

<div class="mb-3">

<label>News</label>

<input type="text" id="edit_name"
name="news"
class="form-control">

<small class="text-danger d-none" id="edit_error"></small>

</div>

<button type="submit"
class="btn btn-primary w-100"
id="updateBtn">

<span id="btnText">Update</span>

<span id="processing"
class="spinner-border spinner-border-sm d-none">
</span>

</button>

</form>

</div>
</div>
</div>
    <div class="modal fade" id="deleteModal" tabindex="-1">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content text-center p-8">
                <form action="#" method="POST">
                    @csrf
                    <input type="hidden" id="delete_id" name="id">
                    <h4>Are you sure?</h4>
                    <p class="text-muted">Do you really want to delete this News?</p>
                    <div class="d-flex gap-3">
                        <button type="button" class="btn btn-outline-secondary w-100" data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button type="submit" class="btn btn-danger w-100">
                            Yes, Delete
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
  <!-- toggle status -->
<div class="modal fade" id="statusModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <h5 class="fw-bold mb-2">Are you sure!!</h5>
            <p class="text-muted" id="toggle_status_text"></p>
            <form id="ToggleForm" method="POST" action="{{ route('toggle_news_status') }}">
                @csrf
                <input type="hidden" name="id" id="toggle_product_id">
                <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                    <button type="button" class="btn btn-outline-primary p-3 fw-semibold  me-3" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="submit" id="submit_toggle" class="btn btn-primary p-3 fw-semibold">
                        Yes, Sure
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
    <div class="position-fixed top-0 end-0 p-3" style="z-index: 9999">
        <div id="customToast" class="toast text-white border-0" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body" id="customToastBody"></div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        </div>
    </div>
    {{-- ================= Scripts ================= --}}
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
    <script>
        $(document).ready(function() {
            // ================= IMAGE PREVIEW LOGIC (CREATE FORM) =================
            $('#categoryInput').on('change', function(e) {
                let file = e.target.files[0];
                if (file) {
                    let reader = new FileReader();
                    reader.onload = function(e) {
                        $('#uploadIcon').addClass('d-none');
                        $('#uploadtexts').addClass('d-none');
                    }
                    reader.readAsDataURL(file);
                }
            });
            // ================= IMAGE PREVIEW LOGIC (EDIT MODAL) =================
            $('#edit_image').on('change', function(e) {
                let file = e.target.files[0];
                if (file) {
                    let reader = new FileReader();
                    reader.onload = function(e) {
                        $('#edit_previewImage').attr('src', e.target.result).removeClass('d-none');
                    }
                    reader.readAsDataURL(file);
                }
            });
            // ================= DATATABLE =================
            let table = $('#categoryTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('news_data') }}",
                columns: [{
                        data: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'created_at'
                    },
                    {
                        data: 'news'
                    },
                    {
                        data: 'status',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'action',
                        orderable: false,
                        searchable: false
                    }
                ]
            });
            // ================= ADD News =================
            let isSubmitting = false;
            $('#categoryForm').on('submit', function(e) {
                if (isSubmitting) {
                    e.preventDefault();
                    return false;
                }
                e.preventDefault();
                let form = $(this);
                let btn = $('#submitBtn');
                let formData = new FormData(this); // FormData handles files automatically
                isSubmitting = true;
                btn.prop('disabled', true).html("Processing...");
                $.ajax({
                    url: form.attr('action'),
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        showToast(response.success, "success");
                        form[0].reset();
                        // Reset custom image preview UI
                        $('#previewImage').addClass('d-none').attr('src', '');
                        $('#uploadIcon').removeClass('d-none');
                        $('#uploadtexts').removeClass('d-none');
                        btn.prop('disabled', false).html("Submit");
                        table.ajax.reload(null, false);
                        isSubmitting = false;
                    },
                    error: function(xhr) {
                        let error = xhr.responseJSON?.message || "Something went wrong";
                        showToast(error, "error");
                        btn.prop('disabled', false).html("Submit");
                        isSubmitting = false;
                    }
                });
            });
            // ================= EDIT CLICK =================
            $(document).on('click', '.editBtn', function() {
                $('#edit_id').val($(this).data('id'));
                $('#edit_name').val($(this).data('name'));
                // Handle image logic for edit modal
                $('#editModal').modal('show');
            });
           // ================= EDIT UPDATE =================

$('#editNewsForm').on('submit', function(e) {

e.preventDefault();

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

// clear error
$('#edit_error').addClass('d-none').text('');

// Processing start
$('#btnText').text('Processing...');
$('#processing').removeClass('d-none');
$('#updateBtn').prop('disabled', true);

$.ajax({

url:"{{ route('edit_news') }}",

type:"POST",

data:formData,

contentType:false,

processData:false,

success:function(response){

$('#editModal').modal('hide');

showToast(response.success,"success");

table.ajax.reload(null,false);

},

error:function(xhr){

// Validation Error (422)

if(xhr.status === 422){

let message = xhr.responseJSON.error;

$('#edit_error')
.removeClass('d-none')
.text(message);

showToast(message,"error");

}
else{

showToast("Update Failed","error");

}

},

complete:function(){

// Processing stop

$('#btnText').text('Update');

$('#processing').addClass('d-none');

$('#updateBtn').prop('disabled',false);

}

});

});
            // ================= DELETE CLICK =================
            $(document).on('click', '.deleteBtn', function() {
                $('#delete_id').val($(this).data('id'));
                $('#deleteModal').modal('show');
            });
            // ================= DELETE CONFIRM =================
            $('#deleteModal form').on('submit', function(e) {
                e.preventDefault();
                let id = $('#delete_id').val();
                $.ajax({
                    url: "{{ route('delete_news') }}",
                    type: "POST",
                    data: {
                        id: id,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        $('#deleteModal').modal('hide');
                        showToast(response.success, "success");
                        table.ajax.reload(null, false);
                    },
                    error: function() {
                        showToast("Delete failed", "error");
                    }
                });
            });
        });
        // ================= statusBtn =================
        function setToggleId(button)
{
    const id = button.getAttribute('data-id');
    const isActive =
    button.getAttribute('data-active') === '1';
    document.getElementById(
    'toggle_product_id'
    ).value = id;
    const statusText =
    document.getElementById(
    'toggle_status_text'
    );
    if(isActive)
    {
        statusText.textContent =
        "Are you sure want to Inactive this News ?";
    }
    else
    {
        statusText.textContent =
        "Are you sure want to Active this News ?";
    }
}
    document.getElementById('ToggleForm').addEventListener('submit', function() {
        const btn = document.getElementById('submit_toggle');
        btn.disabled = true;
        btn.innerText = 'Processing...';
    });
        // ================= toastEl =================
        function showToast(message, type = "success") {
            let toastEl = document.getElementById("customToast");
            let bodyEl = document.getElementById("customToastBody");
            bodyEl.innerText = message;
            toastEl.classList.remove("bg-success", "bg-danger");
            toastEl.classList.add(type === "success" ? "bg-success" : "bg-danger");
            new bootstrap.Toast(toastEl).show();
        }
    </script>
@endsection