@extends('backend.app')

@section('title', 'Raffle Draw')

@push('style')
<style>
    .status-badge {
        color: #fff;
        font-weight: 600;
        padding: 6px 10px;
        border-radius: 999px;
        display: inline-block;
        min-width: 108px;
        text-align: center;
        font-size: 12px;
    }

    .status-pending {
        background: #E1712B;
    }

    .status-upcoming {
        background: #6c757d;
    }

    .status-in-progress {
        background: #0d6efd;
    }

    .status-completed {
        background: #4CAF50;
    }

    #live-link-setter-modal .modal-body {
        color: black;
    }
    
</style>
@endpush

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Raffle Draw</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">Raffle Draw</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 align-middle">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Property</th>
                                <th>Status</th>
                                <th>Sold Tickets</th>
                                <th>Winner</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($raffles as $raffle)
                                @php
                                    $statusClass = match($raffle->status) {
                                        'pending' => 'status-pending',
                                        'upcoming' => 'status-upcoming',
                                        'in_progress' => 'status-in-progress',
                                        'completed' => 'status-completed',
                                        default => 'status-upcoming',
                                    };
                                @endphp
                                <tr>
                                    <td>{{ $raffle->id }}</td>
                                    <td>{{ $raffle->property->title ?? 'N/A' }}</td>
                                    <td>
                                        <span class="status-badge {{ $statusClass }}">
                                            {{ ucwords(str_replace('_', ' ', $raffle->status)) }}
                                        </span>
                                    </td>
                                    <td>{{ $raffle->active_tickets_count }}</td>
                                    <td>{{ $raffle->winner->name ?? 'N/A' }}</td>
                                    <td>
                                        <a href="{{ route('admin.raffle.draw.show', ['id' => $raffle->id]) }}?get-urls=yes" class="btn btn-sm btn-primary" target="_blank">
                                            Open Draw Screen
                                        </a>
                                        <button type="button" class="btn btn-sm btn-secondary" data-bs-toggle="modal" data-bs-target="#live-link-setter-modal" data-raffle-id="{{ $raffle->id }}">
                                            Set Live Link
                                        </button>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center text-muted">No raffle found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="live-link-setter-modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content custom-modal">
            <div class="modal-header border-bottom-0">
                <h5 class="modal-title d-flex align-items-center">
                    <i class="fe fe-video me-2 text-primary"></i> Set Live Stream
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            
            <form id="live-link-form" method="POST">
                @csrf
                <input type="hidden" name="raffle_id" id="live-link-raffle-id">
                
                <div class="modal-body py-4">
                    <p class="text-muted mb-4 small">Enter the YouTube URL for the live draw. This link will be visible to participants once saved.</p>
                    
                    <div class="form-group mb-0">
                        <label for="live-link-input" class="form-label fw-bold">YouTube URL</label>
                        <div class="input-group">
                            <span class="input-group-text bg-light border-end-0">
                                <i class="fa fa-youtube-play text-danger"></i>
                            </span>
                            <input type="url" 
                                   class="form-control border-start-0 p-3 ps-0" 
                                   id="live-link-input" 
                                   name="live_stream_url" 
                                   placeholder="https://www.youtube.com/watch?v=..." 
                                   value="{{ $raffle?->liveStream?->live_stream_url ?? '' }}"
                                   required>
                        </div>
                        <div class="invalid-feedback" id="url-error"></div>
                    </div>
                </div>

                <div class="modal-footer border-top-0">
                    <button type="button" class="btn btn-light px-4" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary px-4 shadow-sm" id="save-link-btn">
                        Save Link
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection


@push('scripts')
    <script>
        $(document).ready(function() {
            $('#live-link-setter-modal').on('show.bs.modal', function(event) {
                var button = $(event.relatedTarget);
                var raffleId = button.data('raffle-id');
                $('#live-link-raffle-id').val(raffleId);

                var url = "{{ route('admin.raffle.draw.set_url', ':id') }}";
                url = url.replace(':id', raffleId);
                $('#live-link-form').attr('action', url);
            });
        });
    </script>
@endpush