@extends("admin.layout.layout")
@section("styles")
    @php
        $titulo = "Circulares";
        $modulo = "Circulares";
        $vista="Editar circular";
    @endphp
    <title>{{getenv("APP_NAME")}} | {{$titulo}}</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.css">

@endsection

@section("contenido")
    <div class="row gx-5 gx-xl-10">
        <div class="card">
            <form action="{{route("admin::circular.guardar",$id->id)}}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="card-body ">
                    <div class="row pb-2">
                        <div class="col-3 pb-2">
                            <div class="form-group">
                                <label for="nivel" class="required">Fecha</label>
                                <input type="date" class="form-control" name="fecha" id="fecha" value="{{$id->fecha}}" required>
                            </div>
                        </div>
                        <div class="col-12 pb-2">
                            <div class="form-group">
                                <label for="nivel" class="required">Titulo</label>
                                <input type="text" class="form-control" name="titulo" id="titulo" value="{{$id->titulo}}" required>
                            </div>
                        </div>
                        <div class="col-12 pb-2">
                            <div class="form-group">
                                <label for="descripcion" class="required">Descripción</label>
                                <textarea  class="form-control" name="descripcion" id="descripcion"  required>{{$id->descripcion}}</textarea>
                            </div>
                        </div>
                        <hr>
                        <div class="col-12 pb-2">

                            <table class="table">
                                @foreach($id->media as $media)
                                    <tr>
                                        <td>
                                            <a href="{{$media->original_url}}" target="_blank">{{$media->file_name}}</a>
                                        </td>
                                        <td>
                                        <td>
                                            <a href="javascript:;" data-id="{{$media->id}}" class="btn btn-danger btn-sm borrarAdjunto">Borrar archivo</a>
                                        </td>
                                    </tr>
                                @endforeach
                            </table>
                        </div>

                        <hr>
                        <div class="col-12 pb-2">
                            <div class="form-group divAdjunto">
                                <label>Nuevos Adjuntos</label>
                                <input type="file" id="archivos" multiple name="archivos[]" class="dropify inputFile" accept=".pdf, .png, .jpg, .jpeg">
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="d-flex justify-content-between">
                            <div class="col-md-6 text-start">  <!-- Alineación a la izquierda -->
                                @can("Circulares borrar")
                                    <button class="btn btn-sm btn-danger btnBorrarCircular" data-id="{{$id->id}}" type="button">
                                        <i class="fas fa-trash pe-2"></i> Borrar circular
                                    </button>
                                @endcan
                            </div>
                            <div class="col-md-6 text-center">  <!-- Alineación al centro -->
                                <button class="btn btn-sm btn-success" type="submit">
                                    <i class="fas fa-save pe-2"></i> Guardar
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section("scripts")
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js"></script>
    <script>
        $(document).ready(function(){
            $('.dropify').dropify({messages: {'default': 'Arrastra y suelta un archivo aquí o haz clic', 'replace': 'Arrastra y suelta un archivo o haz clic para reemplazar', 'remove':  'Eliminar archivo', 'error':   'Ooops, algo salió mal.'}});

            $(document).on("click",".borrarAdjunto",function(){
                let id  = $(this).data("id");
                Swal.fire({
                    title: '¿Está seguro de eliminar el archivo?',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#a80707',
                    cancelButtonColor: '#a1a1a1',
                    cancelButtonText: 'Cancelar',
                    confirmButtonText: 'Sí, Eliminar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        let url= "{{route("admin::circular.borrarAdjunto",":id")}}".replace(":id",id);
                        let ajax=$.ajax({
                            url: url,
                            type: 'delete',
                            dataType:"json",
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                        });
                        ajax.done(function(response) {
                            location.reload();
                        });
                        ajax.fail(function(error) {
                            console.error('Error en la solicitud AJAX', error);
                        });
                    }
                });
            });

            $(document).on("click",".btnBorrarCircular",function(){
                let id  = $(this).data("id");
                Swal.fire({
                    title: '¿Está seguro de eliminar circular?',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#a80707',
                    cancelButtonColor: '#a1a1a1',
                    cancelButtonText: 'Cancelar',
                    confirmButtonText: 'Sí, Eliminar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        let url= "{{route("admin::circular.borrar",":id")}}".replace(":id",id);
                        let ajax=$.ajax({
                            url: url,
                            type: 'delete',
                            dataType:"json",
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                        });
                        ajax.done(function(response) {
                            location.href="{{route("admin::circulares.listado")}}";
                        });
                        ajax.fail(function(error) {
                            console.error('Error en la solicitud AJAX', error);
                        });
                    }
                });
            });


        });
    </script>

@endsection