@extends('admin.layout')

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">

<style>
     * {
            --hibiscus-love: #fc465c;
            --fine-ii: #f9b198;
            --afl: #f9b198;
            --mexican-sky: #cfdddd;
            --brasillia-peach: #133d45;
            --free: #ffd700;
            --captured: #2b2120;

            --form-bg: var(--brasillia-peach);
            --secondary-color: var(--hibiscus-love);
            --tertiary-color: var(--fine-ii);
            --quadrary-color: var(--afl);
            --bg-color: var(--mexican-sky);
            --text-color: var(--free);
            --header-color: var(--captured);
            --error-color: var(--hibiscus-love);
            --success-color: #73d12e;

            box-sizing: border-box;
        }

        .container {
            border-radius: 0.6em;
            padding: 20px;
            background-color: #133d45 !important;

        }

        .form {
            padding: 30px 40px;
        }

        .form h2 {
            text-align: center;
            margin: 0 0 20px;
        }

        .form-control.bliss {
            margin-bottom: 10px;
            /* padding-bottom: 20px; */
            position: relative;
            color: var(--text-color) !important;

        }

        .form-label {
            color: White !important;
            display: block;
            margin-bottom: 5px;
        }

        .form-control.bliss,
        .select2-container--default .select2-selection--single {
            border-radius: 6px;
            background-color: #133d45 !important;
            border: var(--quadrary-color) solid 2px !important;
            display: block;
            width: 100%;
            color: var(--text-color) !important;

        }

        .form-select.bliss {
            border-radius: 6px;
            background-color: #133d45 !important;
            border: var(--quadrary-color) solid 2px !important;
            color: var(--text-color) !important;


        }

        input::placeholder,
        textarea::placeholder {
            color: #a8a6a6 !important;
            opacity: 0.7;
        }

        .form-control.bliss input:focus {
            outline: 0;
            border-color: var(--tertiary-color);
        }

        .form-control.bliss.success input {
            border-color: var(--success-color);
        }

        .form-control.bliss.error input {
            border-color: var(--error-color);
        }

        .form-control.bliss small {
            color: var(--error-color);
            position: absolute;
            bottom: 0;
            left: 0;
            visibility: hidden;
        }

        .form-control.bliss.error small {
            visibility: visible;
        }

        .btn-submit {
            cursor: pointer;
            background: #ffd700 !important;
            font-size: 16px;
            color: black !important;
            padding: 0.618em 1.2em;
            border-radius: 0.4em;

        }

        .btn-submit {
            outline: 0;
            background-color: #ffd700;
        }


        .form-label {
            color: White !important;
        }

        .news-marquee {
            width: 100%;
            overflow: hidden;
            background: #111;
            color: #fff;
            padding: 10px 0;
            position: relative;
            border-radius: 6px;
        }

        input:-webkit-autofill,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:hover,
        textarea:-webkit-autofill,
        select:-webkit-autofill {
            -webkit-text-fill-color: #ffc107 !important;
            transition: background-color 5000s ease-in-out 0s;
        }
    /* Form Card Styling */
    .news-card {
        max-width: 500px;
        margin: 0 auto 40px;
        border-radius: 12px;
    }



    .btn-cancel {
        background-color: #e9ecef;
        color: #666;
        border: none;
        padding: 10px 30px;
        border-radius: 8px;
    }

    .btn-submit {
        background-color: #1a99d5;
        color: white;
        border: none;
        padding: 10px 30px;
        border-radius: 8px;
    }


    .btn-delete {
        color: #ff4d4f;
        font-size: 1.2rem;
        cursor: pointer;
        border: none;
        background: none;
    }
    .section-title {
            position: relative;
            margin: 25px 0 15px;
            text-align: center;
        }

        .section-title span {
            background: var(--form-bg);
            padding: 6px 20px;
            font-weight: 600;
            color: var(--text-color);
            letter-spacing: 1px;
            border-radius: 30px;
            border: 1px solid var(--quadrary-color);
            font-size: 14px;
            z-index: 1;
            position: relative;
        }

        .section-title::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 1px;
            background: var(--quadrary-color);
            z-index: 0;
        }
