@extends('layouts.app')
@section('heading',$event->exists?'Configure Event':'Create Event')
@section('content')
<form method="post" action="{{ $event->exists?route('events.update',$event):route('events.store') }}" class="card mb-4">
    <div class="card-body">
        @csrf @if($event->exists)@method('put')@endif
        <div class="row">
            <div class="col-md-8 mb-3"><label class="form-label">Grand Launching Event Title</label><input name="title" value="{{ old('title',$event->title) }}" class="form-control" required></div>
            <div class="col-md-4 mb-3">
                <label class="form-label" for="scheduled_at">Date and Time</label>
                <div class="input-group datetime-input-group">
                    <input id="scheduled_at" type="datetime-local" name="scheduled_at" value="{{ old('scheduled_at',optional($event->scheduled_at)->format('Y-m-d\TH:i')) }}" class="form-control pegls-datetime-picker" required>
                    <button class="btn btn-outline-primary datetime-picker-button" type="button" data-picker-target="scheduled_at" aria-label="Open date and time picker">Date &amp; time</button>
                </div>
            </div>
            <div class="col-md-8 mb-3"><label class="form-label">Description</label><textarea name="description" class="form-control" rows="3">{{ old('description',$event->description) }}</textarea></div>
            <div class="col-md-2 mb-3"><label class="form-label">Required VIPs</label><input type="number" name="required_vip_count" value="{{ old('required_vip_count',$event->required_vip_count?:1) }}" min="1" class="form-control" required></div>
            <div class="col-md-2 mb-3"><label class="form-label">VIP View</label><select name="orientation" class="form-select"><option value="landscape" @selected($event->orientation==='landscape')>Landscape</option><option value="portrait" @selected($event->orientation==='portrait')>Portrait</option></select></div>
        </div>
        <button class="btn btn-primary">Save Event</button>
    </div>
</form>

@if($event->exists)
<div class="card mb-4">
    <div class="card-header"><h3 class="card-title">VIPs for this Event</h3></div>
    <div class="card-body">
        <p class="text-secondary">Assign the actual VIP accounts allowed to activate this event. At least <strong>{{ $event->required_vip_count }}</strong> must be assigned before publishing.</p>
        @error('vip_ids')<div class="alert alert-danger py-2">{{ $message }}</div>@enderror
        <form method="post" action="{{ route('events.vips.update',$event) }}">@csrf @method('put')
            @if($vips->isNotEmpty())
            <div class="vip-list-controls">
                <div class="vip-search-box"><span aria-hidden="true">⌕</span><input id="vip-search" type="search" class="form-control" placeholder="Search VIP by name, username or email…" autocomplete="off"></div>
                <div class="vip-list-summary"><strong id="vip-selected-count">{{ $event->assignedVips->count() }}</strong> selected <span>·</span> <strong id="vip-result-count">{{ $vips->count() }}</strong> VIPs</div>
            </div>
            @endif
            @if($vips->isNotEmpty())
            <div class="table-responsive vip-table-shell mb-0">
                <table id="vip-list" class="table pegls-table vip-assignment-table align-middle mb-0" data-page-size="10">
                    <thead>
                        <tr>
                            <th class="vip-select-column" scope="col">Select</th>
                            <th scope="col">VIP Name</th>
                            <th scope="col">Username</th>
                            <th scope="col">Email</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($vips as $vip)
                        <tr class="vip-listing-item @if($event->assignedVips->contains($vip->id)) is-selected @endif" data-vip-search="{{ strtolower($vip->name.' '.$vip->username.' '.$vip->email) }}">
                            <td class="vip-select-cell">
                                <input class="form-check-input vip-select-checkbox" type="checkbox" name="vip_ids[]" value="{{ $vip->id }}" aria-label="Select {{ $vip->name }}" @checked($event->assignedVips->contains($vip->id))>
                            </td>
                            <td><strong class="vip-name">{{ $vip->name }}</strong></td>
                            <td><span class="vip-username">{{ '@'.$vip->username }}</span></td>
                            <td><span class="vip-email">{{ $vip->email }}</span></td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @else
            <div class="alert alert-warning mb-0">No active VIP accounts are available. Superadmin must create a VIP account first.</div>
            @endif
            @if($vips->isNotEmpty())
            <div id="vip-no-results" class="vip-no-results d-none">No VIP accounts match your search.</div>
            <div class="vip-pager mb-3" aria-label="VIP list pagination">
                <span id="vip-page-info">Showing VIPs</span>
                <div class="vip-page-controls">
                    <button id="vip-prev" type="button" class="btn btn-sm btn-outline-secondary">← Previous</button>
                    <div id="vip-pages" class="vip-page-numbers" aria-label="VIP pages"></div>
                    <button id="vip-next" type="button" class="btn btn-sm btn-outline-secondary">Next →</button>
                </div>
            </div>
            @endif
            @if($vips->isNotEmpty())<button class="btn btn-outline-primary">Save VIP Assignments</button>@endif
        </form>
    </div>
