@extends('layout.app')

@section('content')
    <div class="card">
        <div class="card-header">
            <h4 class="mb-0">{{ $page_title }}</h4>
            <small class="text-muted">storage/app/public/clientFile</small>
        </div>
        <div class="card-body">
            <form action="{{ route('client-files.index') }}" method="GET" class="row">
                <div class="col-md-3 mb-2">
                    <label>Start Date</label>
                    <input type="date" name="start_date" value="{{ request('start_date') }}" class="form-control">
                </div>
                <div class="col-md-3 mb-2">
                    <label>End Date</label>
                    <input type="date" name="end_date" value="{{ request('end_date') }}" class="form-control">
                </div>
                <div class="col-md-3 mb-2">
                    <label>Filename Keyword</label>
                    <input type="text" name="keyword" value="{{ request('keyword') }}" class="form-control"
                        placeholder="optional">
                </div>
                <div class="col-md-3 mb-2 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary me-2">Search</button>
                    <a href="{{ route('client-files.index') }}" class="btn btn-secondary">Reset</a>
                </div>
            </form>
        </div>
    </div>

    <div class="card mt-2">
        <div class="card-body">
            <p class="mb-2"><strong>{{ $files->count() }}</strong> file(s) found.</p>
            <div class="table-responsive">
                <table id="clientFileTable" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Filename</th>
                            <th>Size (KB)</th>
                            <th>Modified</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($files as $i => $file)
                            <tr>
                                <td>{{ $i + 1 }}</td>
                                <td>{{ $file['name'] }}</td>
                                <td data-order="{{ $file['size'] }}">{{ number_format($file['size'] / 1024, 2) }}</td>
                                <td>{{ $file['mtime'] }}</td>
                                <td>
                                    <a href="{{ $file['url'] }}" class="btn btn-sm btn-primary" target="_blank">Download</a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('ajax')
    <script>
        $(document).ready(function() {
            if ($.fn.DataTable.isDataTable('#clientFileTable')) {
                $('#clientFileTable').DataTable().destroy();
            }

            $('#clientFileTable').DataTable({
                order: [[3, 'desc']],
                pageLength: 25,
                lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                autoWidth: false,
                columnDefs: [
                    { orderable: false, targets: [4] },
                    { searchable: false, targets: [0, 4] }
                ]
            });
        });
    </script>
@endsection