@extends('layouts.main')

@section('content')
<style>
.dark .form-text.text-muted {
    color: var(--bs-light) !important;
    opacity: 0.75;
}

.dark .table {
    color: var(--bs-light);
}

.dark .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #1a1a1a;
    --bs-table-striped-bg: #1a1a1a;
}

.dark .table-striped > tbody > tr:nth-of-type(even) {
    background-color: #212121;
    --bs-table-accent-bg: #212121;
}

.dark .table-striped > tbody > tr > td {
    border-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.dark .table-striped > tbody > tr > td:first-child {
    color: rgba(255, 255, 255, 0.7);
}
</style>

<div class="hero-section">
    <h2>{{ trans('webtools/homepage.title') }}</h2>
    <h1>{{ trans('webtools/homepage.heading') }}</h1>
</div>

@include("modules.tools.search-base")

<div class="single-page-sec">
    @include($tool['templates']['header'], [
        'tool' => $tool['name']
    ])

    <x-ads.top-banner />

    <div class="single-page-inner">
        <form x-data="{ loading: false }" @submit="loading = true" method="POST">
            @csrf
            <div class="form-group">
                <label for="weburl" class="custom-label">{{ trans('webtools/tools/gzip-test.label') }}</label>
                <input type="text" 
                       name="weburl" 
                       id="weburl" 
                       class="custom-input w-100 @error('weburl') is-invalid @enderror" 
                       value="{{ old('weburl', request()->input('weburl')) }}" 
                       placeholder="{{ trans('webtools/tools/gzip-test.placeholder') }}" 
                       required>
                @error('weburl')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
                <small class="form-text text-muted">{{ trans('webtools/tools/gzip-test.help') }}</small>
            </div>

            <input type="hidden" name="submit" value="true">
            <button class="btn custom--btn button__lg" :disabled="loading">
                <span x-show="!loading">{{ trans('webtools/tools/gzip-test.submit') }}</span>
                <span x-show="loading">
                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                    {{ trans('webtools/tools/gzip-test.testing') }}
                </span>
            </button>

            @if($error && $result)
                <div class="alert alert-danger rounded-pill mt-3 p-l-25 p-r-25 bg-danger border-0">
                    <h5 class="m-0 text-light">{{ $result->error }}</h5>
                </div>
            @endif

            @if(request()->input('submit') && request()->input('weburl') && !$error)
                @if($result->isGzipEnabled === false)
                    <div class="alert alert-warning rounded-pill mt-3 p-l-25 p-r-25 bg-warning border-0">
                        <h5 class="m-0 text-dark">{{ trans('webtools/tools/gzip-test.not_enabled') }}</h5>
                    </div>
                @endif
                @if($result->isGzipEnabled === true)
                    <div class="alert alert-success rounded-pill mt-3 p-l-25 p-r-25 bg-success border-0">
                        <h5 class="m-0 text-light">{{ trans('webtools/tools/gzip-test.enabled') }}</h5>
                    </div>
                @endif
            @endif
        </form>

        @if(request()->input('submit') && request()->input('weburl') && !$error && $result)
            <div class="table-responsive mt-4">
                <table class="table table-striped">
                    <tbody>
                        <tr>
                            <td class="align-middle">{{ trans('webtools/tools/gzip-test.label_original_size') }}</td>
                            <td class="align-middle">{{ number_format(($result->originalSize / 1024), 2) }}kb ({{ number_format($result->originalSize, 0) }}b)</td>
                        </tr>
                        <tr>
                            <td class="align-middle">{{ trans('webtools/tools/gzip-test.label_size') }}</td>
                            <td class="align-middle">{{ number_format(($result->gzipSize / 1024), 2) }}kb ({{ number_format($result->gzipSize, 0) }}b)</td>
                        </tr>
                        <tr>
                            <td class="align-middle">{{ trans('webtools/tools/gzip-test.label_compression_p') }}</td>
                            <td class="align-middle">{{ number_format($result->compressionPercentage, 2) }}%</td>
                        </tr>
                        <tr>
                            <td class="align-middle">{{ trans('webtools/tools/gzip-test.label_http_status') }}</td>
                            <td class="align-middle">{{ $result->httpStatus }}</td>
                        </tr>
                        <tr>
                            <td class="align-middle">{{ trans('webtools/tools/gzip-test.label_request_time') }}</td>
                            <td class="align-middle">{{ number_format($result->requestTime * 1000, 2) }}ms</td>
                        </tr>
                        <tr>
                            <td class="align-middle">{{ trans('webtools/tools/gzip-test.label_comp_time') }}</td>
                            <td class="align-middle">{{ number_format($result->compressionTime * 1000, 2) }}ms</td>
                        </tr>
                        <tr>
                            <td class="align-middle">{{ trans('webtools/tools/gzip-test.label_content_type') }}</td>
                            <td class="align-middle">{{ $result->contentType }}</td>
                        </tr>
                        @if($result->server)
                            <tr>
                                <td class="align-middle">{{ trans('webtools/tools/gzip-test.label_server') }}</td>
                                <td class="align-middle">{{ $result->server }}</td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        @endif

        <hr class="small-marg">
        <h2>{{ get_tool_title($tool['name'], $toolSettings->title) }}</h2>
        <p>{!! get_tool_description($tool['name'], $toolSettings->description) !!}</p>
    </div>

    <x-ads.middle-banner />
</div>

<div class="content-sec">
    <div class="content-sec-inner">
        <div class="content-title-sec">
            <div class="content-title-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                    <path id="chart-relationship" d="M29.25,6.75a4.5,4.5,0,0,0-4.34,3.375H20.171A8.995,8.995,0,1,0,10.125,20.171V24.91a4.5,4.5,0,1,0,2.25,0V20.173A8.945,8.945,0,0,0,16.76,18.35l4.128,4.129a4.447,4.447,0,0,0-.638,2.271,4.5,4.5,0,1,0,4.5-4.5,4.446,4.446,0,0,0-2.271.638L18.35,16.759a8.944,8.944,0,0,0,1.823-4.384H24.91A4.492,4.492,0,1,0,29.25,6.75Z" transform="translate(-2.251 -2.251)" fill="#fff"/>
                </svg>
            </div>
            <h3>{{ trans('webtools/general.related') }}</h3>
        </div>
        <div class="content-cats-sec">
            @foreach($related as $toolKey => $relatedTool)
                @if($relatedTool['name'] != $tool['name'])
                    @if($toolOptions['tool-' . $relatedTool['name'] . '.' . 'enabled'][0]->payload != 'false')
                        <div class="content-cats-col">
                            <a href="{{ !can_use($toolKey) ? route('pricing') : route('tool', $toolSlugs->{$toolKey}) }}" class="content-cats-inner {{ !can_use($toolKey) ? 'locked' : '' }}">
                                @include($relatedTool['templates']['selector'], [
                                    'tool'    => $relatedTool['name'],
                                    'title'   => get_tool_title($relatedTool['name'], str_replace('"', '', $toolOptions['tool-' . $relatedTool['name'] . '.' . 'title'][0]->payload)),
                                    'summary' => get_tool_summary($relatedTool['name'], str_replace('"', '', $toolOptions['tool-' . $relatedTool['name'] . '.' . 'summary'][0]->payload)),
                                ])
                            </a>
                        </div>
                    @endif
                @endif
            @endforeach
        </div>
    </div>

    <x-ads.bottom-banner />
</div>

@endsection