@extends('layouts.index')

@section('content')

@include('layouts.include._breadcrumb')

@push('css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="{{asset('assets/css/custom.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('assets/libs/bootstrap-datepicker/css/bootstrap-datepicker.min.css')}}">
    <style type="text/css">
        table th{
            vertical-align: middle;
        }
        .rupiah{
            text-align: right;
        }
    </style>
    <style>
        @keyframes placeHolderShimmer{
            0%{
                background-position: -468px 0
            }
            100%{
                background-position: 468px 0
            }
        }
        .linear-background {
            animation-duration: 1s;
            animation-fill-mode: forwards;
            animation-iteration-count: infinite;
            animation-name: placeHolderShimmer;
            animation-timing-function: linear;
            background: #f6f7f8;
            background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
            background-size: 1000px 104px;
            height: 20px;
            position: relative;
            overflow: hidden;
        }
    </style>
@endpush

<div class="page-content">
    <div class="container-fluid">

        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-flex align-items-center justify-content-between">
                    <div class="page-title">
                        <h4 class="mb-0 font-size-18"> {{ $title }}</h4>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item active">Welcome to {{ env('APP_NAME') }}</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <!-- end page title -->

        <div class="page-content-wrapper">

            <div class="row">
                <div class="col">
                    <div class="card">

                        <div class="card-body">
                            <div class="d-flex justify-content-between w-100 align-items-center mt-3">
                                <form action="{{ route('mirror.upload_excel') }}" id="" method="POST" class="d-flex w-75" enctype="multipart/form-data">
                                    @csrf
                                    <label class="form-control-label pt-2 mx-3 text-nowrap" for="tipe">Upload data yang ingin di import :</label>


                                    <input class="form-control" type="file" name='excel_file' id="excelFile" accept=".xls, .xlsx" required>

                                    <button id="btn-submit" type="submit" class="mx-3 btn btn-primary btn-generate text-nowrap">Update Data</button>
                                </form>
                            </div>
                        </div>

                        <div class="card-body">
                            @role('admin-opd|admin-PPTK')
                                    <div class="alert alert-danger">
                                        <li>Hanya Admin Utama yang dapat melakukan pembaruan rekap realisasi OPD</li>
                                    </div>
                                @endrole
                                @role('admin')
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="alert alert-warning" style="display:none;">
                                            Selama proses pembaruan pastikan anda memiliki koneksi internet dan jangan menutup halaman! 
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    {{-- <div class="col-md-2">
                                        <button class="btn btn-primary btn-generate">Perbaharui Rekap OPD</button>
                                    </div> --}}
                                    <div class="col-md-12">
                                        <div class="progress" style="height:35px; display:none;">
                                            <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:0%"><span style="font-size:14px;">Sedang melakukan pembaruan... <span class="percent-now"></span></span> </div>
                                        </div>
                                        
                                        <div class="alert alert-success" style="height:36px;">
                                            {{-- @if(isset($last_generate)) <i class="fa fa-clock"></i>    terakhir diperbarui pada {{ $last_generate->last_generate }} @else belum pernah diperbarui @endif  --}}
                                        </div>
                                    </div>
                                </div>
                                <br>
                                @endrole
                        </div>

                        {{-- <div class="card-body">
                            <div class="card-title">
                                <div class="row">
                                    <div class="col-6">
                                        <h3 class="mb-0">Data {{$title}}</h3>
                                    </div>
                                   
                                </div>
                            </div>
                            <div class="table-responsive py-4">
                                
                            </div>
                        </div> --}}
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
@endsection

@push('js')

@endpush