@extends('admin.layout')

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

    <style>
        .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: #1e3a8a;
            /* A deep blue */
            border-color: #1e3a8a;
            color: #ffffff;
        }

        .btn-primary.submit-btn:hover {
            background-color: #1c357d;
            border-color: #1c357d;
        }
    </style>


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

        <div class="row justify-content-center mt-3">
            <div class="col-lg-6">
                <div class="card p-3">
                    <h6 class="card-title">Add Channel Name</h6>
                    <hr>
                    <form action="{{ route('youtubescreen_post') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="form-group mb-3">
                                    <label for="channel_name" class="form-label">Channel Name</label>
                                    <input type="text" name="channel_name" class="form-control" id="channel_name">
                                    @error('channel_name')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                   <div class="col-lg-6">
                                <div class="form-group mb-3">
                                    <label for="image" class="form-label">Thumbnail Image</label>
                                    <input type="file" name="image" id="image" class="form-control">
                                    @error('image')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                                <div class="button-container mt-4">
                                    <button type="submit" class="btn btn-primary submit-btn"><i
                                            class="fa-regular fa-circle-check me-2"></i>Submit</button>
                                </div>
                            </div>
                         
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Notification Table -->
        <div class="row mt-3">
            <div class="col-lg-12">
                <h5>Notifications</h5>
                <div class="card p-2 mt-2">
                    <div class="table-responsive mt-3">
                        <table class="table table-no-border" id="notificationTable">
                            <thead>
                                <tr>
                                    <th scope="col">S/N</th>
                                    <th scope="col">Channel Name</th>
                                    <th scope="col">CREATED DATE</th>
                                    <th scope="col">ACTION</th>
                                </tr>
                            </thead>
                            @php
                                $sn = 1;
                            @endphp
                            <tbody>
                                @foreach ($notification as $notifi)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $notifi->channel_name }}</td>
                                        <td>{{ $notifi->created_at->format('Y-m-d') }}</td>
                                        <td>
                                            <button type="button" data-bs-toggle="modal" data-bs-target="#deleteModal"
                                                class="btn transparent-btn" data-user-id="{{ $notifi->id }}"
                                                onclick="setDeleteId(this)"><i class="fa-regular fa-trash-can delete-icon"
                                                    data-bs-toggle="tooltip" data-bs-placement="top"
                                                    data-bs-title="Delete"></i></button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                            <!--Delete Modal start-->

                            <div class="modal fade zoom-in" id="deleteModal" tabindex="-1"
                                aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-body">
                                            <div class="row">
                                                <div class="col-lg-12">
                                                    <div class="p-3">
                                                        <div class="text-center">
                                                            <img class="mb-3"
                                                                src="{{ asset('/assets') }}/images/icons/delete-icon.svg">
                                                            <p class="my-4 are-you-sure"></p>
                                                            <p class="text-muted my-2 are-you-sure-subtext">Are you sure
                                                                want to Delete this?</p>
                                                        </div>
                                                        <form action="{{ route('screen_delete') }}" method="POST"
                                                            enctype="multipart/form-data">
                                                            @csrf
                                                            <input type="hidden" id="delete_id" name="delete_id">
                                                            <div class="d-flex align-items-center mt-5 mb-3">
                                                                <button type="button" class="btn btn-light cancel-btn me-3"
                                                                    data-bs-dismiss="modal">Cancel</button>
                                                                <button type="submit" class="btn btn-primary yes-btn">
                                                                    <i class="fa-regular fa-circle-check me-2"></i>Yes,
                                                                    Delete
                                                                </button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--Delete Modal Ends-->
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


<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 setDeleteId(element) {
        const userId = element.getAttribute('data-user-id');
        document.getElementById('delete_id').value = userId;
        document.querySelector('.are-you-sure').textContent = `Are you sure you want to delete channel ID: ${userId}?`;
    }
</script>