@extends('layouts.master')
@section('styles')
    <link rel="stylesheet" href="{{ asset('build/assets/libs/toastify-js/src/toastify.css') }}">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
    
@endsection
@section('content')
    <!-- Page Header -->
    @php
        $breadcrumbs = [
            ['label' => 'Dashboard', 'url' => route('admin.dashboard')],
            ['label' => 'Video Ads', 'url' =>route('admin.ads.video'), 'active' => false],
            ['label' => 'Update Ad', 'url' => '#', 'active' => true],
        ];
    @endphp
    <x-ui.breadcrumb :items="$breadcrumbs" title="" />
    <!-- Page Header Close -->

    <!-- Start::row-1 -->
    <div class="row ">
        <div class="col-xxl-8 col-xl-8">
            <x-ui.card title="Create Video Ad">
                <div class="border border-gray p-3 mb-4">
                    <b>Allowed macros from App are:</b> <span class="text-danger ms-2">[user_id]</span> = for User ID
                    <span class="text-danger ms-2">[country]</span> = for country ISO <span
                        class="text-danger ms-2">[country_up]</span> = for country ISO in uppercase <span
                        class="text-danger ms-2">[email]</span> = for user Email <span
                        class="text-danger ms-2">[gaid]</span> = for GAID
                </div>

                <form action="{{ route('admin.ads.video.update') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="id" value="{{$ad->id}}">
                    <div class="row gy-3">

                        <x-form.input label="Ads Title" class="" value="{{$ad->title}}" name="title" placeholder="Enter title" autofocus />

                        <x-form.input label="Ads Click Redirect Url:" type="url" value="{{$ad->url}}" class="" name="url"
                            placeholder="http://" autofocus />

                        <x-form.input label="Click to Action Text" type="text" class="" value="{{$ad->cta_text}}" name="cta_text"
                            placeholder="Install,Play etc" autofocus />

                        <x-form.input
                            label="Ads Description <span class='text-primary'>[in 2 line it will visible to user]</span>"
                            type="text" class="" name="cta_desc" placeholder="write here.." value="{{$ad->cta_desc}}" autofocus />

                        <x-form.input label="How much impression you want?" type="number" class=""
                            name="target_impression" placeholder="100" value="{{$ad->target_impression}}" autofocus />

                        <x-form.input label="Set your daily Impression Cap Limit:" type="number" class=""
                            name="daily_cap" placeholder="10" value="{{$ad->daily_cap}}" autofocus />

                        <x-form.input label="Max X per user per day" type="number" class="" value="{{$ad->per_user_cap}}" name="per_user_cap"
                            placeholder="2" autofocus />

                        <x-form.input
                            label="Ad View Duration <span class='text-primary'>[after timer complete user can dismiss ad]</span> :"
                            type="number" class="" name="view_duration" value="{{$ad->view_duration}}" placeholder="4" autofocus />

                        <x-form.select name="country" label="Choose Country where you want to show ad:" :options="$country->pluck('name', 'iso')"
                            :selected="old('country', $taskIsos)" class="js-country-select js-example-basic-multiple mb-5" :multiple="true"
                            :required="true" />

                    </div>
            </x-ui.card>
        </div>

        <div class="col-xxl-4 col-xl-4">
            <x-ui.card title="Publish&nbsp;<span class='text-danger'>*</span>">
                <x-form.select name="status" label="Ad Status" :options="[
                    '1' => 'Active',
                    '2' => 'Hold',
                    '3' => 'Completed',
                ]" :selected="old('status', $ad->status ?? 1)"
                    placeholder="Select status" :required="true" />

                <button type="submit" class="btn btn-primary mt-3 px-5">Save</button>
            </x-ui.card>


            <x-ui.card title="Media Attachment">

                 <x-form.dropzone-image name="logo" id="uploadlogo" placeholder="assets/images/logo-placeholder.svg"
                    sizeLabel="150×150 px" label="Brand Logo/Icon" :preview="asset('uploads/ads/'.$ad->logo)" :required="false" />
                    
                <x-form.dropzone-image name="media" id="uploadmedia" placeholder="assets/images/media-placeholder.svg"
                    sizeLabel="400×720 px" label="Ad Close Attachment" :preview="asset('uploads/ads/'.$ad->media)" :required="false" />

                <x-form.dropzone-video id="uploadVideo" name="file" :preview="asset('uploads/ads/video/'.$ad->asset)" :required="false" :maxSize="2048"
                     :maxDuration="30"  label="Video Ad Attachment"
                    helper="MP4 only. Up to 2 MB and 30 Second" />
            </x-ui.card>

        </div>
        </form>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('build/assets/libs/toastify-js/src/toastify.js') }}"></script>
    <!-- Select2 Cdn -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <!-- Internal Select-2.js -->
    @vite('resources/assets/js/select2.js')
@endsection