@extends('admin.layout')

@section('content')

<!-- DataTable CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css">

<style>
.upload-box {
    border: 2px dashed #ccc;
    width: 342px;
    height: 170px;
    border-radius: 6px;
    cursor: pointer;
    color: #666;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-box:hover {
    background-color: #f9f9f9;
    border-color: #999;
}

.upload-box img {
    max-height: 100%;
    max-width: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
    .table-no-border {
        border: none;
    }

    .table-no-border th,
    .table-no-border td {
        border: none;
    }

    .table-responsive .dataTables_wrapper .dataTables_length select {
        padding: 8px 48px 8px 16px !important;
    }

    .btn-primary.submit-btn {
        background-color: #0f1f3e; /* Matching dark navy */
        border-color: #0f1f3e;
        color: #ffffff;
        border-radius: 6px;
        padding: 10px 24px;
        font-weight: 500;
    }

    .btn-primary.submit-btn:hover {
        background-color: #0c1a35;
        border-color: #0c1a35;
    }

    .card {
        border-radius: 10px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    }

    .form-label {
        font-weight: 600;
        font-size: 14px;
    }

    .form-control {
        border-radius: 6px;
        font-size: 14px;
    }

    .page-title {
        font-size: 20px;
        font-weight: 600;
    }
</style>

<div class="container-fluid content-inner pb-0">
    <div class="page-header d-flex justify-content-between">
        <h1 class="page-title mb-0">NEWS </h1>
    </div>

    <!-- Create Notification Form -->
    <div class="row justify-content-center mt-3">
        <div class="col-lg-6">
            <div class="card p-4">
                <h6 class="card-title">Create News</h6>
                <hr>
                <form>
                    <div class="form-group mb-3">
                        <label for="notification_title" class="form-label"> Title</label>
                        <input type="text" name="notification_title" class="form-control" id="notification_title" value="{{ old('notification_title') }}">
                        @error('notification_title')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group mb-3">
                        <label for="description" class="form-label">Description</label>
                        <input name="description" class="form-control" id="description" rows="4">{{ old('description') }}
                        @error('description')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                   
                    <div class="form-group mb-3">
                        <label for="image" class="form-label">
                             Image <small class="text-muted">( size 342px × 170px )</small>
                        </label>
                    
                        <div class="upload-box text-center position-relative" onclick="document.getElementById('image').click()">
                            <div id="upload-content">
                                <i class="fa fa-upload fa-2x mb-2"></i>
                                <div>Click to Upload</div>
                                <small class="text-muted d-block mt-1">( Max file size: 5 MB, JPG only )</small>
                            </div>
                            <img id="preview-img" style="display: none;" />
                        </div>
                    
                        <input type="file" name="image" id="image" accept="image/jpeg" style="display: none;" onchange="previewImage(event)">
                    
                        @error('image')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    

                    <div class="text-end mt-4">
                        <button type="submit" class="btn btn-primary submit-btn">
                            <i class="fa-regular fa-circle-check me-2"></i>Submit
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Notification Table -->
    <div class="row mt-4">
        <div class="col-lg-12">
            <h5> History</h5>
            <div class="card p-3 mt-2">
                <div class="table-responsive mt-3">
                    <table class="table table-no-border" id="notificationTable">
                        <thead>
                            <tr>
                                <th>S/N</th>
                                <th>Title</th>
                                <th>Description</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <!-- Optional body -->
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- DataTable JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>

<script>
    $(document).ready(function () {
        $('#notificationTable').DataTable();
    });
</script>

<script>
    function previewImage(event) {
        const file = event.target.files[0];
        const previewImg = document.getElementById('preview-img');
        const uploadContent = document.getElementById('upload-content');
    
        if (file && file.type.includes('image')) {
            const reader = new FileReader();
            reader.onload = function(e) {
                previewImg.src = e.target.result;
                previewImg.style.display = 'block';
                uploadContent.style.display = 'none';
            }
            reader.readAsDataURL(file);
        }
    }
    </script>
    
    

@endsection