@extends('admin.layouts.app')
@section('content')
<section class="forms">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <form id="frmAddUpdate" name="frmAddUpdate" action="{!! $media->id ? route('admin.'.request()->segment(2).'.update') : route('admin.'.request()->segment(2).'.store') !!}" method="POST" class="form-horizontal" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="id" value="{!! $media->id !!}">
                    <div class="col-lg-06">
                        <div class="card">
                            <div class="card-body">
                                <div class="form-group row">
                                    <div class="col-md-6">
                                        <label class="form-control-label">Title</label>
                                        <input type="text" name="title" id="title" placeholder="Enter media title" class="form-control" value="{!! old('title') ?? $media->title !!}">
                                        @error('title')
                                        <span class="error" role="alert">{!! $message !!}</span>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-control-label">Alt Tag Text</label>
                                        <input type="text" name="alt" id="alt" placeholder="Enter media alt tag text" class="form-control" value="{!! old('alt') ?? $media->alt !!}">
                                        @error('alt')
                                        <span class="error" role="alert">{!! $message !!}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-md-6">
                                        <label class="form-control-label">Type</label>
                                        <select class="form-control" name="type" id="type">
                                            @foreach(['Image','Video','Document'] as $type)
                                            <option value="{!! $type !!}" @if($media->type == $type) selected @endif>{!! $type !!}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="col-md-2 form-control-label">Status</label>
                                        <div class="radiobox">
                                            <div class="radio-wrap">
                                                <div class="radiobtn">
                                                    <input type="radio" id="is_active_yes" class="form-control checkboxinput" name="is_active" value="1" {!! $media->is_active == '1' ? 'checked' : '' !!} checked>Active
                                                    <h1></h1>
                                                </div>
                                                <div class="radiobtn">
                                                    <input type="radio" id="is_active_no" class="form-control checkboxinput" name="is_active" value="0" {!! $media->is_active == '0' ? 'checked' : '' !!} >Inactive
                                                    <h1></h1>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <div class="col-md-12">
                                        <label class="form-control-label" for="fileInput">Media</label>

                                        {{-- Standard file input (Image / Document) --}}
                                        <div class="d-md-flex align-items-center image_div" id="div_standard_upload">
                                            <div class="form-inline form-fileUpload">
                                                <div class="fileUpload btn btn-primary">
                                                    <span>Browse</span>
                                                    <input id="media" name="media" type="file" class="upload">
                                                </div>
                                                <div class="form-group mb-0">
                                                    <span class="uploadFile form-control"></span>
                                                </div>
                                            </div>
                                        </div>

                                        {{-- Video-specific chunked upload area --}}
                                        <div id="div_video_upload" class="d-none">
                                            <div class="fileUpload btn btn-primary" style="margin-bottom:10px;">
                                                <span>Browse Video</span>
                                                <input id="video_file_input" type="file" class="upload" accept=".mp4,.mov,.wmv,.avi,.webm">
                                            </div>
                                            <span id="video_file_name" class="form-control d-inline-block" style="width:auto;min-width:200px;vertical-align:middle;"></span>

                                            {{-- Progress bar --}}
                                            <div id="div_video_progress" style="display:none; margin-top:15px;">
                                                <div class="video-upload-progress-container">
                                                    <div id="video_progress_bar" class="video-upload-progress-bar"></div>
                                                </div>
                                                <small id="video_progress_label" class="text-muted" style="margin-top:6px;display:block; font-weight: 600;">Preparing upload…</small>
                                            </div>

                                            {{-- Status message --}}
                                            <div id="div_video_status" style="display:none; margin-top:10px;">
                                                <span id="video_status_text" class="video-upload-status-badge badge-info"></span>
                                            </div>
                                        </div>

                                        <input id="media_old" name="media_old" type="hidden" value="{!! $media->filename !!}">

                                        <div class="show-image imageRounded mt-3 media-file" id="div_media_preview">
                                            @if($media->filename)
                                                @if($media->type == "Image")
                                                <img src="{!! $media->url !!}" class="img-fluid image_preview">
                                                @elseif($media->type == "Video")
                                                <video controls loop class="video_preview" playsinline>
                                                    <source src="{!! $media->url !!}" type="video/mp4">
                                                    <source src="{!! $media->url !!}" type="video/ogg">
                                                    Your browser does not support the video tag.
                                                </video>
                                                @elseif($media->type == "Audio")
                                                <audio controls>
                                                    <source src="{!! $media->url !!}" type="audio/ogg">
                                                    <source src="{!! $media->url !!}" type="audio/mpeg">
                                                    Your browser does not support the audio element.
                                                </audio>
                                                @elseif($media->type == "Document")
                                                <a href="{!! $media->url !!}" class="btn btn-outline-info" target="_blank">View Current Document</a>
                                                @endif
                                            @endif
                                        </div>

                                        @error('media')
                                        <span class="error" role="alert">{!! $message !!}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="line"> </div>
                                <div class="form-group row">
                                    <div class="col-sm-12 text-center">
                                        <button type="button" class="btn btn-secondary" onclick="javascript:window.location.href='{!! route('admin.'.request()->segment(2).'.index') !!}'">Cancel</button>
                                        <button type="submit" id="btnSave" class="btn btn-primary">Save changes</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
@section('js')
<script src="{!! asset('assets/backend/js/pages/'.request()->segment(2).'.js') !!}?v={!! time() !!}"></script>
<script>
    // URLs for video upload (passed from PHP → JS)
    var videoUploadStatusUrl = "{!! route('admin.media.uploadStatus') !!}";
    var uploadChunkUrl       = "{!! route('admin.media.uploadChunk') !!}";
    var mediaIndexUrl        = "{!! route('admin.media.index') !!}";
    var csrfToken            = "{{ csrf_token() }}";
    var currentMediaType     = "{{ $media->type ?? '' }}";
</script>
@stop
@endsection