@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">
    <link rel="stylesheet" href="{{asset('build/assets/libs/flatpickr/flatpickr.css')}}">
    <link rel="stylesheet" href="{{asset('build/assets/libs/flatpickr/flatpickr.min.css')}}">
@endsection
@section('content')
    <!-- Page Header -->
    @php
        $breadcrumbs = [
            ['label' => 'Dashboard', 'url' => route('admin.dashboard')],
            ['label' => 'Offers', 'url' => route('admin.offers.index'), 'active' => false],
            ['label' => 'Update', '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-7">
            <x-ui.card title="Update Offer">

                <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 id="myForm" action="{{ route('admin.offers.update') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="id" value="{{$data->id}}">
                    <div class="row gy-3">
                        <div class="row">
                            <x-form.input label="Offer Name:" col="col-xl-6 mt-3" class="" name="title"
                                placeholder="Whatsapp,Facebook,Insta" value="{{$data->title}}" autofocus />

                            <x-form.select name="postback" col="col-xl-6 mt-3" label="Choose Postback Network:" :options="$postback->pluck('title','id')"
                                :selected="old('postback',$data->pb_id)"
                                :required="true" />
                        </div>

                        <x-form.input label="Offer Subtitle:" class="" name="subtitle" placeholder="Register and Earn"
                           value="{{$data->subtitle}}" autofocus />

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

                        <div class="row">
                            <x-form.input label="Offer Coin:" type="number" col="col-xl-6 mt-3" name="coin" placeholder="10"
                              value="{{$data->coin}}"  autofocus />

                            <x-form.input label="Offer Total Cap[Limit]:" type="number" col="col-xl-6 mt-3" name="total_cap"
                               value="{{$data->total_cap}}" placeholder="1000" autofocus />

                            <x-form.input label="Offer Expire Date:" type="text" col="col-xl-6 mt-3" name="expired_at"
                               value="{{$data->expired_at}}" placeholder="Pick a date" autofocus />

                            <x-form.input label="Offer Order BY:" type="number" col="col-xl-6 mt-3" name="item_order" value="1" placeholder="1"
                               value="{{$data->item_order}}" autofocus />
                        </div>

                        <x-form.textarea col="col-xl-12" label="Offer Complete Instruction" name="description"
                            editor="true" :value="$data->description" :required="true" />

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

        <div class="col-xxl-4 col-xl-5">
            <x-ui.card title="Publish&nbsp;<span class='text-danger'>*</span>">
                <x-form.select
                    name="status"
                    label="Offer Status"
                    :options="[
                        '0' => 'Disable',
                        '1' => 'Active',
                        '2' => 'Complete',
                        '3' => 'Expired'
                    ]"
                    :selected="$data->status"
                    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="Task Geo Targeting">
                <x-form.select name="country" label="Choose Country where you want to show Task:" :options="$country->pluck('name','iso')"
                    :selected="old('country',$taskIsos)" class="js-country-select js-example-basic-multiple" :multiple="true"
                    :required="true" />
            </x-ui.card>

            <x-ui.card title="Media Image">
                @if($data->image_type==1)
                    <x-form.input label="Offer Icon Link:" type="url" id="media_link" col="mb-1"
                    name="media_link" placeholder="http" value="{{$data->image}}" autofocus :required="false" />

                @elseif($data->image_type==0)    
                    <x-form.dropzone-image name="media" id="uploadmedia" placeholder="assets/images/media-placeholder.svg"
                    sizeLabel="200×200 px" label="Offer Icon Attachment" :required="false"
                    :preview="asset('uploads/offers/'.$data->image)" />
                @endif
            </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>
    <script src="{{asset('build/assets/libs/flatpickr/flatpickr.min.js')}}"></script>

    <!-- Internal Select-2.js -->
    @vite('resources/assets/js/select2.js')
    <script>
        $(document).ready(function(){
            flatpickr("#expired_at", {
                altInput: true,
                altFormat: "F j, Y",
                dateFormat: "Y-m-d",
                disableMobile: true
            });
        });

        
    </script>
@endsection