@extends('layouts.admin')
@section('content')
    <section class="dashboard-sec">
        <div class="dashboard-wrapper">
            <div class="dashboard-content-wrapper p-5">
                <section class="section">
                    <div class="section-body">
                        <div class="row">
                            <div class="col-12 col-md-12 col-lg-6">
                                <div class="card">
                                    <div class='ajax-response'></div>
                              
                                    <div class="card-header">
                                        <h4> {{ $target ? 'Update Target' : 'Add Target' }}</h4>
                                        <div class="card-header-form">
                                            <a class="btn btn-primary btn-lg float-end"
                                                href="{{ route('admin.target.index') }}">Back</a>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <form
                                            action="{{ route('admin.target.store', ['id' => jsencode_userdata($target ? $target->id : null)]) }}"
                                            method='post' id='targetForm' enctype="multipart/form-data">
                                            @csrf
                                            <input type="hidden" name='id' value="{{ $target ? $target->id : null }}">
                                            <div class="form-row form-cstm">
                                                <div class="form-group col-md-12">
                                                    <label for='target_name_input'> Target Name <span class="required-field">*</span></label>
                                                    <div class="formfield" id='ename'>
                                                        <input type="text" id="target_name_input"
                                                            class="form-control @error('name') is-invalid @enderror"
                                                            placeholder="Target Name" name="name"
                                                            value="{{ $target ? $target->name : old('name') }}" />
                                                        @error('name')
                                                            <span class="invalid-feedback" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="form-group col-md-12">
                                                    <label for='aspect-ratio'> Choose target image format <span class="required-field">*</span></label>
                                                    <div class="formfield" >
                                                        <select class='form-control aspect_ratio_toggle' name="aspect_ratio" id="aspect-ratio">
                                                            <option value="">Select any</option>
                                                            <option value="8.5/11" @if(@$target->aspect_ratio == '8.5/11') selected @endif>8.5x11</option>
                                                            <option value="2/3" @if(@$target->aspect_ratio == '2/3') selected @endif>23x35</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group col-md-12">
                                                    <label for="upload_target"> Upload Target <span class="required-field">*</span></label>
                                                    <div class="formfield">
                                                        <label for='upload_target' class='form-control'>{{ $target?->file_name ?? 'No file selected'}}</label>
                                                        <input type='file' id='upload_target' @if(!$target) disabled @else aspect-ratio="{{ @$target->aspect_ratio }}"@endif 
                                                            class="form-control summernote @error('target') is-invalid @enderror d-none"
                                                            name="target" placeholder="Target"></input>
                                                        <input type="hidden" name='target_basefile' id='target_basefile'>
                                                        @error('target')
                                                            <span class="invalid-feedback" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror
                                                    </div>
                                                    <embed src="" class="show-target-pdf d-none" type="">
                                               
                                                    <img src="{{ Storage::url(@$target->file_path) }}" width='200'
                                                        height="300" id='show_target_preview' alt=""
                                                        class='@if (!$target) d-none @endif'>

                                                </div>
                                                {{-- @if ($target)
                                                    <div id="media-preview" class="mt-3">
                                                        <div class="media-preview-item">
                                                            <img src="{{ env('APP_URL') . '/storage/' . asset($target->file_path) }}"
                                                                alt="{{ $target->file_name }}"
                                                                style="max-width: 100px; max-height: 100px;">
                                                            <p>{{ $target->file_name }}</p>
                                                        </div>
                                                    </div>
                                                @endif --}}
                                                <div class="form-group col-md-12">
                                                    <label for='status'>Status <span class="required-field">*</span></label>
                                                    <div class="formfield" id='estatus'>
                                                        <select name="status" id="status"
                                                            class="form-control @error('status') is-invalid @enderror">
                                                            <option value=''>Select</option>
                                                            <option value="1"
                                                                @isset($target) @if ($target->status == '1') selected @endif @endisset>
                                                                Active
                                                            </option>
                                                            <option value="0"
                                                                @isset($target) @if ($target->status == '0') selected @endif @endisset>
                                                                Inactive</option>
                                                        </select>
                                                        @error('status')
                                                            <span class="invalid-feedback" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>

                                            <button class="btn btn-primary mr-1" type="submit"
                                                id="submit">{{ $target ? 'Update' : 'Submit' }}</button>

                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
    </section>
    </div>
    </section>
    @include('host.event-new-flow.modal.image-cropper-target')
@endsection


@push('pagespecificscripts')
    @includeFirst(['validation'])
    @include('validations.js_target', ['target' => $target ? true : false])
    <script>
        //FOR TARGET UPLOADING IMAGE
        $(document).on('click', ' #upload_target', function(event) {
            // CROPPING PROFILE IMAGE
            handleImageCropping("upload_target", "target_basefile", "show_target_preview",
                '/images/official-target-img.png', 'image-cropper-target-modal', 'crop-target',
                'cropped-image-target', 'cropped-preview-target', 'target_image');

            jQuery(document).on('click', '#crop-target', function() {
                jQuery('#show_target_preview').removeClass('d-none');
            })
        });

        function errorShow(title, text, confirmButtonText) {
            Swal.fire({
                title: title,
                text: text,
                icon: 'error',
                confirmButtonColor: "#3085d6",
                confirmButtonText: confirmButtonText || "OK"
            });
        }

        jQuery(document).ready(function(){
            jQuery('#aspect-ratio').click(function(){
                //Enable upload input target
                jQuery('#upload_target').attr('disabled' , true);

                //Setting value in element attribute
                let currentValue = jQuery(this).find('option:selected').val();
                if(currentValue == '8.5/11' || currentValue == '2/3'){
                    jQuery('#upload_target').attr('disabled' , false);
                    jQuery('#upload_target').attr('aspect-ratio' , currentValue);
                }
                if(currentValue == ''){
                    jQuery('#upload_target').attr('disabled' , true);
                }
            });
        });
    </script> 
    <!-- <script>
        jQuery(document).ready(function() {
            //SHOWING PDF PREVIEW
            $(document).on('change', '#upload_target', function(event) {
                let inputElement = jQuery(this);
                var file = event.target.files[0]; // Get the selected file

                //PREVIEW ELEMENT
                let preveiwElement = $(document).find('.show-target-pdf');
                if (file) {
                    var fileReader = new FileReader();
                    fileReader.onload = function(e) {
                        var pdfDataUrl = e.target.result; // PDF file data URL

                        preveiwElement.attr('src', pdfDataUrl); // Set the iframe src
                        preveiwElement.removeClass('d-none');

                        // preveiwElement.next().removeClass('d-none');
                        preveiwElement.show(); // Show the iframe

                    };
                    fileReader.readAsDataURL(file); // Read the file as a data URL
                } else {
                    preveiwElement.addClass('d-none');
                    preveiwElement.hide(); // Hide iframe if invalid file
                    // preveiwElement.next().addClass('d-none');
                }
            });
        })
    </script> -->
@endpush