@extends('layouts.panel')
@section('content')
    <link rel="stylesheet" href="{{ url('css/rifas-form.css') }}">

    <div class="form-rifas-container">
        <div class="form-rifas-header">
            <h2>Modificar Datos de la Rifa</h2>
        </div>

        <form action="{{ url('rifas', $rifa->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <div class="form-rifas-body">
                <div class="was-validated">
                    <div class="form-row">
                        <div class="col-12 col-md-12 mb-3">
                            <label for="validationSample00">Título Rifa</label>
                            <input type="text" name="tituloRifa" class="form-control" id="validationSample00"
                                placeholder="Título de la rifa" required="" value="{{ $rifa->tituloRifa }}">
                            <div class="invalid-feedback">Por favor proporcione un título.</div>
                            <div class="valid-feedback">¡Se ve bien!</div>
                        </div>

                        <div class="col-12 col-md-6 mb-3">
                            <label for="validationSample01">Nombre Rifa</label>
                            <input type="text" name="nombre" class="form-control" id="validationSample01"
                                placeholder="Nombre de la rifa" required="" value="{{ $rifa->nombre }}">
                            <div class="invalid-feedback">Por favor proporcione un nombre.</div>
                            <div class="valid-feedback">¡Se ve bien!</div>
                        </div>
                        <div class="col-12 col-md-6 mb-3">
                            <label for="validationSample02">Precio</label>
                            <input type="text" name="valor" class="form-control" id="validationSample02"
                                placeholder="Valor de la rifa" required="" value="{{ $rifa->valor }}">
                            <div class="invalid-feedback">Por favor proporcione un valor.</div>
                            <div class="valid-feedback">¡Se ve bien!</div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-12 col-md-6 mb-3">
                            <label for="foto">Foto</label>
                            <input type="file" name="foto" class="form-control" id="foto">
                            <small style="color: #6c757d; font-size: 12px;">Dejar vacío para mantener la foto actual</small>
                        </div>

                        <div class="col-12 col-md-6 mb-3">
                            <label for="validationSample12">Cantidad Boletas</label>
                            <input type="text" name="boleta_id" class="form-control" id="validationSample12"
                                placeholder="Ej: 2,8,10,60" required="" value="{{ $rifa->boleta_id }}">
                            <div class="invalid-feedback">Por favor proporcione las cantidades de boletas.</div>
                            <div class="valid-feedback">¡Se ve bien!</div>

                            <div class="nota-boletas">
                                <span class="titulo">IMPORTANTE LEER:</span>
                                <p class="contenido">
                                    SEPARAR LOS NÚMEROS POR <b>" , "</b><br>
                                    <span class="ejemplo">EJEMPLO: 2,8,10,60 | MÁXIMO 4</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-rifas-actions">
                <button class="btn btn-guardar-rifa" type="submit">
                    <i class="material-icons">save</i> Modificar Rifa
                </button>
                <a class="btn btn-volver-rifas" href="{{ url('rifas') }}">
                    <i class="material-icons">arrow_back</i> Volver al listado de Rifas
                </a>
            </div>
        </form>
    </div>
@endsection