@extends('crm.master.master')
@section('content')
    <div class="page-title"><i class="fas fa-cogs m-2"></i> Fotos na Lixeira</div>
    <!-- Main content -->
    <div class="content">
        <div class="row">
            <div class="card-body">
                <div class="col-md-12">
                    <div class="tab-content" id="myTabContent">

                        @if ($errors->any())
                            @foreach ($errors->all() as $error)
                                <div class="alert alert-danger alert-dismissible">
                                    <button type="button" class="close" data-dismiss="alert"
                                        aria-hidden="true">&times;</button>
                                    <h5 class="pt-2"><i class="icon fas fa-exclamation-triangle"></i>
                                        {{ $error }}</h5>
                                </div>
                            @endforeach
                        @endif
                        @if (session()->exists('success.message'))
                            <div class="alert alert-success alert-dismissible">
                                <button type="button" class="close" data-dismiss="alert"
                                    aria-hidden="true">&times;</button>
                                <h5 class="pt-2"><i class="icon fas fa-check"></i>
                                    {{ session()->get('success.message') }}</h5>
                            </div>
                        @endif

                        <div class="card">
                            <!-- /.card-header -->
                            <div class="card-body">

                                <div class="row">

                                    <h4 class="mb-3"><i class="fas fa-tools mr-1"></i> Fotos na Lixeira</h4>

                                    <table id="example1" class="table table-bordered table-striped align-middle display">
                                        <thead>
                                            <tr>
                                                <th style="width: 10px">ID</th>
                                                <th style="width: 180px">Foto</th>
                                                <th>Legenda</th>
                                                <th style="width:3%; vertical-align: middle;"></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($photos_trashed as $photo_trashed)
                                                <tr>
                                                    <td style="vertical-align: middle;">
                                                        {{ $photo_trashed->id }}
                                                    </td>
                                                    <td style="vertical-align: middle;">
                                                        @if ($photo_trashed->photo)
                                                            <a href="#" data-toggle="modal"
                                                                data-target="#modalPhoto{{ $photo_trashed->id }}"
                                                                title="Clique para Visualizar">
                                                                <img src="{{ asset('storage/' . $photo_trashed->photo) }}"
                                                                    class="img-size-180">
                                                            </a>
                                                        @endif
                                                    </td>
                                                    <td style="vertical-align: middle;">
                                                        {{ $photo_trashed->caption }}
                                                    </td>
                                                    <td class="align-middle">
                                                        <form action="{{ route('crm.demand_photos.restore', $photo_trashed->id) }}"
                                                            class="restore-form" method="POST">
                                                            @csrf
                                                            <button type="button"
                                                                class="btn btn-warning btn-md btn-block mt-1 restore-button"
                                                                data-user-name="{{ $photo_trashed->id }}" title="Restaurar">
                                                                <i class="fas fa-trash-restore-alt"></i>
                                                            </button>
                                                        </form>
                                                        <form action="{{ route('crm.demand_photos.destroy', $photo_trashed->id) }}"
                                                            class="delete-form" method="POST">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="button"
                                                                class="btn btn-danger btn-md btn-block mt-1 delete-button"
                                                                data-user-name="{{ $photo_trashed->id }}" title="Excluir">
                                                                <i class="fas fa-trash"></i>
                                                            </button>
                                                        </form>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>

                                    </table>
                                </div>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->

                    </div><!-- /.container-fluid -->
                    </section>
                    <!-- /.content -->
                </div>
                <!-- /.content-wrapper -->

                <!-- SweetAlert2 -->
                <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
                <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>

                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        document.querySelectorAll('.restore-button').forEach(function(button) {
                            button.addEventListener('click', function() {
                                const userName = this.getAttribute('data-user-name');
                                const form = this.closest('.restore-form');

                                Swal.fire({
                                    title: 'Tem certeza?',
                                    text: "Você deseja RESTAURAR a Foto ID: " + userName +
                                        "?",
                                    icon: 'warning',
                                    showCancelButton: true,
                                    confirmButtonColor: '#3085d6',
                                    cancelButtonColor: '#d33',
                                    confirmButtonText: 'Sim, restaurar!',
                                    cancelButtonText: 'Cancelar'
                                }).then((result) => {
                                    if (result.isConfirmed) {
                                        form.submit();
                                    }
                                });
                            });
                        });
                    });
                </script>

                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        document.querySelectorAll('.delete-button').forEach(function(button) {
                            button.addEventListener('click', function() {
                                const userName = this.getAttribute('data-user-name');
                                const form = this.closest('.delete-form');

                                Swal.fire({
                                    title: 'Tem certeza?',
                                    text: "Você deseja EXCLUIR PERMANENTEMENTE a Foto ID: " + userName +
                                        "?",
                                    icon: 'warning',
                                    showCancelButton: true,
                                    confirmButtonColor: '#3085d6',
                                    cancelButtonColor: '#d33',
                                    confirmButtonText: 'Sim, excluir permanentemente!',
                                    cancelButtonText: 'Cancelar'
                                }).then((result) => {
                                    if (result.isConfirmed) {
                                        form.submit();
                                    }
                                });
                            });
                        });
                    });
                </script>

            @endsection