@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' => 'Categories', 'url' =>route('admin.home.cat.index'), 'active' => false],
            ['label' => 'Button', 'url' =>route('admin.home.button.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 Home UI Button">
        
                <form action="{{ route('admin.home.button.update') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="id" value="{{ $data->id }}">
                    <div class="row gy-3">
                            <div class="form-group">
                                <label class="form-label">Select Home Category</label>
                                <select name="cat" class="form-control" id="cat">
                                    @foreach($cat as $item)
                                        <option value="{{ $item->id }}" data-value="{{ $item->cat_theme }}"
                                            @if($item->id == $data->cat) selected @endif>
                                            {{ $item->title }}
                                        </option>
                                    @endforeach
                                </select>

                                <div class="mt-4">
                                    @include('components.ui.button-style-selector', [
                                        'selected' => old('background_color0', $data->btn_background ?? null),
                                        'pickerValues' => [
                                            old('background_color_code0', $data->background_color ?? null),
                                        ]
                                    ])    
                                </div>
                            </div>

                            <x-form.input label="Button Title:" placeholder="Spin Win"
                                 name="title" value="{{ $data->title }}" autofocus />
                                 
                           <div id="divsubtitle">
                                <x-form.input label="Button SubTitle:" placeholder="Earn upto 1000 coin"
                                    name="subtitle" value="{{ $data->subtitle }}" autofocus :required="false" />
                            </div>
                             
                            <div id="divbtnName">
                                  <x-form.input label="Button Name:" placeholder="StartNow"
                                 name="btn_name" value="{{ $data->btn_name }}" autofocus :required="false" />
                            </div>

                             <x-form.select name="btn_action" label="Button Action" 
                             :options="$btnAction->pluck('title','type')" :selected="old('btn_action',$data->btn_action)"
                                placeholder="Select status" :required="true" />

                            <x-form.input label="URL (required if On Click select URL)" type="url" 
                                name="url" placeholder="http://" value="{{ $data->url }}" :required="false" autofocus />  
                                
                            <x-form.input label="Button Order:" value="1"
                                 name="row_order" value="{{ $data->row_order }}" type="number" autofocus />     
   
                    </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="Button Status" :options="[
                    '1' => 'Active',
                    '0' => 'Disable',
                ]" :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="Button Icon" id="div_media" >
                <x-form.dropzone-image name="media" id="uploadmedia" placeholder="assets/images/media-placeholder.svg"
                    sizeLabel="600 px" label="Select Button Icon"
                    :required="false"
                    :preview="asset('uploads/home/'.$data->icon)" />
            </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')

    <script>

    $(document).ready(function(){
        var elem=document.getElementById("cat");
        var id = elem.options[elem.selectedIndex].getAttribute('data-value');
        hidestyle(id);
    });
        
    $('#cat').change(function() {
        var elem=document.getElementById("cat");
        var id = elem.options[elem.selectedIndex].getAttribute('data-value');
        $('#divsubtitle').hide();
        $('#divbtnName').hide();

        hidestyle(id);
    });

      function hidestyle(val) {
        if (val == 0) {
            $('#divsubtitle').hide();
            $('#divbtnName').hide();
        }
        else if (val == 1) {
            $('#divsubtitle').show();
            $('#divbtnName').show();
        }
        else if (val == 2) {
            $('#divsubtitle').hide();
            $('#divbtnName').hide();

        }else if (val == 3) {
            $('#divsubtitle').hide();
            $('#divbtnName').hide();
        }
        else if (val == 4) {
            $('#divsubtitle').hide();
            $('#divbtnName').hide();
        }
        else if (val == 5) {
            $('#divsubtitle').hide();
            $('#divbtnName').hide();
        }else if (val == 6) {
            $('#divsubtitle').show();
            $('#divbtnName').hide();
        }
        else if (val ==7 || val==8 || val==9) {
            $('#divsubtitle').hide();
            $('#divbtnName').hide();
        }else if (val == 10) {
            $('#divsubtitle').show();
            $('#divbtnName').show();
        }else if (val == 11) {
            $('#divsubtitle').show();
            $('#divbtnName').show();
        }
    }   
    </script>    
@endsection