</div>

<div class="card mb-4">
    <div class="card-header"><h3 class="card-title">Presentation Assets</h3></div>
    <div class="card-body">
        <form id="asset-chunk-upload-form" method="post" action="{{ route('events.assets.store',$event) }}" enctype="multipart/form-data" class="row align-items-end mb-4">@csrf
            <div class="col-md-8"><label class="form-label">Video, Image or PDF Files</label><input id="asset-files" type="file" name="files[]" multiple class="form-control" accept="video/mp4,video/quicktime,video/webm,image/png,image/jpeg,image/gif,application/pdf" required><small class="text-secondary d-block mt-2">MP4, MOV, WebM, JPG, PNG, GIF or PDF. Maximum <strong>500 MB per file</strong>. Large files are automatically uploaded in small hosting-safe parts and stored in private Laravel storage.</small></div>
            <div class="col-md-2"><label class="form-label">Default Timer, seconds</label><input id="asset-duration-default" type="number" name="duration_seconds" value="10" min="1" max="3600" class="form-control" required></div>
            <div class="col-md-2"><button id="asset-upload-button" class="btn btn-success w-100">Upload Assets</button></div>
            <div class="col-12">
                <div id="asset-upload-progress" class="upload-progress-panel d-none" aria-live="polite">
                    <div class="upload-progress-copy"><span id="asset-upload-status">Preparing upload…</span><strong id="asset-upload-percent">0%</strong></div>
                    <div class="progress" role="progressbar" aria-label="Asset upload progress" aria-valuemin="0" aria-valuemax="100"><div id="asset-upload-bar" class="progress-bar" style="width:0%"></div></div>
                    <small id="asset-upload-detail">Keep this page open until the upload is complete.</small>
                </div>
            </div>
        </form>
        @error('files')<div class="alert alert-danger py-2">{{ $message }}</div>@enderror
        <p class="text-secondary">Drag the cards to arrange the running sequence. Change each timer, then click Save Order.</p>
        <div id="asset-list" class="row g-3">
            @foreach($event->assets as $asset)
            <div class="col-md-4 asset-card" data-id="{{ $asset->id }}"><div class="card h-100"><div class="card-body">
                <div class="d-flex align-items-center justify-content-between gap-2"><span class="badge text-bg-info">{{ strtoupper($asset->type) }}</span><a href="{{ route('events.assets.preview',[$event,$asset]) }}" target="_blank" rel="noopener" class="btn btn-sm btn-outline-primary">Preview</a></div><p class="mt-2 text-truncate">{{ $asset->original_name }}</p>
                <label class="form-label">Timer, seconds</label><input type="number" class="form-control asset-duration" value="{{ $asset->duration_seconds }}" min="1"><small class="drag-handle text-secondary d-block mt-2">Drag to reorder</small>
            </div><div class="card-footer"><button type="button" class="btn btn-sm btn-outline-danger asset-remove-button" data-remove-url="{{ route('events.assets.destroy',[$event,$asset]) }}" data-file-name="{{ $asset->original_name }}">Remove</button></div></div></div>
            @endforeach
        </div>
        <button id="save-order" class="btn btn-outline-primary mt-3" type="button">Save Order</button>
    </div>
</div>

