@extends('backend.layouts.app')
@section('title', $menu . ' Files')

@push('style')
    <style>
        .file-card {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            height: 260px;
            background: #f3f3f3;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            transition: 0.3s ease-in-out;

            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .file-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
        }

        .thumb-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
        }

        .action-buttons {
            position: absolute;
            top: 12px;
            right: 12px;
            display: flex;
            gap: 8px;
            z-index: 20;
        }

        .icon-btn {
            width: 38px;
            height: 38px;
            background: rgba(0, 0, 0, 0.55);
            border-radius: 10px;
            border: none;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            color: white;
            transition: 0.25s ease;
        }

        .icon-btn:hover {
            background: #0d6efd;
        }

        .delete-btn:hover {
            background: #dc3545;
        }
    </style>
@endpush


@section('content')
    <div class="row">
        <div class="col-12">

            <div class="card">
                <div class="card-body">

                    <h5 class="card-header">{{ $menu }}@if ($submenu)
                            / {{ $submenu }}
                        @endif
                    </h5>

                    <div class="row mb-3">
                        <div class="col-sm-12 d-flex justify-content-end gap-2">
                            <button class="btn btn-primary mb-2" data-bs-toggle="modal" data-bs-target="#addFileModal">
                                <i class="bx bx-plus"></i> Add New File
                            </button>
                        </div>
                    </div>

                    <div class="row">
                        @forelse ($files as $file)
                            <div class="col-4 mb-5">
                                <div class="file-card">

                                    @if ($file->file_type == 'pdf')
                                        <i class="bx bxs-file-pdf pdf-icon"></i>
                                        <p class="fw-bold text-danger">PDF File</p>
                                    @else
                                        <img src="{{ asset($file->file_path) }}" class="thumb-img" alt="File Image">
                                    @endif

                                    <div class="action-buttons">

                                        <form method="POST" action="{{ route('admin.files.destroy', $file->id) }}"
                                            class="deleteForm">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="icon-btn delete-btn">
                                                <i class="bx bx-trash"></i>
                                            </button>
                                        </form>

                                    </div>

                                </div>
                            </div>
                        @empty
                            <div class="d-flex justify-content-center align-items-center">
                                <h5 class="text-muted">No files found.</h5>
                            </div>
                        @endforelse
                    </div>

                    <div class="mt-3">
                        {{ $files->links() }}
                    </div>

                </div>
            </div>

        </div>
    </div>

    <div class="modal fade" id="addFileModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">

                <form action="{{ route('admin.files.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <div class="modal-header">
                        <h5 class="modal-title">Add File</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">

                        <input type="hidden" name="menu" value="{{ $menu }}">
                        <input type="hidden" name="content_for" value="{{ $menu }}">
                        <input type="hidden" name="submenu" value="{{ $submenu }}">
                        <input type="hidden" name="file_type" value="image">

                        <label class="form-label mt-3">Upload File(s)</label>
                        <input type="file" name="file[]" class="form-control" accept="image/*" multiple required>

                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>

                </form>

            </div>
        </div>
    </div>

@endsection


@push('script')
    <script>
        $('.deleteForm').on('submit', function(e) {
            e.preventDefault();
            let form = this;

            Swal.fire({
                title: "Are you sure?",
                text: "You want to delete this file!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Yes, Delete!"
            }).then((result) => {
                if (result.isConfirmed) {
                    form.submit();
                }
            });
        });
    </script>
@endpush