</style>
@section('content')
<div class="container-fluid mt-4">
    <h5 class="mb-4">Scrolling News</h5>

    <form action="{{ route('admin.add_news') }}" method="POST" id="SubmitForm">
        @csrf

        <div class="card news-card shadow-sm border-0">
            <div class="card-body container">

 <div class="section-title mt-1">
                        <span><i class="ti tabler-news icon-base me-1"></i>Scrolling News</span>
                    </div>

                <!-- Date -->
                <div class="mb-3">
                    <label class="form-label">Date</label>
                    <div class="input-group">
                        <input type="date" name="news_date"
                            class="form-control bliss @error('news_date') is-invalid @enderror"
                            value="{{ old('news_date') }}">

                        <!-- <span class="input-group-text bg-white">
                                <i class="ti tabler-calendar"></i>
                            </span> -->
                    </div>

                    @error('news_date')
                    <div class="text-danger small">{{ $message }}</div>
                    @enderror
                </div>

                <!-- News -->
                <div class="mb-4">
                    <label class="form-label">News</label>
                    <textarea name="description" class="form-control bliss @error('description') is-invalid @enderror" rows="4"
                        placeholder="Enter">{{ old('description') }}</textarea>

                    @error('description')
                    <div class="text-danger small">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Buttons -->
                <div class="d-flex justify-content-center gap-3">
                    <button type="reset" class="btn btn-secondary">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="submit_btn">Submit</button>
                </div>
            </div>
        </div>
    </form>

    <div class="card shadow-sm border-0">
        <div class="card-body p-4">
            <div class="table-responsive">
                <table class="table w-100 mb-0" id="usersTable">
                    <thead>
                        <tr>
                            <th>SNO</th>
                            <th>DATE</th>
                            <th>NEWS</th>
                            <th>STATUS</th>
                            <th>ACTION</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="deleteNewsModal" tabindex="-1">
        <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">Do you want to delete this news?</p>

                <form method="POST" action="{{ route('admin.delete_news') }}" id="DeleteForm">
                    @csrf


                    <!-- Hidden ID -->
                    <input type="hidden" name="id" id="deleteNewsId">

                    <button type="button" class="btn btn-outline-primary me-2" data-bs-dismiss="modal">Cancel</button>

                    <button type="submit" class="btn btn-danger" id="delete_btn">
                        Yes, Delete
                    </button>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="statusModal">
        <div class="modal-dialog">
            <form method="POST" action="{{ route('admin.active_status') }}">
                @csrf

                <input type="hidden" name="id" id="status_id">
                <input type="hidden" name="status" id="status_value">

                <div class="modal-content">
                    <div class="modal-body text-center">
                        <h5 id="status_text">Are you sure?</h5>

                        <button type="submit" class="btn btn-primary">Yes</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {

    $('#usersTable').DataTable({
        processing: true,
        serverSide: true,
        destroy: true, // ✅ IMPORTANT FIX
        ajax: "{{ route('admin.news_table_data') }}",

        dom: 'rt<"d-flex justify-content-between align-items-center p-3"ip>',

        columns: [
            {
                data: 'DT_RowIndex',
                orderable: false,
                searchable: false
            },
            {
                data: 'news_date'
            },
            {
                data: 'news',
                className: 'news-text'
            },
            {
                data: 'status',
                orderable: false,
                searchable: false
            },
            {
                data: 'action',
                orderable: false,
                searchable: false
            }
        ]
    });

});
</script>

<script>
    document.getElementById('submit_btn').addEventListener('click', function(e) {
        e.preventDefault();
        let btn = this;
        btn.disabled = true;
        btn.innerText = 'Processing...';
        document.getElementById('SubmitForm').submit();
    });
</script>
<script>
    $(document).on('click', '.openDeleteModal', function() {

        let id = $(this).data('id');

        $('#deleteNewsId').val(id);
    });
</script>
<script>
    document.getElementById('delete_btn').addEventListener('click', function(e) {
        e.preventDefault();
        let btn = this;
        btn.disabled = true;
        btn.innerText = 'Processing...';
        document.getElementById('DeleteForm').submit();
    });
</script>

<script>
    $(document).on('click', '.openStatusModal', function() {

        let id = $(this).data('id');
        let status = $(this).data('status');
        let text = $(this).data('text');

        $('#status_id').val(id);
        $('#status_value').val(status);
        $('#status_text').text('Are you sure to make it ' + text + '?');

    });
</script>
@endsection