@extends('layouts/contentLayoutMaster')

@section('title', $isEdit ? __('locale.buttons.edit') : __('locale.buttons.create'))

@section('page-style')
    <style>
        .login-slider-preview {
            max-height: 180px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f8f9fa;
            border-radius: 0.357rem;
        }

        .login-slider-preview-media {
            max-height: 180px;
            width: 100%;
            object-fit: cover;
        }

        .login-slider-preview-media.login-slider-media--svg {
            object-fit: contain;
            padding: 0.5rem;
        }
    </style>
@endsection

@section('content')
    <section id="login-slider-form">
        <div class="row">
            <div class="col-md-8 col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">{{ $isEdit ? __('locale.buttons.edit') : __('locale.buttons.create') }} {{ __('locale.login_slider.slide') }}</h4>
                    </div>
                    <div class="card-body">
                        <form class="form form-vertical" method="POST"
                              action="{{ $isEdit ? route('admin.login-sliders.update', $loginSlider->uid) : route('admin.login-sliders.store') }}"
                              enctype="multipart/form-data">
                            @csrf
                            @if($isEdit)
                                @method('PUT')
                            @endif

                            <div class="row">
                                <div class="col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="title">{{ __('locale.labels.title') }}</label>
                                        <input id="title" type="text" class="form-control @error('title') is-invalid @enderror"
                                               name="title" value="{{ old('title', $loginSlider->title) }}" maxlength="191" required>
                                        @error('title')
                                        <p><small class="text-danger">{{ $message }}</small></p>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="subtitle">{{ __('locale.login_slider.subtitle') }}</label>
                                        <input id="subtitle" type="text" class="form-control @error('subtitle') is-invalid @enderror"
                                               name="subtitle" value="{{ old('subtitle', $loginSlider->subtitle) }}" maxlength="191" required>
                                        @error('subtitle')
                                        <p><small class="text-danger">{{ $message }}</small></p>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="description">{{ __('locale.labels.description') }}</label>
                                        <textarea
                                            id="description"
                                            class="form-control @error('description') is-invalid @enderror"
                                            name="description"
                                            rows="4"
                                            maxlength="2000"
                                            required
                                        >{{ old('description', $loginSlider->description) }}</textarea>
                                        @error('description')
                                        <p><small class="text-danger">{{ $message }}</small></p>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="button_text">{{ __('locale.login_slider.button_text_optional') }}</label>
                                        <input id="button_text" type="text" class="form-control @error('button_text') is-invalid @enderror"
                                               name="button_text" value="{{ old('button_text', $loginSlider->button_text) }}" maxlength="191">
                                        @error('button_text')
                                        <p><small class="text-danger">{{ $message }}</small></p>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="button_url">{{ __('locale.login_slider.button_url_optional') }}</label>
                                        <input id="button_url" type="url" class="form-control @error('button_url') is-invalid @enderror"
                                               name="button_url" value="{{ old('button_url', $loginSlider->button_url) }}" maxlength="191"
                                               placeholder="https://example.com">
                                        @error('button_url')
                                        <p><small class="text-danger">{{ $message }}</small></p>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-12">
                                    <div class="mb-1">
                                        <label class="form-label {{ $isEdit ? '' : 'required' }}" for="image">{{ __('locale.labels.image') }}</label>
                                        <input id="image" type="file" class="form-control @error('image') is-invalid @enderror"
                                               name="image"
                                               accept="image/jpeg,image/png,image/webp,image/gif,image/svg+xml,.svg,.svgz"
                                               {{ $isEdit ? '' : 'required' }}>
                                        @error('image')
                                        <p><small class="text-danger">{{ $message }}</small></p>
                                        @enderror
                                        <p><small class="text-primary">{{ __('locale.login_slider.accepted_image_hint') }}</small></p>
                                    </div>
                                </div>

                                @if($isEdit && $loginSlider->image)
                                    <div class="col-12 mb-1 login-slider-preview">
                                        @include('partials.login-slider-media', [
                                            'slide' => $loginSlider,
                                            'class' => $loginSlider->mediaCssClass('img-fluid rounded login-slider-preview-media'),
                                            'eager' => true,
                                            'sizes' => '100vw',
                                        ])
                                    </div>
                                @endif

                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="sort_order">{{ __('locale.login_slider.sort_order') }}</label>
                                        <input id="sort_order" type="number" min="1"
                                               class="form-control @error('sort_order') is-invalid @enderror"
                                               name="sort_order" value="{{ old('sort_order', $loginSlider->sort_order ?: 1) }}">
                                        @error('sort_order')
                                        <p><small class="text-danger">{{ $message }}</small></p>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="status">{{ __('locale.labels.status') }}</label>
                                        <select id="status" class="form-select @error('status') is-invalid @enderror" name="status">
                                            <option value="1" @selected(old('status', (int) $loginSlider->status) === 1)>{{ __('locale.labels.active') }}</option>
                                            <option value="0" @selected(old('status', (int) $loginSlider->status) === 0)>{{ __('locale.labels.inactive') }}</option>
                                        </select>
                                        @error('status')
                                        <p><small class="text-danger">{{ $message }}</small></p>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-12 mt-1">
                                    <button type="submit" class="btn btn-primary me-1">
                                        <i data-feather="save" class="me-25"></i> {{ $isEdit ? __('locale.buttons.update') : __('locale.buttons.save') }}
                                    </button>
                                    <a href="{{ route('admin.login-sliders.index') }}" class="btn btn-outline-secondary">{{ __('locale.buttons.back') }}</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection