@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>
    /* Table Header Styling */

    .upload-card {
        max-width: 500px;
        margin: 0 auto 40px;
        border-radius: 12px;
    }

    .upload-area {
        border: 2px dashed #ccc;
        border-radius: 8px;
        padding: 40px 20px;
        text-align: center;
        background: #fff;
        cursor: pointer;
    }

    .upload-area:hover {
        border-color: #1a99d5;
    }

    .upload-icon {
        font-size: 2.5rem;
        color: #333;
    }

    .btn-submit {
        background-color: #1a99d5;
        color: white;
        width: 100%;
        padding: 10px;
        border-radius: 8px;
        font-weight: 500;
    }


    .poster-img {
        width: 80px;
        height: 40px;
        object-fit: cover;
        border-radius: 4px;
    }

    .btn-delete {
        color: #ff4d4f;
        font-size: 1.2rem;
        cursor: pointer;
        border: none;
        background: none;
    }

    .upload-area {
        border: 2px dashed #f9b198;
        border-radius: 12px;
        padding: 30px;
        text-align: center;
        position: relative;
        transition: 0.3s;
        min-height: 220px;

        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .upload-area:hover {
        border-color: #6366f1;
        background: #f9fafb;
    }

    .upload-icon {
        font-size: 40px;
        color: #6366f1;
    }

    /* Preview Image */
    .preview-img {
        display: none;
        max-width: 100%;
        max-height: 180px;
        object-fit: contain;
        border-radius: 10px;
    }
</style>

<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;
    }

    .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">Posters</h5>

        <form action="{{ route('admin.add_posters') }}" method="POST" enctype="multipart/form-data" id="SubmitForm">
            @csrf

            <div class="card upload-card shadow-sm border-0">
                <div class="container text-center">


                    <div class="section-title mt-1">
                        <span><i class="ti tabler-photo icon-base me-1"></i>Personal Details</span>
                    </div>
                    <div class="col-lg-12 mb-3 text-start">
                        <label class="form-label">Display</label>
                        <select class="form-select bliss @error('display') is-invalid @enderror" name="display" required>
                            <option value="">--Select--</option>

                            <option value="login" {{ old('display') == 'login' ? 'selected' : '' }}>
                                Login
                            </option>

                            <option value="dashboard" {{ old('display') == 'dashboard' ? 'selected' : '' }}>
                                Dashboard
                            </option>
                        </select>

                        @error('display')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="upload-area mb-3 text-center p-4 rounded position-relative"
                        onclick="document.getElementById('fileInput').click();" id="uploadArea"
                        style="cursor:pointer; overflow:hidden;">

                        <!-- Default Content -->
                        <div id="uploadContent">
                            <i class="ti tabler-upload upload-icon" style="font-size:40px;"></i>
                            <h5 class="mt-2">Upload Posters</h5>

                            <p class="text-muted small">
                                Choose photo size should be less than <br>
                                <strong>2 MB</strong> and should be in <strong>Jpg, Png, JPEG</strong> Format.
                            </p>
                        </div>

                        <!-- Preview Image -->
                        <img id="previewImg" src="" class="img-fluid rounded"
                            style="display:none; max-height:200px; object-fit:contain;">

                        <!-- Hidden File Input -->
                        <input type="file" name="posters_image" id="fileInput" accept=".jpg,.jpeg,.png" style="display:none"
                            required onchange="previewImage(event)">
                    </div>

                    <!-- Submit Button -->
                    <div class="text-center">
                        <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>POSTERS</th>
                                <th>Display</th>
                                <th>ACTION</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>



        <div class="modal fade" id="deletePosterModal" 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 poster?</p>

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


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

                        <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>

    <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>
    <!-- jQuery -->

    <!-- DataTables -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {
            const data = [{
                sno: 1,
                date: '11/02/2024',
                img: 'https://via.placeholder.com/80x40/800000/FFFFFF'
            },
            {
                sno: 1,
                date: '11/02/2024',
                img: 'https://via.placeholder.com/80x40/800000/FFFFFF'
            },
            {
                sno: 1,
                date: '11/02/2024',
                img: 'https://via.placeholder.com/80x40/800000/FFFFFF'
            }
            ];

            $('#usersTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('admin.poster_table_data') }}",

                columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },

                {
                    data: 'created_at',
                    name: 'created_at'
                },

                {
                    data: 'posters_image',
                    name: 'posters_image',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'display',
                    name: 'display',
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                }
                ]
            });
        });
    </script>

    <script>
        function previewImage(event) {
            const file = event.target.files[0];

            if (!file) return;

            // Validation (important)
            const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg'];
            if (!allowedTypes.includes(file.type)) {
                alert('Invalid file type');
                return;
            }

            if (file.size > 2 * 1024 * 1024) {
                alert('File size must be less than 2MB');
                return;
            }

            const reader = new FileReader();

            reader.onload = function (e) {
                const previewImg = document.getElementById('previewImg');
                const uploadContent = document.getElementById('uploadContent');

                previewImg.src = e.target.result;
                previewImg.style.display = 'block';

                // Hide text content
                uploadContent.style.display = 'none';
            };

            reader.readAsDataURL(file);
        }
    </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');

            // put id into hidden field
            $('#deletePosterId').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>
@endsection