@extends('layouts.app')

@section('title')
    {{ __('Manage Files') }}
@endsection

@section('files')
    active
@endsection

@section('section.header')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ __('manage_downloaded_files') }}</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('app.index') }}">{{ __('home') }}</a></li>
                        <li class="breadcrumb-item active">{{ __('Files') }}</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>
@endsection

@section('section.content')
    <section class="content">
        @if (Session::has('success'))
            <div id="message-alert" class="alert alert-success">
                {{ Session::get('success') }}
            </div>
        @endif
        @if (Session::has('error'))
            <div id="message-alert" class="alert alert-danger">
                {{ Session::get('error') }}
            </div>
        @endif
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{ __('list_file') }}</h3>
            </div>

            <div class="card-body pb-0">
                <form method="GET">
                    <div class="row">

                        @if (auth()->user()->hasRole('admin'))
                            <div class="col-12 col-md-4">
                                <div class="form-group">
                                    <label>{{ __('Người tải') }}</label>
                                    <select name="user_id" class="form-control">
                                        <option value="">{{ __('-- Tất cả người tải --') }}</option>
                                        @foreach ($users as $u)
                                            <option value="{{ $u->id }}"
                                                {{ request('user_id') == $u->id ? 'selected' : '' }}>
                                                {{ $u->username }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        @endif

                        <div class="col-12 col-md-3">
                            <div class="form-group">
                                <label>{{ __('Từ ngày') }}</label>
                                <input type="date" name="from_date" class="form-control"
                                    value="{{ request('from_date', now()->toDateString()) }}">
                            </div>
                        </div>

                        <div class="col-12 col-md-3">
                            <div class="form-group">
                                <label>{{ __('Đến ngày') }}</label>
                                <input type="date" name="to_date" class="form-control"
                                    value="{{ request('to_date', now()->toDateString()) }}">
                            </div>
                        </div>

                        {{-- Nút: canh đáy, desktop nằm cùng hàng; mobile nằm full width --}}
                        <div class="col-12 col-md-2">
                            <div class="form-group d-flex align-items-end" style="gap:8px;">
                                <button class="btn btn-primary">
                                    <i class="fas fa-filter mr-1"></i> {{ __('Lọc') }}
                                </button>

                                <a class="btn btn-outline-secondary"
                                    href="{{ route('app.file.index', ['from_date' => now()->toDateString(), 'to_date' => now()->toDateString(), 'user_id' => request('user_id')]) }}">
                                    {{ __('Hôm nay') }}
                                </a>
                            </div>
                        </div>

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

            <div class="card-body pt-2">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped text-center align-middle" id="listFileDownload">
                        <thead style="text-align: center">
                            <tr>
                                <th>{{ __('ID') }}</th>
                                <th>{{ __('creator') }}</th>
                                <th>{{ __('file_name') }}</th>
                                <th>{{ __('file_size') }}</th>
                                <th>{{ __('status') }}</th>
                                <th>{{ __('created_date') }}</th>
                                <th style="width: 130px">{{ __('operation') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($files as $file)
                                <tr>
                                    <td>{{ $file->id }}</td>
                                    <td>{{ $file->user->username ?? '' }}</td>
                                    <td class="text-left">{{ $file->file_name }}</td>
                                    <td>{{ formatBytes($file->file_size) }}</td>
                                    <td>
                                        @if ($file->state == 'processing')
                                            <span class="badge bg-primary">
                                                <i class="fas fa-spinner fa-spin mr-1"></i>{{ __('Đang xử lí') }}
                                            </span>
                                        @elseif($file->state == 'processed')
                                            <span class="badge bg-success">{{ __('success') }}</span>
                                        @else
                                            <span class="badge bg-danger">{{ __('error') }}</span>
                                        @endif
                                    </td>
                                    <td>{{ formatTime($file->created_at) }}</td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            @if ($file->state == 'processed')
                                                <a class="btn btn-sm btn-primary"
                                                    href="{{ route('app.file.download', ['file' => $file->id]) }}"
                                                    title="{{ __('download') }}">
                                                    <i class="fas fa-download"></i>
                                                </a>
                                            @else
                                                {{-- Chưa xong hoặc lỗi thì không có gì để tải --}}
                                                <button type="button" class="btn btn-sm btn-secondary btn-download-file"
                                                    data-state="{{ $file->state }}"
                                                    title="{{ __('download') }}">
                                                    <i class="fas fa-download"></i>
                                                </button>
                                            @endif

                                            <form method="POST"
                                                action="{{ route('app.file.delete', ['file' => $file->id]) }}"
                                                class="d-inline"
                                                onsubmit="return confirm({{ \Illuminate\Support\Js::from(__('Xoá file :name?', ['name' => $file->file_name])) }} + '\n' + {{ \Illuminate\Support\Js::from(__('Thao tác này không thể hoàn tác.')) }})">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-danger ml-1"
                                                    title="{{ __('Delete file') }}">
                                                    <i class="fas fa-trash-alt"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-muted py-4">
                                        <i class="fas fa-folder-open fa-2x d-block mb-2" style="opacity:.5"></i>
                                        {{ __('Không có file nào trong khoảng thời gian này') }}
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <!-- DataTables  & Plugins -->
    <script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
    <script type='text/javascript' src='https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js'></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Nút tải chỉ là <button> khi file chưa sẵn sàng — bấm vào thì giải
            // thích lí do thay vì im lặng không làm gì.
            document.querySelectorAll('.btn-download-file').forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();

                    if (this.dataset.state === 'processing') {
                        showToast({{ \Illuminate\Support\Js::from(__('File đang được tạo, vui lòng chờ và tải lại trang')) }}, 'warning');
                    } else {
                        showToast({{ \Illuminate\Support\Js::from(__('File tạo lỗi, vui lòng xuất lại')) }}, 'warning');
                    }
                });
            });
        });

        function showToast(message, type = 'info') {
            const toast = document.createElement('div');
            toast.className = `toast-msg toast-${type}`;
            toast.innerText = message;

            document.body.appendChild(toast);

            setTimeout(() => toast.classList.add('show'), 50);
            setTimeout(() => {
                toast.classList.remove('show');
                setTimeout(() => toast.remove(), 300);
            }, 3000);
        }
    </script>
@endsection

@section('styles')
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
    <style>
        .toast-msg {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: #333;
            color: #fff;
            padding: 12px 18px;
            border-radius: 6px;
            opacity: 0;
            transform: translateY(10px);
            transition: all .3s ease;
            z-index: 9999;
            font-size: 14px;
        }

        .toast-msg.show {
            opacity: 1;
            transform: translateY(0);
        }

        .toast-warning {
            background: #f39c12;
        }

        .card .form-group {
            margin-bottom: 12px;
        }

        /* mobile: nút full width cho dễ bấm */
        @media (max-width: 767.98px) {
            .card .form-group.d-flex>.btn {
                flex: 1;
            }
        }
    </style>
@endsection