@extends('layouts.admin')
@section('title', 'Add Media')
@section('content')
    <div class="main-content-inner">
        <!-- main-content-wrap -->
        <div class="main-content-wrap">
            <div class="flex items-center flex-wrap justify-between gap20 mb-27">
                <h3>Add Media</h3>
                <ul class="breadcrumbs flex items-center flex-wrap justify-start gap10">
                    <li>
                        <a href="{{ route('admin.index') }}">
                            <div class="text-tiny">Dashboard</div>
                        </a>
                    </li>
                    <li>
                        <i class="icon-chevron-right"></i>
                    </li>
                    <li>
                        <a href="{{ route('admin.medias') }}">
                            <div class="text-tiny">Medias</div>
                        </a>
                    </li>
                    <li>
                        <i class="icon-chevron-right"></i>
                    </li>
                    <li>
                        <div class="text-tiny">Add media</div>
                    </li>
                </ul>
            </div>
            <div class="main-content-wrap mb-20">
                @if (session('status'))
                    <div class="alert alert-success">
                        {{ session('status') }}
                    </div>
                @endif

                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>
            <!-- form-add-media -->
            <form class="tf-section-2 form-add-media" method="POST" enctype="multipart/form-data"
                action="{{ route('admin.media.store') }}">
                @csrf
                <div class="wg-box">
                    <fieldset class="name">
                        <div class="body-title mb-10">Media title <span class="tf-color-1">*</span>
                        </div>
                        <input class="mb-10" type="text" placeholder="Enter media title" name="title" tabindex="0"
                            value="{{ old('title') }}" aria-required="true" required="" autocomplete="on">
                        <div class="text-tiny">Do not exceed 100 characters when entering the
                            media title.</div>
                    </fieldset>

                    <fieldset class="name">
                        <div class="body-title mb-10">Slug <span class="tf-color-1">*</span></div>
                        <input class="mb-10" type="text" placeholder="Enter media slug" name="slug" tabindex="0"
                            value="{{ old('slug') }}" aria-required="true" required="">
                        <div class="text-tiny">Do not exceed 100 characters when entering the
                            media slug.</div>
                    </fieldset>

                    <div class="gap22 cols">
                        <fieldset class="category">
                            <div class="body-title mb-10">Category <span class="tf-color-1">*</span>
                            </div>
                            <div class="select">
                                {{-- <select class="" name="category_id">
                                    <option>Choose category</option>
                                    @foreach ($categories as $category)
                                        <option value="{{ $category->id }}"
                                            {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                            {{ $category->name }}
                                        </option>
                                    @endforeach

                                </select> --}}
                            </div>
                        </fieldset>
                        <fieldset class="brand">
                            <div class="body-title mb-10">Brand <span class="tf-color-1">*</span>
                            </div>
                            <div class="select">
                                {{-- <select name="brand_id" class="" required>
                                    <option value="">Choose Brand</option>
                                    @foreach ($brands as $brand)
                                        <option value="{{ $brand->id }}"
                                            {{ old('brand_id') == $brand->id ? 'selected' : '' }}>
                                            {{ $brand->name }}
                                        </option>
                                    @endforeach
                                </select> --}}
                            </div>
                        </fieldset>
                        @error('brand_id')
                            <span class="alert alert-danger text-center">{{ $message }}</span>
                        @enderror
                    </div>

                    <fieldset class="shortdescription">
                        <div class="body-title mb-10">Short Description <span class="tf-color-1">*</span></div>
                        <textarea class="mb-10 ht-150" name="short_description" maxlength="255" placeholder="Short Description" tabindex="0"
                            aria-required="true" required="">{{ old('short_description') }}</textarea>
                        <div class="text-tiny">Do not exceed 255 characters when entering the
                            short description.</div>
                    </fieldset>

                    <fieldset class="description">
                        <div class="body-title mb-10">Description <span class="tf-color-1">*</span>
                        </div>
                        <textarea class="mb-10" name="description" maxlength="1000" placeholder="Description" tabindex="0">{{ old('description') }}</textarea>
                        <div class="text-tiny">Do not exceed 100 characters when entering the
                            description.</div>
                    </fieldset>
                </div>
                <div class="wg-box">
                    <fieldset>
                        <div class="body-title">Upload images <span class="tf-color-1">*</span>
                        </div>
                        <div class="upload-image flex-grow">
                            <div class="item" id="imgpreview" style="display:none">
                                <img src="{{ asset('assets/iamges/kompaparis.png') }}" class="effect8" alt="">
                            </div>
                            <div id="upload-file" class="item up-load">
                                <label class="uploadfile" for="myFile">
                                    <span class="icon">
                                        <i class="icon-upload-cloud"></i>
                                    </span>
                                    <span class="body-text">Drop your images here or select <span class="tf-color">click
                                            to browse</span></span>
                                    <input type="file" id="myFile" name="image" accept="image/*"
                                        onchange="previewImage(event)">
                                </label>
                            </div>
                        </div>
                    </fieldset>

                    <fieldset>
                        <div class="body-title mb-10">Upload Data File</div>
                        <div class="upload-image flex-grow">
                            <div class="item" id="audiopreview" style="display: none;">
                                <div id="audio-filename" class="mt-2 text-sm text-gray-600"></div>
                                <audio id="audio-preview" class="mt-4" controls style="display: none;"></audio>
                            </div>
                            <div class="item up-load">
                                <label class="uploadfile" for="file_path">
                                    <span class="icon">
                                        <i class="icon-upload-cloud"></i>
                                    </span>
                                    <span class="body-text">
                                        Drop your data here or <span class="tf-color">click to browse</span>
                                    </span>
                                    <input type="file" name="path" id="file_path" accept="audio/mp3,audio/mpeg"
                                        onchange="handleAudioPreview(this)">
                                </label>
                            </div>
                        </div>
                    </fieldset>

                    <fieldset class="name">
                        <div class="body-title mb-10">Link <span class="tf-color-1"></span></div>
                        <input class="mb-10" type="text" placeholder="Enter the Link" name="link" tabindex="0"
                            value="{{ old('link') }}">
                    </fieldset>

                    <fieldset class="name">
                        <div class="body-title mb-10">Format <span class="tf-color-1">*</span>
                        </div>
                        <div class="select">
                            <select name="format" id="format" class="" required>
                                <option value="mp3"
                                    {{ old('format', $model->type ?? 'mp3') == 'mp3' ? 'selected' : '' }}>MP3</option>
                                <option value="mp4"
                                    {{ old('format', $model->type ?? 'mp3') == 'mp4' ? 'selected' : '' }}>MP4</option>
                                <option value="vimeo"
                                    {{ old('format', $model->type ?? 'mp3') == 'vimeo' ? 'selected' : '' }}>Vimeo
                                </option>
                                <option value="youtube"
                                    {{ old('format', $model->type ?? 'mp3') == 'youtube' ? 'selected' : '' }}>YouTube
                                </option>
                                <option value="unlisted"
                                    {{ old('format', $model->type ?? 'mp3') == 'unlisted' ? 'selected' : '' }}>Non
                                    répertorié</option>
                            </select>
                        </div>
                    </fieldset>

                    <div class="cols gap10">
                        <button class="tf-button w-full" type="submit">Add media</button>
                    </div>
                </div>
            </form>
            <!-- /form-add-media -->
        </div>
        <!-- /main-content-wrap -->
    </div>
@endsection

@push('scripts')
    <script>
        $(function() {
            // Preview image
            $("#myFile").on("change", function(e) {
                const [file] = this.files;
                if (file) {
                    $("#imgpreview img").attr('src', URL.createObjectURL(file));
                    $("#imgpreview").show();
                }
            });

            // Auto slug
            $("input[name='title']").on("change", function() {
                $("input[name='slug']").val(stringToSlug($(this).val()));
            });
        });

        function stringToSlug(text) {
            return text.toLowerCase()
                .replace(/[^\w ]+/g, '')
                .replace(/ +/g, '-');
        }

        function handleAudioPreview(input) {
            const file = input.files[0];
            if (file) {
                const audioPreview = document.getElementById('audio-preview');
                const filenameDiv = document.getElementById('audio-filename');
                audioPreview.src = URL.createObjectURL(file);
                audioPreview.style.display = 'block';
                filenameDiv.textContent = file.name;
                document.getElementById('audiopreview').style.display = 'block';
            }
        }
    </script>
@endpush