@extends('adminlte::page')

@section('title', 'Formulario')

@section('content_header')
<h1>Administrador Study Abroad</h1>
@stop
@section('content')
    <div class="container">
        <h1>Editar Slider</h1>
        <form action="{{ route('slider.update', $slider) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            @include('admin.partials.translatable-input', ['label' => 'Título', 'name' => 'title', 'model' => $slider])
            @include('admin.partials.translatable-input', ['label' => 'Descripción', 'name' => 'description', 'model' => $slider, 'type' => 'textarea'])
            <div class="form-group">
                <label>Foto Mobile</label>
                <input type="file" name="mobile_image" class="form-control">
                @if($slider->mobile_image)
                    <a href="{{ URL::to('/') }}/sliders/mobile/{{ $slider->mobile_image }}" target="_blank">Ver Foto Cargada</a>
                @endif
            </div>
            <div class="form-group">
                <label>Foto Desktop</label>
                <input type="file" name="desktop_image" class="form-control">
                @if($slider->desktop_image)
                    <a href="{{ URL::to('/') }}/sliders/desktop/{{ $slider->desktop_image }}" target="_blank">Ver Foto
                        Cargada</a>
                @endif
            </div>
            <div class="form-group">
                <label>Link</label>
                <input type="url" name="link" class="form-control" value="{{ $slider->link }}" required>
            </div>
            <div class="form-group">
                <div class="custom-control custom-checkbox">
                    <input class="custom-control-input" type="checkbox" id="show_caption" name="show_caption" {{ $slider->show_caption ? 'checked' : '' }}>
                    <label for="show_caption" class="custom-control-label">Mostrar Caption</label>
                </div>
            </div>
            <button type="submit" class="btn btn-success">Actualizar</button>
        </form>
    </div>
@endsection

@section('css')
<style>
    /* Opcional: estilo personalizado */
    .custom-input {
        width: 150px;
        height: 30px;
    }
</style>
@stop