@extends('user.layouts.app')

@php
    // Byte conversion
    function formatBytes($size, $precision = 2)
    {
        $base = log($size, 1024);
        $suffixes = ['', 'kB', 'MB', 'GB', 'TB'];

        return round(pow(1024, $base - floor($base)), $precision) . '' . $suffixes[floor($base)];
    }
@endphp

{{-- Custom CSS & JS --}}
@section('custom-css')
    <link rel="stylesheet" href="{{ asset('css/lightgallery.min.css') }}" />
    <script src="{{ asset('js/lightgallery.min.js') }}"></script>
    <script src="{{ asset('js/clipboard.min.js') }}"></script>
    <style>
        .form-imagecheck {
            width: 100%;
        }

        .form-imagecheck-figure {
            box-shadow: none !important;
        }

        .word-break {
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
@endsection

@section('content')
    <div class="page-wrapper">
        <div class="container-fluid">
            <!-- Page title -->
            <div class="page-header d-print-none">
                <div class="row align-items-center">
                    <div class="col">
                        <div class="page-pretitle">
                            {{ __('Overview') }}
                        </div>
                        <h2 class="page-title">
                            {{ __('Optimize') }}
                        </h2>
                    </div>
                    <!-- Page title actions -->
                    <div class="col-auto ms-auto d-print-none">
                        <div class="btn-list">
                            <a class="btn btn-primary d-none" id="bulk_download_optimer_id"
                                data-route="{{ route('user.bulk.download') }}" data-bs-toggle="tooltip"
                                data-bs-placement="top" title="{{ __('Bulk Download') }}">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-zip"
                                    width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
                                    fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                    <path d="M6 20.735a2 2 0 0 1 -1 -1.735v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2h-1" />
                                    <path d="M11 17a2 2 0 0 1 2 2v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-2a2 2 0 0 1 2 -2z" />
                                    <path d="M11 5l-1 0" />
                                    <path d="M13 7l-1 0" />
                                    <path d="M11 9l-1 0" />
                                    <path d="M13 11l-1 0" />
                                    <path d="M11 13l-1 0" />
                                    <path d="M13 15l-1 0" />
                                </svg>
                                <span class="d-none d-sm-inline-block">{{ __('Download') }}</span>
                            </a>
                            <a class="btn btn-primary d-none" id="bulk_delete_optimer_id"
                                data-route="{{ route('user.bulk.delete') }}" data-bs-toggle="tooltip"
                                data-bs-placement="top" title="{{ __('Bulk Delete') }}">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trash"
                                    width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
                                    fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                    <path d="M4 7l16 0" />
                                    <path d="M10 11l0 6" />
                                    <path d="M14 11l0 6" />
                                    <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
                                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
                                </svg>
                                <span class="d-none d-sm-inline-block">{{ __('Delete') }}</span>
                            </a>
                            <a href="{{ route('user.create.optimer') }}" class="btn btn-primary" data-bs-toggle="tooltip"
                                data-bs-placement="top" title="{{ __('Upload') }}">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-upload"
                                    width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
                                    fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"></path>
                                    <polyline points="7 9 12 4 17 9"></polyline>
                                    <line x1="12" y1="4" x2="12" y2="16"></line>
                                </svg>
                                <span class="d-none d-sm-inline-block">{{ __('Upload') }}</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="page-body">
            <div class="container-fluid">

                {{-- Failed --}}
                @if (Session::has('failed'))
                    <div class="alert alert-important alert-danger alert-dismissible mb-2" role="alert">
                        <div class="d-flex">
                            <div>
                                {{ Session::get('failed') }}
                            </div>
                        </div>
                        <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
                    </div>
                @endif

                {{-- Success --}}
                @if (Session::has('success'))
                    <div class="alert alert-important alert-success alert-dismissible mb-2" role="alert">
                        <div class="d-flex">
                            <div>
                                {{ Session::get('success') }}
                            </div>
                        </div>
                        <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
                    </div>
                @endif

                <div class="row mb-4">
                    {{-- Today Optimize Images --}}
                    <div class="col-6 col-lg-4 mb-2">
                        <div class="card bg-custom1">
                            <div class="card-body text-custom">
                                <div class="d-flex align-items-center mb-3">
                                    <div class="subheader">{{ __('Today Optimizes') }}</div>
                                </div>
                                <div class="h1">{{ $today_optimized_images }}</div>
                            </div>
                        </div>
                    </div>

                    {{-- Today Optimize Size --}}
                    <div class="col-6 col-lg-4 mb-2">
                        <div class="card bg-custom2">
                            <div class="card-body text-custom">
                                <div class="d-flex align-items-center mb-3">
                                    <div class="subheader">{{ __('Today Optimize') }}</div>
                                </div>
                                <div class="h1">
                                    {{ $today_optimized_image_size != 0 ? formatBytes($today_optimized_image_size) : 0 }}
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Overall Optimize Size --}}
                    <div class="col-12 col-lg-4 mb-2">
                        <div class="card bg-custom3">
                            <div class="card-body text-custom">
                                <div class="d-flex align-items-center mb-3">
                                    <div class="subheader">{{ __('Overall Optimize') }}</div>
                                </div>
                                <div class="h1">
                                    {{ $overall_optimized_image_size != 0 ? formatBytes($overall_optimized_image_size) : 0 }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row row-deck row-cards" id="captions">
                    @if (!empty($optimers) && $optimers->count())
                        {{-- Optimize Images --}}
                        @foreach ($optimers as $optimer)
                            <div class="col-6 col-lg-2">
                                <div class="card card-sm">
                                    <div class="d-block">
                                        <div class="item card-img-top img-responsive img-responsive-16by9"
                                            data-src="{{ $optimer->optimized_image }}"
                                            data-sub-html="<h4>{{ __('Name') }} : {{ $optimer->name }}</h4>"
                                            style="background-image: url({{ asset($optimer->optimized_image) }})">
                                        </div>
                                    </div>

                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-lg-2 col-2">
                                                <input class="form-check-input" type="checkbox"
                                                    value="{{ $optimer->id }}" class="form-imagecheck-input"
                                                    onclick="bulkDelete(this), bulkDownload(this)">
                                            </div>
                                            <div class="col-lg-8 col-8">
                                                <div class="font-weight-bold mb-2 word-break">
                                                    {{ $optimer->name }}
                                                </div>
                                                <div class="small">
                                                    <small>{{ __('Uploaded on:') }}{{ formatDateForUser($optimer->created_at) }}</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-2">
                                                <div class="card-actions">
                                                    <div class="dropdown">
                                                        <a href="#" class="btn-action dropdown-toggle"
                                                            data-bs-toggle="dropdown" aria-haspopup="true"
                                                            aria-expanded="false"><!-- Download SVG icon from http://tabler-icons.io/i/dots-vertical -->
                                                            <svg xmlns="http://www.w3.org/2000/svg" class="icon"
                                                                width="24" height="24" viewBox="0 0 24 24"
                                                                stroke-width="2" stroke="currentColor" fill="none"
                                                                stroke-linecap="round" stroke-linejoin="round">
                                                                <path stroke="none" d="M0 0h24v24H0z" fill="none">
                                                                </path>
                                                                <path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
                                                                <path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
                                                                <path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
                                                            </svg>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-end" style="">
                                                            <a class="dropdown-item copyBoard" data-bs-toggle="tooltip"
                                                                data-bs-placement="top" title="{{ __('Copy') }}"
                                                                data-clipboard-text="{{ url($optimer->optimized_image) }}">
                                                                {{ __('Copy') }}
                                                            </a>
                                                            <a class="dropdown-item" href="#"
                                                                data-bs-toggle="tooltip"
                                                                onclick="downloadImage('{{ $optimer->optimized_image }}', '{{ $optimer->name }}'); return false;"
                                                                data-bs-placement="top" title="{{ __('Download') }}">
                                                                {{ __('Download') }}
                                                            </a>
                                                            <a class="dropdown-item" href="#"
                                                                data-bs-toggle="tooltip" data-bs-placement="top"
                                                                title="{{ __('Delete') }}"
                                                                onclick="deleteOptimer('{{ $optimer->id }}', '{{ __('delete') }}'); return false;">
                                                                {{ __('Delete') }}
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="empty">
                            <div class="empty-img"><img src="{{ asset('images/undraw_printing_invoices_5r4r.svg') }}"
                                    width="300" height="128" alt="">
                            </div>
                            <p class="empty-title">{{ __('No optimize images found') }}</p>
                            <p class="empty-subtitle">
                                {{ __('Try adjusting your add to find what you are looking for.') }}
                            </p>
                        </div>
                    @endif

                    {{-- Pagination --}}
                    <div class="col-lg-12">
                        {{ $optimers->links() }}
                    </div>
                </div>
            </div>
        </div>

        {{-- Footer --}}
        @include('user.includes.footer')
    </div>

    {{-- Delete Optimize Modal --}}
    <div class="modal modal-blur fade" id="delete-modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="modal-title">{{ __('Are you sure?') }}</div>
                    <div id="delete_status"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary me-auto"
                        data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                    <a class="btn btn-danger" id="delete_optimer_id">{{ __('Yes, proceed') }}</a>
                </div>
            </div>
        </div>
    </div>

    {{-- Bulk Delete Optimize Modal --}}
    <div class="modal modal-blur fade" id="bulk-delete-modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="modal-title">{{ __('Are you sure?') }}</div>
                    <div id="bulk_delete_status"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary me-auto"
                        data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                    <a class="btn btn-danger" id="route_bulk_delete_optimer_id">{{ __('Yes, proceed') }}</a>
                </div>
            </div>
        </div>
    </div>

    {{-- Bulk Download Optimize Modal --}}
    <div class="modal modal-blur fade" id="bulk-download-modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="modal-title">{{ __('Are you sure?') }}</div>
                    <div id="bulk_download_status"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary me-auto"
                        data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                    <a class="btn btn-danger" id="route_bulk_download_optimer_ids">{{ __('Yes, proceed') }}</a>
                </div>
            </div>
        </div>
    </div>

    {{-- Download Optimize --}}
    <div class="modal modal-blur fade" id="download-modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="modal-title">{{ __('Download Formats') }}</div>
                    <div class="row">
                        <div class="col-6 col-sm-4 col-md-2 col-xl-3 py-3">
                            <a class="btn btn-blue w-100" id="jpgImage">
                                {{ __('JPG') }}
                            </a>
                        </div>
                        <div class="col-6 col-sm-4 col-md-2 col-xl-3 py-3">
                            <a class="btn btn-blue w-100" id="pngImage">
                                {{ __('PNG') }}
                            </a>
                        </div>
                        <div class="col-6 col-sm-4 col-md-2 col-xl-3 py-3">
                            <a class="btn btn-blue w-100" id="gifImage">
                                {{ __('GIF') }}
                            </a>
                        </div>
                        <div class="col-6 col-sm-4 col-md-2 col-xl-3 py-3">
                            <a class="btn btn-blue w-100" id="webpImage">
                                {{ __('WEBP') }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Custom JS --}}
@section('custom-js')
    <script>
        // Delete Optimer
        function deleteOptimer(deleteOptimerId, deleteOptimerStatus) {
            "use strict";
            $("#delete-modal").modal("show");
            var delete_status = document.getElementById("delete_status");
            delete_status.innerHTML = "