<div class="card mb-4"><div class="card-body">
    <div class="d-flex flex-wrap align-items-center gap-2">
        <span class="badge {{ $event->status==='draft'?'text-bg-secondary':($event->status==='cancelled'?'text-bg-danger':'text-bg-success') }}">{{ ucfirst($event->status) }}</span>
        <span class="text-secondary small">VIP progress: <strong>{{ $event->activationCount() }} / {{ $event->required_vip_count }}</strong></span>

        @if($event->status==='draft')
            @php($canPublish=$event->assignedVips->count()>=$event->required_vip_count && $event->assets->isNotEmpty())
            <form method="post" action="{{ route('events.publish',$event) }}">@csrf<button class="btn btn-info" @disabled(!$canPublish)>Publish Event</button></form>
            @if(!$canPublish)<span class="text-secondary small">Assign enough VIPs and add at least one presentation asset to publish.</span>@endif
        @endif

        @if(in_array($event->status,['published','activating']))
            @role('Superadmin')<a href="{{ route('vip.presentation',$event) }}" target="_blank" rel="noopener" class="btn btn-primary">Open Presentation Screen</a>@endrole
            @role('Superadmin')<form method="post" action="{{ route('events.reset-activations',$event) }}" onsubmit="return confirm('Rehearsal Reset will clear ALL VIP activations and return progress to 0 / {{ $event->required_vip_count }}. Continue?')">@csrf<button class="btn btn-outline-warning">Rehearsal Reset</button></form>@endrole
            <form method="post" action="{{ route('events.complete',$event) }}" onsubmit="return confirm('Mark this event as completed? The required VIP count must already be reached.')">@csrf<button class="btn btn-success">Done Grand Launching</button></form>
        @endif

        @if($event->status==='completed')
            @role('Superadmin')<form method="post" action="{{ route('events.reset-activations',$event) }}" onsubmit="return confirm('Reset this completed event for another rehearsal/run? All VIP activations will be cleared.')">@csrf<button class="btn btn-outline-warning">Reset for Another Run</button></form>@endrole
        @endif

        @if($event->status!=='draft')
            @role('Superadmin')<form method="post" action="{{ route('events.unpublish',$event) }}" onsubmit="return confirm('Return this event to Draft? Any existing VIP activation progress will be cleared.')">@csrf<button class="btn btn-outline-secondary">Return to Draft</button></form>@endrole
        @endif

        @if(!in_array($event->status,['cancelled','completed']))
            <form method="post" action="{{ route('events.cancel',$event) }}" onsubmit="return confirm('Cancel this event? VIP activation progress will be cleared.')">@csrf<button class="btn btn-outline-danger">Cancel Event</button></form>
        @endif

        <form method="post" action="{{ route('events.destroy',$event) }}" class="ms-auto" onsubmit="return confirm('Archive {{ addslashes($event->title) }}? It will be removed from the active event list.')">@csrf @method('delete')<button class="btn btn-outline-danger">Archive Event</button></form>
    </div>
</div></div>
@endif
@endsection

