@section('modal_title', __('frontend.edit_home_slider'))

<div class="main-card mb-3 card">
    <div class="card-body">

        <form class="" id="editSubmit"
            action="{{ route('frontend.home_sliders.update', ['home_slider' => $slider['id']]) }}" method="POST" enctype="multipart/form-data">

            @csrf
            @method('PUT')

            @if (auth()->user()->hasRole('Super Admin'))
                <div class="form-group mb-3">
                    <label for="business" class="form-label">{{ __('core.business_name') }}</label>
                    <select id="business" name="business_id" class="form-control">
                        <option value="">{{ __('core.please_select') }}</option>
                        @foreach ($businesses as $business)
                            <option value="{{ $business->id }}"
                                {{ old('business_id', $slider->business_id) == $business->id ? 'selected' : '' }}>
                                {{ $business->business_name }}
                            </option>
                        @endforeach
                    </select>
                </div>
            @else
                <input type="hidden" name="business_id" value="{{ auth()->user()->business_id }}">
            @endif


            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="photo">{{ __('core.photo') }}:</label>
                    <input type="file" class="form-control" name="photo" id="photo" data-role="file-upload"
                        onchange="previewPhoto(event)">
                    @error('photo')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Photo Preview --}}
                <div class="col-md-6 my-3">
                    <img id="photo-preview" class="float-end" alt="Image Preview"
                        src="{{ isset($slider->photo) ? asset(str_replace('public/', 'storage/', $slider->photo)) : '' }}"
                        style="display: {{ isset($slider->photo) ? 'block' : 'none' }};" width="200"
                        height="200">
                </div>
            </div>

            <div class="position-relative mb-3">
                <label for="title" class="form-label">{{ __('frontend.title') }}</label>
                <input name="title" id="title" placeholder="{{ __('frontend.title') }}" type="text"
                    class="form-control" value="{{ old('title', $slider->title ?? '') }}" autofocus>
            </div>

            <div class="position-relative mb-3">
                <label for="note">{{ __('frontend.message') }}:</label>
                <textarea name="message" id="message" class="form-control">{{ old('message', $slider->message ?? '') }}</textarea>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="button1" class="form-label">{{ __('frontend.button1') }}</label>
                    <input name="button1" id="button1" placeholder="{{ __('frontend.button1') }}" type="text"
                        class="form-control" value="{{ old('button1', $slider->button1 ?? '') }}">

                </div>
                <div class="col-md-6 mb-3">
                    <label for="link1" class="form-label">{{ __('frontend.link1') }}</label>
                    <input name="link1" id="link1" placeholder="{{ __('frontend.link1') }}" type="text"
                        class="form-control" value="{{ old('link1', $slider->link1 ?? '') }}">
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="button2" class="form-label">{{ __('frontend.button2') }}</label>
                    <input name="button2" id="button2" placeholder="{{ __('frontend.button2') }}" type="text"
                        class="form-control" value="{{ old('button2', $slider->button2 ?? '') }}">

                </div>
                <div class="col-md-6 mb-3">
                    <label for="link2" class="form-label">{{ __('frontend.link2') }}</label>
                    <input name="link2" id="link2" placeholder="{{ __('frontend.link2') }}" type="text"
                        class="form-control" value="{{ old('link2', $slider->link2 ?? '') }}">
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="button3" class="form-label">{{ __('frontend.button3') }}</label>
                    <input name="button3" id="button3" placeholder="{{ __('frontend.button3') }}" type="text"
                        class="form-control" value="{{ old('button3', $slider->button3 ?? '') }}">

                </div>
                <div class="col-md-6 mb-3">
                    <label for="link3" class="form-label">{{ __('frontend.link3') }}</label>
                    <input name="link3" id="link3" placeholder="{{ __('frontend.link3') }}" type="text"
                        class="form-control" value="{{ old('link3', $slider->link3 ?? '') }}">
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="button4" class="form-label">{{ __('frontend.button4') }}</label>
                    <input name="button4" id="button4" placeholder="{{ __('frontend.button4') }}" type="text"
                        class="form-control" value="{{ old('button4', $slider->button4 ?? '') }}">

                </div>
                <div class="col-md-6 mb-3">
                    <label for="link4" class="form-label">{{ __('frontend.link4') }}</label>
                    <input name="link4" id="link4" placeholder="{{ __('frontend.link4') }}" type="text"
                        class="form-control" value="{{ old('link4', $slider->link4 ?? '') }}">
                </div>
            </div>

            <button class="mt-1 btn btn-primary">{{ __('core.submit') }}</button>
        </form>
    </div>
</div>

<script>
    function previewPhoto(event) {
        const file = event.target.files[0];
        const preview = document.getElementById('photo-preview');

        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                preview.src = e.target.result;
                preview.style.display = "block";
            };
            reader.readAsDataURL(file);
        } else {
            preview.style.display = "none";
        }
    }
</script>