@extends('backend.app')

@section('title', 'Winner List')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Winner List</h1>
    </div>
    <div class="ms-auto pageheader-btn">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li>
            <li class="breadcrumb-item active" aria-current="page">Winners</li>
        </ol>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered text-nowrap border-bottom w-100" id="datatable">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Raffle</th>
                                <th>Property</th>
                                <th>Winner Ticket</th>
                                <th>Draw Date</th>
                                <th>Winner</th>
                                <th>Notified</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="winnerModal" tabindex="-1" aria-labelledby="winnerModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="winnerModalLabel">Raffle Winner</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <div class="fw-semibold" id="winnerModalRaffleName">Raffle</div>
                    <div class="text-muted" id="winnerModalPropertyName">Property</div>
                </div>

                <form id="winnerForm" enctype="multipart/form-data">
                    <input type="hidden" id="winnerRaffleId" name="raffle_id">

                    <div class="mb-3">
                        <label class="form-label" for="winner_name">Winner Name</label>
                        <input type="text" class="form-control" id="winner_name" name="winner_name" maxlength="255" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label" for="avatar">Winner Image</label>
                        <input type="file" class="form-control" id="avatar" name="avatar" accept="image/*">
                        <small class="text-muted">Optional. jpg, jpeg, png, gif, webp (max 5MB)</small>
                    </div>

                    <div class="mb-3 d-flex align-items-center gap-2">
                        <img id="winnerAvatarPreview" src="{{ asset('frontend/default-avatar-profile.jpg') }}" alt="Winner" width="48" height="48" style="border-radius:50%;object-fit:cover;border:1px solid #ddd;">
                        <span class="text-muted">Current winner image</span>
                    </div>

                    <div class="d-flex justify-content-end gap-2">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Save Winner</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function () {
        const winnerModal = new bootstrap.Modal(document.getElementById('winnerModal'));

        $.ajaxSetup({
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
            }
        });

        if (!$.fn.DataTable.isDataTable('#datatable')) {
            $('#datatable').DataTable({
                order: [],
                lengthMenu: [
                    [10, 25, 50, 100, -1],
                    [10, 25, 50, 100, "All"]
                ],
                processing: true,
                responsive: true,
                serverSide: true,
                paging: true,
                language: {
                    processing: `<div class="text-center">
                        <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>`
                },
                pagingType: "full_numbers",
                dom: "<'row justify-content-between table-topbar'<'col-md-2 col-sm-4 px-0'l><'col-md-2 col-sm-4 px-0'f>>tipr",
                ajax: {
                    url: "{{ route('admin.winner.index') }}",
                    type: "GET",
                },
                columns: [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'raffle_name', name: 'raffle_name', orderable: false },
                    { data: 'property_name', name: 'property_name', orderable: false },
                    { data: 'winner_ticket', name: 'winner_ticket', orderable: false },
                    { data: 'draw_date', name: 'draw_date' },
                    { data: 'winner', name: 'winner', orderable: false, searchable: false },
                    { data: 'notified', name: 'notified', orderable: true, searchable: true },
                    { data: 'status', name: 'status', orderable: false, searchable: false },
                    { data: 'action', name: 'action', orderable: false, searchable: false },
                ],
            });
        }

        $('#avatar').on('change', function (e) {
            const file = e.target.files[0];
            if (!file) {
                return;
            }

            const reader = new FileReader();
            reader.onload = function (evt) {
                $('#winnerAvatarPreview').attr('src', evt.target.result);
            };
            reader.readAsDataURL(file);
        });
    
        $(document).on('click', '.notify-button', function(){
            const $btn = $(this);
            $btn.prop('disabled', true).text('Notifying...');
            const raffleId = $btn.data('id');
            const url = '{{ route('admin.winner.notify', ':id') }}'.replace(':id', raffleId);
            $.ajax({
                type: 'POST',
                url,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (resp) {
                    if (resp.success) {
                        toastr.success(resp.message || 'Winner notified successfully.');
                        $('#datatable').DataTable().ajax.reload(null, false);
                    } else {
                        toastr.error(resp.message || 'Failed to notify winner.');
                        $btn.prop('disabled', false).text('Notify?');
                    }
                },
                error: function () {
                    toastr.error('Failed to notify winner. Please try again.');
                    $btn.prop('disabled', false).text('Notify?');
                }
            });
        });

        $(document).on('click', '.js-set-winner', function () {
            const raffleId = $(this).data('id');
            const url = '{{ route('admin.winner.show', ':id') }}'.replace(':id', raffleId);

            $.ajax({
                type: 'GET',
                url,
                success: function (resp) {
                    if (!resp.success) {
                        toastr.error('Unable to load winner details.');
                        return;
                    }

                    const data = resp.data;
                    $('#winnerRaffleId').val(data.id);
                    $('#winnerModalRaffleName').text(data.raffle_name || 'Raffle');
                    $('#winnerModalPropertyName').text(data.property_name || 'N/A');
                    $('#winner_name').val(data.winner_name || '');
                    $('#avatar').val('');
                    $('#winnerAvatarPreview').attr('src', data.avatar_url || '{{ asset('frontend/default-avatar-profile.jpg') }}');

                    winnerModal.show();
                },
                error: function () {
                    toastr.error('Unable to load winner details.');
                }
            });
        });

        $('#winnerForm').on('submit', function (e) {
            e.preventDefault();

            const raffleId = $('#winnerRaffleId').val();
            const url = '{{ route('admin.winner.set_winner', ':id') }}'.replace(':id', raffleId);
            const formData = new FormData(this);

            $.ajax({
                type: 'POST',
                url,
                data: formData,
                processData: false,
                contentType: false,
                success: function (resp) {
                    if (resp.success) {
                        toastr.success(resp.message || 'Winner updated successfully.');
                        winnerModal.hide();
                        $('#datatable').DataTable().ajax.reload(null, false);
                    } else {
                        toastr.error(resp.message || 'Unable to update winner.');
                    }
                },
                error: function (xhr) {
                    if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                        const firstError = Object.values(xhr.responseJSON.errors)[0];
                        toastr.error(Array.isArray(firstError) ? firstError[0] : 'Validation failed.');
                        return;
                    }

                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        toastr.error(xhr.responseJSON.message);
                        return;
                    }

                    toastr.error('Unable to update winner.');
                }
            });
        });
    });

    const statusOptions = [
        { value: 'pending', label: 'Pending', color: '#E1712B' },
        { value: 'upcoming', label: 'Upcoming', color: '#6c757d' },
        { value: 'in_progress', label: 'In Progress', color: '#0d6efd' },
        { value: 'completed', label: 'Completed', color: '#4CAF50' },
    ];

    $(document).on('click', '.raffle-status-badge', function () {
        let badge = $(this);
        let raffleId = badge.data('id');
        let currentStatus = badge.data('status');

        let buttonsHtml = '<div style="display:flex;flex-direction:column;gap:10px;margin-top:8px;">';
        statusOptions.forEach(function (opt) {
            let isActive = opt.value === currentStatus;
            let outline = isActive ? 'outline:3px solid ' + opt.color + ';outline-offset:2px;' : '';
            let opacity = isActive ? 'opacity:0.7;' : '';
            buttonsHtml += '<button type="button" class="swal-status-btn" data-value="' + opt.value + '" ' +
                'style="background:' + opt.color + ';color:#fff;border:none;padding:12px 20px;border-radius:8px;' +
                'font-size:15px;font-weight:600;cursor:pointer;transition:all 0.2s;' + outline + opacity +
                'display:flex;align-items:center;justify-content:center;gap:8px;">' +
                opt.label +
                (isActive ? ' <span style="font-size:12px;opacity:0.8;">(current)</span>' : '') +
                '</button>';
        });
        buttonsHtml += '</div>';

        Swal.fire({
            title: 'Change Raffle Status',
            html: buttonsHtml,
            showConfirmButton: false,
            showCancelButton: true,
            cancelButtonText: 'Cancel',
            cancelButtonColor: '#6c757d',
            customClass: {
                popup: 'swal-status-popup'
            },
            didOpen: function () {
                document.querySelectorAll('.swal-status-btn').forEach(function (btn) {
                    btn.addEventListener('mouseenter', function () {
                        if (this.dataset.value !== currentStatus) {
                            this.style.transform = 'scale(1.03)';
                            this.style.boxShadow = '0 4px 15px rgba(0,0,0,0.2)';
                        }
                    });
                    btn.addEventListener('mouseleave', function () {
                        this.style.transform = 'scale(1)';
                        this.style.boxShadow = 'none';
                    });
                    btn.addEventListener('click', function () {
                        let newStatus = this.dataset.value;
                        if (newStatus === currentStatus) {
                            Swal.close();
                            return;
                        }
                        updateRaffleStatus(raffleId, newStatus);
                        Swal.close();
                    });
                });
            }
        });
    });

    function updateRaffleStatus(raffleId, newStatus) {
        let statusUrl = '{{ route('admin.winner.status', ':id') }}'.replace(':id', raffleId);

        $.ajax({
            type: 'PATCH',
            url: statusUrl,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: { status: newStatus },
            success: function (resp) {
                if (resp.success) {
                    toastr.success(resp.message || 'Status updated successfully.');
                    $('#datatable').DataTable().ajax.reload(null, false);
                } else {
                    toastr.error(resp.message || 'Failed to update status.');
                }
            },
            error: function () {
                toastr.error('Failed to update status. Please try again.');
            }
        });
    }
</script>
@endpush

@push('style')
<style>
    .raffle-status-badge:hover {
        opacity: 0.85 !important;
        transform: scale(1.05);
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        transition: all 0.2s ease;
    }

    .btn-notify-hover {
        transition: all 0.2s ease-in-out;
    }

    .btn-notify-hover:hover {
        /* Lighter background: Bootstrap primary is #0d6efd. A lighter version is roughly #4285f4 or similar */
        background-color: #4285f4 !important; 
        /* Darker text: Ensure contrast */
        color: #fff !important; /* Keep white or make darker if bg is very light */
        /* If you want darker text specifically: */
        /* color: #000 !important; */
        /* But usually, lighter bg + white text is standard. If you want darker text, bg must be very light. */
        
        /* Let's stick to: Lighter Blue Background, White Text (standard hover) */
        /* Or if you strictly want "text darker": */
        background-color: #e7f1ff !important; /* Very light blue */
        color: #084298 !important; /* Darker blue text */
        border-color: #084298 !important;
    }
</style>

@endpush