@push('scripts')
@if($event->exists)
<script>
window.assetOrderUrl=@json(route('events.assets.order',$event));
(() => {
    const form=document.getElementById('asset-chunk-upload-form');
    if(!form)return;
    const input=document.getElementById('asset-files');
    const durationInput=document.getElementById('asset-duration-default');
    const button=document.getElementById('asset-upload-button');
    const panel=document.getElementById('asset-upload-progress');
    const bar=document.getElementById('asset-upload-bar');
    const percent=document.getElementById('asset-upload-percent');
    const status=document.getElementById('asset-upload-status');
    const detail=document.getElementById('asset-upload-detail');
    const csrf=document.querySelector('meta[name="csrf-token"]')?.content||'';
    // Use the original asset POST route for both chunk steps. This works even when
    // a shared-hosting/cPanel deployment still has an older Laravel route cache.
    const assetPostUrl=@json(route('events.assets.store',$event));
    const CHUNK_SIZE=1024*1024;
    const MAX_SIZE=500*1024*1024;
    const allowed=/\.(mp4|mov|webm|jpe?g|png|gif|pdf)$/i;

    const formatBytes=bytes=>bytes>=1024*1024?`${(bytes/(1024*1024)).toFixed(1)} MB`:`${Math.max(1,Math.round(bytes/1024))} KB`;
    const id=()=>window.crypto?.randomUUID?.().replaceAll('-','')||(`${Date.now()}_${Math.random().toString(36).slice(2)}_${Math.random().toString(36).slice(2)}`).replace(/[^A-Za-z0-9_]/g,'');
    const errorText=async response=>{
        let data={};
        try{data=await response.json();}catch(_e){}
        const validation=Object.values(data.errors||{}).flat()[0];
        if(validation)return validation;
        if(response.status===413)return 'The server rejected an upload part. Increase PHP upload_max_filesize/post_max_size to at least 2M, then retry.';
        if(response.status===419)return 'Your session expired. Refresh the page, sign in again if requested, then retry.';
        return data.message||`Upload failed (server response ${response.status}).`;
    };
    const setProgress=(pct,label,more)=>{
        panel?.classList.remove('d-none');
        const value=Math.max(0,Math.min(100,Math.round(pct)));
        if(bar)bar.style.width=`${value}%`;
        if(percent)percent.textContent=`${value}%`;
        if(status)status.textContent=label;
        if(detail)detail.textContent=more;
    };

    form.addEventListener('submit',async event=>{
        event.preventDefault();
        const files=[...(input?.files||[])];
        if(!files.length)return;
        const invalid=files.find(file=>!allowed.test(file.name));
        if(invalid){alert(`${invalid.name}: unsupported file type.`);return;}
        const tooLarge=files.find(file=>file.size>MAX_SIZE);
        if(tooLarge){alert(`${tooLarge.name} is ${formatBytes(tooLarge.size)}. Maximum size is 500 MB per file.`);return;}
        const duration=Math.max(1,Math.min(3600,Number(durationInput?.value)||10));
        const grandTotal=files.reduce((sum,file)=>sum+file.size,0);
        let completedBytes=0;
        button.disabled=true;

        try{
            for(let fileIndex=0;fileIndex<files.length;fileIndex++){
                const file=files[fileIndex];
                const uploadId=id();
                const totalChunks=Math.max(1,Math.ceil(file.size/CHUNK_SIZE));
                for(let chunkIndex=0;chunkIndex<totalChunks;chunkIndex++){
                    const start=chunkIndex*CHUNK_SIZE;
                    const end=Math.min(file.size,start+CHUNK_SIZE);
                    const body=new FormData();
                    body.append('upload_id',uploadId);
                    body.append('file_name',file.name);
                    body.append('file_size',String(file.size));
                    body.append('chunk_index',String(chunkIndex));
                    body.append('total_chunks',String(totalChunks));
                    body.append('_asset_action','chunk');
                    body.append('chunk',file.slice(start,end),`${file.name}.part`);
                    setProgress((completedBytes/grandTotal)*100,`Uploading ${file.name} · part ${chunkIndex+1}/${totalChunks}`,`${fileIndex+1} of ${files.length} file(s) · ${formatBytes(completedBytes)} of ${formatBytes(grandTotal)}`);
                    const response=await fetch(assetPostUrl,{method:'POST',headers:{'X-CSRF-TOKEN':csrf,'Accept':'application/json'},credentials:'same-origin',body});
                    if(!response.ok)throw new Error(await errorText(response));
                    completedBytes+=end-start;
                    setProgress((completedBytes/grandTotal)*100,`Uploading ${file.name} · part ${chunkIndex+1}/${totalChunks}`,`${formatBytes(completedBytes)} of ${formatBytes(grandTotal)} transferred`);
                }

                setProgress((completedBytes/grandTotal)*100,`Finishing ${file.name}…`,'Joining uploaded parts and checking the file.');
                const response=await fetch(assetPostUrl,{method:'POST',headers:{'X-CSRF-TOKEN':csrf,'Accept':'application/json','Content-Type':'application/json'},credentials:'same-origin',body:JSON.stringify({_asset_action:'complete',upload_id:uploadId,file_name:file.name,file_size:file.size,mime_type:file.type,total_chunks:totalChunks,duration_seconds:duration})});
                if(!response.ok)throw new Error(await errorText(response));
            }
            setProgress(100,'Upload complete','Presentation assets are ready. Refreshing the list…');
            setTimeout(()=>window.location.reload(),450);
        }catch(error){
            button.disabled=false;
            setProgress((completedBytes/Math.max(1,grandTotal))*100,'Upload failed',error.message||'Upload failed. Please retry.');
        }
    });

    document.querySelectorAll('.asset-remove-button').forEach(removeButton=>{
        removeButton.addEventListener('click',async()=>{
            const name=removeButton.dataset.fileName||'this asset';
            if(!confirm(`Remove ${name}?`))return;
            removeButton.disabled=true;
            const original=removeButton.textContent;
            removeButton.textContent='Removing…';
            try{
                const body=new FormData();
                body.append('_method','DELETE');
                body.append('_token',csrf);
                const response=await fetch(removeButton.dataset.removeUrl,{method:'POST',headers:{'X-CSRF-TOKEN':csrf,'Accept':'application/json'},credentials:'same-origin',body});
                if(!response.ok)throw new Error(await errorText(response));
                removeButton.closest('.asset-card')?.remove();
            }catch(error){
                removeButton.disabled=false;
                removeButton.textContent=original;
                alert(error.message||'Asset could not be removed.');
            }
        });
    });
})();
</script>
@endif
@endpush