@extends('layouts.master')
@section('content')
    <div class="container-xxl">
        <x-breadcrumb listRoute="{{ route('admin.features.index') }}" model="Features" item="Edit"></x-breadcrumb>

        <div class="card">
            <div class="card-body">

                <x-form.wrapper action="{{ route('admin.features.update', $feature->id) }}" method="POST"
                    enctype="multipart/form-data">
                    @method('PATCH')
                    {{-- <x-form.row>
                    <x-form.input type="text" col="12" label="Heading" :req="true" id="meta" name="meta"
                        value="{!! old('meta', $feature->meta) !!}" />
                </x-form.row> --}}

                    <x-form.row>
                        <x-form.input type="text" col="12" label="Name" :req="true" id="name"
                            name="name" value="{!! old('name', $feature->name) !!}" />
                    </x-form.row>

                    <div class="col-md-6">
                        <x-form.input type="file" :req="true" label="Image" id="image" name="image"
                            accept="image/*" onchange="previewThumb(this,'featured-thumb')" />
                        <x-form.preview id="featured-thumb" url="{{ $feature->feature_image->getPath() }}" />
                    </div>

                    <div class="des-wrapper" id="meta1Wrapper">
                        <x-form.input col="6" type="text" label="Meta(link/url)" id="meta" name="meta"
                            value="{{ old('meta',$feature->meta) }}" />
                        <x-form.textarea label="Description" isEditor="true" id="description" name="meta1"
                            value="{!! old('meta1', $feature->meta1) !!}" rows="5" cols="5" />
                    </div>

                    <x-form.checkbox label="Status" id="status" name="status" value="1" class="form-check-input"
                        isEditMode="yes" :isChecked="$feature->status ? 'checked' : ''" />

                    <x-form.button class="btn btn-sm btn-dark" type="submit">
                        <i class='bx bx-save bx-xs'></i>
                        Save
                    </x-form.button>
                </x-form.wrapper>

                @if ($errors->any())
                    <div class="alert alert-danger">
                        <h4>Validation Errors:</h4>
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>

                    </div>
                @endif
            </div>
        </div>
    </div>

    @php

        $selected = $feature->type;
    @endphp

@endsection


@push('custom_js')
    {{-- @include('_helpers.slugify', ['title' => 'name']) --}}

    @include('_helpers.image_preview', ['name' => 'image'])
    @include('_helpers.ajax_form')
    <script>
        $(document).ready(function() {

            const homeAds = "{{ \App\Enums\FeatureType::HOME_ADS->value }}";

            // Function to toggle field visibility
            // alert(homeAds)

            function toogleDescription() {

                // const selectedValue = $('select[name="type"]').val();
                const selectedValue = "{{ $selected }}";

                if (selectedValue === homeAds) {
                    $('#meta1Wrapper').hide();
                } else {
                    $('#meta1Wrapper').show();
                }
            }

            // Initial check on page load
            toogleDescription();

            // Listen for changes on the select element
            // $('select[name="type"]').change(function() {
            //     toogleDescription();
            // });
        });
    </script>
@endpush