@extends('layouts.master')

@section('title')
    LT-168 :: xxx
@endsection

@section('sub_title')
    
@endsection

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

            <div class="card">
                <div class="card-header border-0">
                    <div class="row align-items-center">
                        <div class="col">
                            <div class="d-flex align-items-center">
                                    <h3 class="mb-0">รายการแบ็คอัพ</h3>
                                    <span id="backup-status" class="badge badge-success text-sm ml-2">
                                        สถานะ: <i class="fas fa-check-circle"></i> พร้อมสำรองข้อมูล
                                    </span>
                            </div>
                        </div>
                        <div class="col text-right">
                            <button onclick="startBackup(this)" class="btn btn-sm btn-primary">
                                <i class="fas fa-play text-white-50 mr-1"></i> เริ่มต้นการสำรองข้อมูล</button>
                        </div>
                    </div>
                </div>
                <div class="card-body table-responsive py-3">
                    <table id="main-table" class="table table-sm table-hover">
                        <thead>
                            <tr>
                                <th class="align-middle text-center font-weight-bold">วันที่สำรองข้อมูล</th>
                                <th class="align-middle text-center font-weight-bold">ชื่อไฟล์</th>
                                <th class="align-middle text-center font-weight-bold">ขนาด</th>
                                <th class="align-middle text-center font-weight-bold">ดำเนินการ</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($datas as $data)
                            <tr>
                                <td class="align-middle text-center font-weight-bold">{{ $data['thDatetime'] }}</td>
                                <td class="align-middle text-center font-weight-bold text-dark">
                                    <span class="badge badge-primary text-xs">{{ $data['filename'] }}</span>
                                </td>
                                <td class="align-middle text-center font-weight-bold">
                                    {{ formatBytes($data['size'], 2) }}
                                </td>
                                <td class="align-middle text-center font-weight-bold d-flex justify-content-around">
                                    <a href="javascript:;" onclick="downloadItem(this)" data-item-path="{{ urlencode($data['filename']) }}">ดาวน์โหลด</a>
                                    <span>|</span>
                                    <a href="javascript:;" class="text-danger" onclick="" data-item-path="{{ urlencode($data['filename']) }}">ลบ</a>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        function pageInit()
        {
            $.get(`{{ url()->current() }}`, {}, function (element) {
                const table = $(element).find('#main-table').html();
                $('#main-table').html(table);
            });
        }

        function startBackup(el)
        {
            const self = $(el);
            self.prop('disabled', true);
            updateStatus('load');
            $.post(`{{ route('database.index') }}`, {}, function (res) {
                if (res.success) {
                    pageInit();
                    swal('สำรองข้อมูลเรียบร้อย', ' ', 'success', { buttons: false, timer: 1500, });
                    updateStatus('success');
                    self.prop('disabled', false);
                }
            }, 'json');
        }

        function updateStatus(code)
        {
            const target = $('#backup-status');
            let htmlStatus;
            switch (code)
            {
                case 'success' : {
                    target.removeClass('badge-warning');
                    target.addClass('badge-success');
                    htmlStatus = `สถานะ: <i class="fas fa-check-circle"></i> พร้อมสำรองข้อมูล`;
                    break;
                }
                case 'load' : {
                    target.removeClass('badge-success');
                    target.addClass('badge-warning');
                    htmlStatus = `สถานะ: <i class="fas fa-sync fa-spin"></i> อยู่ระหว่างสำรองข้อมูล`;
                    break;
                }
            }

            target.html(htmlStatus);
        }

        function downloadItem(el){
            const self = $(el);
            const targetUrl = `{{ route('database.index') }}/download/${self.data('item-path')}`;
            window.open(targetUrl, '_blank');
        }
    </script>
@endsection