@extends('layouts.app')
@section('content')
    <script src="{{ asset('js/parsley.min.js') }}"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/2.3.7/css/dataTables.dataTables.css" />
    <div>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard.alt') }}">Utama</a></li>
                <li class="breadcrumb-item active">Upload Banner</li>
            </ol>
        </nav>
        <div class="card shadow-sm border-0 rounded">
            <div class="card-body">
                <h5 class="card-title">Upload Banner</h5>

                <div class="mb-4">
                    @include('errors')

                    @if (session('success'))
                        <div class="alert alert-success alert-dismissible fade show col-md-8" role="alert">
                            {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    @if (session('error'))
                        <div class="alert alert-danger alert-dismissible fade show col-md-8" role="alert">
                            {{ session('error') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    <form action="{{ route('admin.students.storebanner') }}" method="POST" enctype="multipart/form-data"
                        data-parsley-validate>
                        @csrf
                        <div id="child-registration-forms">
                            <!-- Child Registration Form Template -->
                            <div class="child-registration-form">
                                <div class="mb-3">
                                    <!-- Rules Section -->
                                    <div class="rules bg-light p-3 mb-3 border rounded">
                                        <h5 class="fw-bold">Panduan Gambar</h5>
                                        <ul>
                                            <li><strong>Saiz Fail:</strong>
                                                <ul>
                                                    <li>Saiz maksimum gambar adalah <strong>5MB</strong> sahaja.</li>
                                                </ul>
                                            </li>
                                            <li><strong>Nisbah Gambar (Aspect Ratio):</strong>
                                                <ul>
                                                    <li>Gambar mestilah dalam nisbah <strong>21:9</strong>.</li>
                                                </ul>
                                            </li>
                                            <li><strong>Format Fail Dibenarkan</strong>
                                                <ul>
                                                    <li>JPEG, JPG, PNG, dan GIF</li>
                                                </ul>
                                            </li>
                                            <li><strong>Contoh Banner</strong><br>
                                                <img style="width: 50rem; border-radius: 20px;"
                                                    src="{{ asset('img/banner/sample-banner.jpg') }}" alt="Contoh Gambar">
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="row mt-4">
                                        <div class="col-6">
                                            <label for="banner_upload" class="form-label">
                                                Muatnaik Banner
                                                <span class="text-danger">*</span>
                                            </label>
                                            <input type="file" class="form-control" id="banner_upload"
                                                name="banner_upload" required accept=".jpeg,.jpg,.png"
                                                data-parsley-max-file-size="5120"
                                                data-parsley-required-message="Sila pilih banner."
                                                data-parsley-max-file-size-message="Saiz banner tidak boleh melebihi 5MB."
                                                data-parsley-trigger="change">
                                            <small class="text-muted">Saiz Banner maksimum: 5MB. Format: JPEG, JPG,
                                                PNG</small>
                                        </div>
                                    </div>
                                    <div class="row mt-4">
                                        <div class="col-6">
                                            <label for="daterange" class="form-label">Tarikh Mula - Tamat</label>
                                            <input type="text" class="form-control" id="daterange" name="daterange"
                                                required>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <br>
                        <div class="text-center">
                            <button type="submit"
                                class="btn btn-primary btn-lg px-4 py-2 mt-2 rounded-pill shadow-sm">Muatnaik
                                Banner</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="contohGambarModal" tabindex="-1" aria-labelledby="contohGambarModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="contohGambarModalLabel">Contoh Gambar</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <img src="{{ asset('img/photo-sample.jpg') }}" alt="Contoh Gambar" class="img-fluid rounded">
                    <p class="mt-3">Ini adalah contoh gambar untuk muat naik. <br> Sila rujuk panduan di atas.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Senarai Banner Terkini</h5>
            @if (session('banner-success'))
                <div class="alert alert-success alert-dismissible fade show">
                    {{ session('banner-success') }}
                </div>
            @endif

            @if (session('banner-error'))
                <div class="alert alert-danger alert-dismissible fade show">
                    {{ session('banner-error') }}
                </div>
            @endif
            <div class="table-responsive">
                <table class="table cell-border" id="bannerTable">
                    <thead>
                        <tr>
                            <th></th>
                            <th class="text-center">Banner Id</th>
                            <th class="text-center">Gambar Banner</th>
                            <th class="text-center">Tarikh Dimuatnaik</th>
                            <th class="text-center">Tarikh Mula</th>
                            <th class="text-center">Tarikh Tamat</th>
                            <th class="text-center">Status</th>
                            <th class="text-center">Tindakan</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <script src="{{ asset('js/parsley.min.js') }}"></script>
    <script src="{{ asset('js/ms.js') }}"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script src="https://cdn.datatables.net/2.3.7/js/dataTables.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {

            // ===== PARSLEY VALIDATION SETUP =====
            // Custom validator for file size
            window.Parsley.addValidator('maxFileSize', {
                validateString: function(_value, maxSizeKB, parsleyInstance) {
                    const files = parsleyInstance.$element[0].files;
                    if (files.length === 0) return true; // No file, let required handle it

                    const file = files[0];
                    const maxSizeBytes = maxSizeKB * 1024; // Convert KB to bytes

                    return file.size <= maxSizeBytes;
                },
                requirementType: 'integer',
                messages: {
                    en: 'File size must not exceed %s KB.',
                    ms: 'Saiz fail tidak boleh melebihi 10MB.'
                }
            });

            // Custom validator for file type
            window.Parsley.addValidator('fileType', {
                validateString: function(_value, allowedTypes, parsleyInstance) {
                    const files = parsleyInstance.$element[0].files;
                    if (files.length === 0) return true;

                    const file = files[0];
                    const allowedTypesArray = allowedTypes.split(',');

                    return allowedTypesArray.some(type =>
                        file.type === `image/${type.trim()}` ||
                        file.name.toLowerCase().endsWith(`.${type.trim()}`)
                    );
                },
                requirementType: 'string',
                messages: {
                    en: 'File must be of type: %s.',
                    ms: 'Gambar mestilah dalam format yang dibenarkan.'
                }
            });

            // Initialize Parsley on the form
            if ($('form[data-parsley-validate]').length) {
                $('form[data-parsley-validate]').parsley();
            }

            // ===== IMAGE PREVIEW FUNCTIONALITY =====
            const studentImageInput = document.getElementById('student_image');
            if (studentImageInput) {
                studentImageInput.addEventListener('change', function(e) {
                    const file = e.target.files[0];
                    if (file) {
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            // Remove existing preview
                            const existingPreview = document.getElementById('image-preview');
                            if (existingPreview) {
                                existingPreview.remove();
                            }

                            // Add new preview
                            const previewDiv = document.createElement('div');
                            previewDiv.id = 'image-preview';
                            previewDiv.className = 'mt-2';
                            previewDiv.innerHTML = `
                        <img src="${e.target.result}" style="max-width: 200px; max-height: 200px; border: 1px solid #ddd; padding: 5px;">
                        <p class="small text-muted mb-0">
                            ${file.name} (${(file.size / 1024 / 1024).toFixed(2)} MB)
                        </p>
                    `;

                            studentImageInput.parentNode.insertBefore(previewDiv, studentImageInput
                                .nextSibling);

                            // Trigger validation update
                            if (window.Parsley) {
                                $(studentImageInput).parsley().validate();
                            }
                        };
                        reader.readAsDataURL(file);
                    }
                });
            }
        });
    </script>
    <script>
        $(function() {
            $('input[name="daterange"]').daterangepicker({
                timePicker: true,
                startDate: moment().startOf('hour'),
                endDate: moment().startOf('hour').add(32, 'hour'),
                locale: {
                    format: 'DD/MM/YYYY hh:mm A'
                }
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            let table = new DataTable('#bannerTable', {
                ajax: '{{ route('banner.list') }}',
                dom: 'lrtp',
                columns: [{
                        className: 'dt-control',
                        orderable: false,
                        data: null,
                        defaultContent: ''
                    },
                    {
                        data: 'banner_id',
                        className: 'text-center'
                    },
                    {
                        data: 'file_path',
                        className: 'text-center',
                        render: function(data, type, row) {
                            return `<img src="${data}" style="height:100px; border-radius:10px;">`;
                        }
                    },
                    {
                        data: 'created_at',
                        className: 'text-center',
                        render: function(data) {
                            return formatDate(data);
                        }
                    },
                    {
                        data: 'start_date',
                        className: 'text-center',
                        render: function(data) {
                            return formatDate(data);
                        }
                    },
                    {
                        data: 'end_date',
                        className: 'text-center',
                        render: function(data) {
                            return formatDate(data);
                        }
                    },
                    {
                        data: 'status',
                        className: 'text-center',
                        render: function(data, type, row) {
                            if (data === '1') {
                                return '<span class="badge bg-success">Aktif</span>';
                            } else {
                                return '<span class="badge bg-secondary">Tidak Aktif</span>';
                            }
                        }
                    },
                    {
                        data: null,
                        className: 'text-center',
                        orderable: false,
                        render: function(data, type, row) {
                            return `
                                <form action="/banner/${row.banner_id}" method="POST" onsubmit="return confirm('Adakah anda pasti ingin memadam banner ini?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger btn-sm">Padam</button>
                                </form>`;
                        }
                    }
                ],
                order: [
                    [1, 'asc']
                ]
            });

            // Add event listener for opening and closing details
            table.on('click', 'tbody td.dt-control', function(e) {
                let tr = e.target.closest('tr');
                let row = table.row(tr);

                if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();
                } else {
                    // Open this row
                    row.child(format(row.data())).show();
                    $('.editdaterange').daterangepicker({
                        timePicker: true,
                        startDate: moment().startOf('hour'),
                        endDate: moment().startOf('hour').add(32, 'hour'),
                        locale: {
                            format: 'DD/MM/YYYY hh:mm A'
                        }
                    });
                }
            });
        })

        function format(d) {
            html = `<div class="row">
                    <div class="col-md-3">
                        <form action="{{ route('admin.banner.update') }}" method="post">
                            @csrf
                            <label for="editdaterange">Tarikh Mula - Tamat</label>
                            <input type="text" name="editdaterange" class="form-control editdaterange" value="${formatDate(d.start_date)} - ${formatDate(d.end_date)}" required>
                            <input type="hidden" name="banner_id" id="edit_banner_id" value="${d.banner_id}">
                            <button type="submit" class="btn btn-primary mt-2">Kemaskini Tarikh</button>
                        </form>
                    </div>
                </div>`;

            return html;
        }

        function formatDate(datetime) {
            if (!datetime) return '-';

            const date = new Date(datetime);

            const day = String(date.getDate()).padStart(2, '0');
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const year = date.getFullYear();

            let hours = date.getHours();
            const minutes = String(date.getMinutes()).padStart(2, '0');

            const ampm = hours >= 12 ? 'PM' : 'AM';
            hours = hours % 12;
            hours = hours ? hours : 12; // 0 → 12

            return `${day}/${month}/${year} ${hours}:${minutes} ${ampm}`;
        }
    </script>
@endsection