<div class="row">
    <div class="col-md-8">
        <div class="row">
            <div class="col-md-4">
                {{ Form::label('first_color','First Color' ,['class' =>"form-label"])}}
                {{ Form::color('first_color',$splashConfiguration['first_color'] ,['class' =>"form-control form-control-color w-100 mb-3" ,'id' => "splashFirstColor"])}}

            </div>
            <div class="col-md-4">
                {{ Form::label('second color','Second Color' ,['class' =>"form-label"     ])}}
                {{ Form::color('second_color',$splashConfiguration['second_color'] ,['class' =>"form-control form-control-color w-100 mb-3" ,'id' => "splashSecondColor"   ])}}
            </div>

            <div>
                <span class="fs-3 my-3 me-3">Show Logo</span>
                <div class="form-check form-switch mb-3">
                    <input class="form-check-input" type="checkbox" name="enable_splash_logo" id="enableSplashLogo"
                           value="1" {{ $splashConfiguration['enable_splash_logo']== '1' ? 'checked' : ''}}>
                </div>
            </div>
            <div class="splash-logo   {{ $splashConfiguration['enable_splash_logo']  == '1' ? '' : 'd-none'}}">
                <div class="col-lg-6 mb-7">
                    <div class="mb-3" io-image-input="true">
                        <label for="exampleInputImage" class="form-label">Splash Logo</label>
                        <div class="d-block">
                            <div class="image-picker">
                                <div class="image previewImage" id="exampleInputImage"
                                     style="background-image: url({{ $splashConfiguration['splash_logo'] }})">
                                </div>
                                <span class="picker-edit rounded-circle text-gray-500 fs-small" data-bs-toggle="tooltip"
                                      data-placement="top"
                                      data-bs-original-title="{{ __('messages.user.edit_profile') }}">
                        <label> 
                            <i class="fa-solid fa-pen" id="profileImageIcon"></i> 
                            <input type="file" name="splash_logo" class="image-upload d-none" id="splashLogo" accept="image/*"/> 
                        </label> 
                    </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <span class="fs-3 my-3 me-3">Show Title</span>
                <div class="form-check form-switch my-3">
                    <input class="form-check-input " type="checkbox" role="switch" name="enable_splash_title"
                           id="enableSplashTitle" value="1"
                            {{ $splashConfiguration['enable_splash_title'] == '1' ? 'checked' : ''}}>
                </div>
            </div>
            <div class="row splash_title {{ $splashConfiguration['enable_splash_title']  == '1' ? '' : 'd-none'}}">
                <div class="col-md-4">
                    {{ Form::label('second color','Title' ,['class' =>"form-label" ])}}
                    {{ Form::text('splash_title',$splashConfiguration['splash_title'] ,['class' =>"form-control form-control-color w-100 mb-3", 'id' => "splashTitle"])}}
                </div>
                <div class="col-md-4">
                    {{ Form::label('second color','Title' ,['class' =>"form-label" ])}}
                    {{ Form::color('splash_title_color',$splashConfiguration['splash_title_color'] ,['class' =>"form-control form-control-color w-100 mb-3" ,'id' => "splashTitleColor"   ])}}
                </div>
            </div>
            <div>
                <span class="fs-3 my-3 me-3">Show Background</span>
                <div class="form-check form-switch mb-3">
                    <input class="form-check-input" type="checkbox" name="enable_splash_background"
                           id="enableSplashBackground"
                           value="1" {{ $splashConfiguration['enable_splash_background'] == '1' ? 'checked' : ''}}>
                </div>
            </div>
            <div class="splash_Background {{ $splashConfiguration['enable_splash_background']  == '1' ? '' : 'd-none'}}">
                <div class="col-lg-6 mb-7">
                    <div class="mb-3" io-image-input="true">
                        <label for="exampleInputImage" class="form-label">Splash Background</label>
                        <div class="d-block">
                            <div class="image-picker">
                                <div class="image previewImage " id="splashBackgroundPreviewImage"
                                     style="background-image: url({{ $splashConfiguration['splash_background'] }})">
                                </div>
                                <span class="picker-edit rounded-circle text-gray-500 fs-small" data-bs-toggle="tooltip"
                                      data-placement="top"
                                      data-bs-original-title="{{ __('messages.user.edit_profile') }}">
                        <label> 
                            <i class="fa-solid fa-pen" id="profileImageIcon"></i> 
                            <input type="file" name="splash_background" id="splashBackground"
                                   class="image-upload d-none" accept="image/*"/> 
                        </label> 
                    </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="col-md-3">
        <div class="card  rounded splash-preview">

            <div class="card-body splash background-color d-flex align-items-center justify-content-center"
                 id="selectedColor">
                <div class="d-flex flex-column justify-content-center">
                    <img src="{{ $splashConfiguration['splash_logo'] }}"
                         class="splash-preview-img m-auto {{ $splashConfiguration['enable_splash_logo']  == '1' ? '' : 'd-none'}}" id="logoPreview">
                    <h4 class="w-100 text-center splash-preview-title  mt-3 {{ $splashConfiguration['enable_splash_title']  == '1' ? '' : 'd-none'}}">{{$splashConfiguration['splash_title']}}</h4>
                </div>
            </div>
        </div>
    </div>

    <div class="float-end">
        <button type="submit" class="btn btn-primary me-5">Save</button>
        <button type="button" class="btn btn-secondary">Cancel</button>
    </div>
</div>
