@extends('layouts.default')

@section('title')
    Editar Coach
@stop

@section('header_styles')
    <!-- Toastr CSS -->
    <link href="{{ asset('vendors/toastr/css/toastr.css') }}" rel="stylesheet" type="text/css" />
@stop

@section('content')
    <section class="content-header">
        <div aria-label="breadcrumb" class="card-breadcrumb">
            <h1>Editar Coach</h1>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('preparador.index') }}">Preparadores Físicos</a></li>
                <li class="breadcrumb-item active" aria-current="page">Editar Coach</li>
            </ol>
        </div>
        <div class="separator-breadcrumb border-top"></div>
    </section>

    <section class="content">
        <div class="row">
            <div class="col-lg-12 col-12">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h3 class="card-title d-inline">Editar Coach</h3>
                        <span class="float-end">
                            <i class="fa fa-chevron-up clickable"></i>
                            <i class="fa fa-times removepanel clickable"></i>
                        </span>
                    </div>
                    <div class="card-body">
                        <!-- Toastr Notifications -->
                        @if ($errors->any())
                            <script>
                                toastr.error(`{{ implode(' ', $errors->all()) }}`);
                            </script>
                        @endif

                        @if (session('success'))
                            <script>
                                toastr.success(`{{ session('success') }}`);
                            </script>
                        @endif

                        @if (session('error'))
                            <script>
                                toastr.error(`{{ session('error') }}`);
                            </script>
                        @endif

                        <!-- Formulario -->
                        <form action="{{ route('preparador.update', $preparador->id) }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')
                            <div class="form-body">
                                <div class="row mb-3">
                                    <label for="name" class="col-md-3 form-label">Nombre</label>
                                    <div class="col-md-9">
                                        <input type="text" class="form-control" id="name" name="name" value="{{ $preparador->name }}" required>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="email" class="col-md-3 form-label">Correo Electrónico</label>
                                    <div class="col-md-9">
                                        <input type="email" class="form-control" id="email" name="email" value="{{ $preparador->email }}" required>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="edad" class="col-md-3 form-label">Edad</label>
                                    <div class="col-md-9">
                                        <input type="number" class="form-control" id="edad" name="edad" value="{{ $preparador->edad }}" required>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="profesion" class="col-md-3 form-label">Profesión</label>
                                    <div class="col-md-9">
                                        <input type="text" class="form-control" id="profesion" name="profesion" value="{{ $preparador->profesion }}" required>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="certificado" class="col-md-3 form-label">Certificado</label>
                                    <div class="col-md-9">
                                        <input type="file" class="form-control" id="certificado" name="certificado" accept=".pdf,.jpg,.jpeg,.png">
                                        <small class="text-muted">Archivo actual: <a href="{{ asset('storage/' . $preparador->certificado) }}" target="_blank">{{ $preparador->certificado }}</a></small>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="imagen" class="col-md-3 form-label">Foto de Perfil</label>
                                    <div class="col-md-9">
                                        <input type="file" class="form-control" id="imagen" name="imagen" accept=".jpg,.jpeg,.png">
                                        @if ($preparador->imagen)
                                            <div class="mt-2">
                                                <img src="{{ asset('storage/' . $preparador->imagen) }}" alt="Imagen de perfil" class="img-thumbnail" style="width: 100px;">
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-offset-3 col-md-9 ms-auto mb-3">
                                    <button type="submit" class="btn btn-primary">Actualizar</button>
                                    <a href="{{ route('preparador.index') }}" class="btn btn-danger">Cancelar</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@stop

@section('footer_scripts')
    <!-- Toastr JS -->
    <script src="{{ asset('vendors/toastr/js/toastr.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            toastr.options = {
                "closeButton": true,
                "progressBar": true,
                "positionClass": "toast-top-right",
                "timeOut": "5000"
            };

            @if ($errors->any())
                toastr.error(`{{ implode(' ', $errors->all()) }}`);
            @endif

            @if (session('success'))
                toastr.success(`{{ session('success') }}`);
            @endif

            @if (session('error'))
                toastr.error(`{{ session('error') }}`);
            @endif
        });
    </script>
@stop