@extends('layouts.md-admin')
@section('title', trans('cruds.slider.title'))
@section('content')

    <div class="card">

        <div class="row card-header">
            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
                <h6> {{ trans('global.edit') }} {{ trans('cruds.slider.title_singular') }}</h6>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                <div class="right-content">
                    <a class="btn btn-sm btn-dark" href="{{ route('admin.sliders.index') }}">
                        {{ trans('global.back') }}
                    </a>
                </div>
            </div>
        </div>

        <div class="card-body">
            <form method="POST" action="{{ route('admin.sliders.update', [$slider->id]) }}" enctype="multipart/form-data"
                class="text-start artical">
                @method('PUT')
                @csrf
                <div class="form-group">
                    <label class="required" for="title">{{ trans('cruds.slider.fields.title') }}</label>
                    <div class="input-group input-group-outline mb-3">
                        <input class="form-control {{ $errors->has('title') ? 'is-invalid' : '' }}" type="text"
                            name="title" id="title" value="{{ old('title', $slider->title) }}" required
                            maxlength="255">
                    </div>
                    @if ($errors->has('title'))
                        <div class="invalid-feedback">
                            {{ $errors->first('title') }}
                        </div>
                    @endif
                    <span class="help-block">{{ trans('cruds.slider.fields.title_helper') }}</span>
                </div>
                <div class="form-group">
                    <label class="required" for="title">{{ trans('cruds.slider.fields.image') }}</label>
                    <div class="input-group input-group-outline mb-3">
                        <input class="form-control {{ $errors->has('image') ? 'is-invalid' : '' }}" type="file"
                            name="image" id="image" value="{{ old('image', $slider->image) }}">
                    </div>
                    <p><strong>Allowed File Type: jpg, jpeg, png</strong></p>
                    <input type="hidden" name="old-image" value="{{ $slider->image }}">

                    @if ($slider->image)
                        <a href="{{ $filePath . '/' . $slider->image . '' }}" target="_blank">
                            <span class="img-title">{{ $slider->image }}</span> <img
                                src="{{ $filePath . '/' . $slider->image . '' }}" height="50" width="50"
                                alt="Italian Trulli">
                        </a>
                    @endif

                    @if ($errors->has('image'))
                        <div class="invalid-feedback">
                            {{ $errors->first('image') }}
                        </div>
                    @endif
                    <span class="help-block">{{ trans('cruds.slider.fields.image_helper') }}</span>
                </div>
                <div class="form-group">
                    <label class="required" for="order_by">{{ trans('cruds.slider.fields.order_by') }}</label>
                    <div class="input-group input-group-outline mb-3">
                        <input class="form-control {{ $errors->has('order_by') ? 'is-invalid' : '' }}" type="text"
                            name="order_by" id="order_by" onInput="this.value=this.value.replace(/[^0-9]/g,'');"
                            value="{{ old('order_by', $slider->order_by) }}" step="1" required maxlength="3">
                    </div>
                    @if ($errors->has('order_by'))
                        <div class="invalid-feedback">
                            {{ $errors->first('order_by') }}
                        </div>
                    @endif
                    <span class="help-block">{{ trans('cruds.slider.fields.order_by_helper') }}</span>
                </div>
                <div class="form-group">
                    <label class="required">{{ trans('cruds.slider.fields.status') }}</label>
                    <div class="input-group input-group-outline mb-3">
                        <select class="form-control {{ $errors->has('status') ? 'is-invalid' : '' }}" name="status"
                            id="status" required>
                            <option value disabled {{ old('status', null) === null ? 'selected' : '' }}>
                                {{ trans('global.pleaseSelect') }}</option>
                            @foreach (App\Models\Slider::STATUS_SELECT as $key => $label)
                                <option value="{{ $key }}"
                                    {{ old('status', $slider->status) === (string) $key ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    @if ($errors->has('status'))
                        <div class="invalid-feedback">
                            {{ $errors->first('status') }}
                        </div>
                    @endif
                    <span class="help-block">{{ trans('cruds.slider.fields.status_helper') }}</span>
                </div>
                <div class="form-group">
                    <button class="btn btn-sm btn-dark" type="submit">
                        {{ trans('global.save') }}
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection
@section('scripts')
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $("#image").change(function() {
            var fileExtension = ['jpg', 'jpeg', 'png'];
            if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                Swal.fire({
                    title: "Suitable files are " + fileExtension.join(', '),
                    icon: "warning",
                    confirmButtonText: 'Ok',
                    dangerMode: true,
                })
                $(this).val('');
            }
        });
    </script>
@endsection