@extends('admin.layouts.master-soyuz')
@section('title', __('Maintenance Mode'))

@section('body')
@component('admin.component.breadcumb',['secondaryactive' => 'active'])
@slot('heading'){{ __('Maintenance Mode') }}@endslot
@slot('menu1'){{ __('Maintenance Mode') }}@endslot
@endcomponent

@php $isOn = isset($data) && $data->status == 1; $myIp = Request::ip(); @endphp

<div class="contentbar">
    {{-- Status banner --}}
    <div class="card m-b-30" style="border:0; border-radius:14px; overflow:hidden;
        background: {{ $isOn ? 'linear-gradient(135deg,#fef3c7 0%,#fde68a 100%)' : 'linear-gradient(135deg,#dcfce7 0%,#bbf7d0 100%)' }};">
        <div class="card-body" style="padding:24px;">
            <div class="row align-items-center">
                <div class="col-md-1 text-center">
                    <div style="width:64px;height:64px;border-radius:50%;background:{{ $isOn ? '#f59e0b' : '#16a34a' }};color:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto;">
                        @if($isOn)<i class="fa fa-wrench"></i>@else<i class="fa fa-check-circle"></i>@endif
                    </div>
                </div>
                <div class="col-md-8">
                    <h4 style="margin:0;font-weight:800;color:#0a1430;">
                        {{ $isOn ? __('Maintenance mode is ACTIVE') : __('Site is LIVE') }}
                    </h4>
                    <p style="margin:6px 0 0;color:#475569;font-size:14px;">
                        {{ $isOn
                            ? __('The storefront is hidden from public visitors. Super Admins and whitelisted IPs still have access.')
                            : __('Your storefront is publicly accessible. Toggle maintenance mode below to take it offline temporarily.')
                        }}
                    </p>
                </div>
                <div class="col-md-3 text-right">
                    <div style="background:rgba(255,255,255,0.6);padding:10px 14px;border-radius:10px;display:inline-block;">
                        <div style="font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#64748b;font-weight:700;">{{ __('Your IP') }}</div>
                        <div style="font-family:monospace;font-weight:700;color:#0a1430;font-size:15px;">{{ $myIp }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if ($errors->any())
        <div class="alert alert-danger" role="alert" style="border-radius:10px;">
            @foreach($errors->all() as $error)<p style="margin:0;">{{ $error }}</p>@endforeach
        </div>
    @endif
    @if(session()->has('added'))
        <div class="alert alert-success" role="alert" style="border-radius:10px;">
            <i class="fa fa-check-circle"></i> {{ session('added') }}
        </div>
    @endif

    <form action="{{ route('get.m.post') }}" method="POST">
        @csrf
        <div class="row">

            {{-- LEFT: form --}}
            <div class="col-lg-8">
                <div class="card m-b-30" style="border-radius:14px;border:0;box-shadow:0 1px 3px rgba(15,23,42,.06);">
                    <div class="card-header" style="background:#fff;border-bottom:1px solid #f1f5f9;border-radius:14px 14px 0 0;">
                        <h5 class="box-title" style="margin:0;font-weight:700;"><i class="feather icon-settings text-primary mr-2"></i>{{ __('Configuration') }}</h5>
                    </div>
                    <div class="card-body">

                        {{-- Toggle --}}
                        <div style="background:#f8fafc;border-radius:12px;padding:18px;margin-bottom:24px;">
                            <div class="d-flex align-items-center justify-content-between">
                                <div>
                                    <div style="font-weight:700;color:#0a1430;font-size:15px;">{{ __('Enable Maintenance Mode') }}</div>
                                    <small class="text-muted">{{ __('Toggle to take the storefront offline. Admins keep full access.') }}</small>
                                </div>
                                <label class="switch" style="margin:0;">
                                    <input type="checkbox" name="status" {{ $isOn ? 'checked' : '' }}>
                                    <span class="knob"></span>
                                </label>
                            </div>
                        </div>

                        {{-- Allowed IPs --}}
                        <div class="form-group">
                            <label style="font-weight:600;color:#0a1430;">
                                <i class="fa fa-shield text-success"></i> {{ __("Allowed IP Whitelist") }}
                            </label>
                            <select required class="form-control select2" name="allowed_ips[]" multiple="multiple" id="allowed_ips" data-placeholder="{{ __('Type an IP and press Enter') }}">
                                @if(isset($data->allowed_ips))
                                    @foreach ($data->allowed_ips as $ip)
                                        <option selected value="{{ $ip }}">{{ $ip }}</option>
                                    @endforeach
                                @endif
                            </select>
                            <small class="text-muted d-block mt-2">
                                <i class="fa fa-info-circle"></i>
                                {{ __('Visitors from these IPs will see the live site even when maintenance is on. Type an IP and press Enter / comma / space to add.') }}
                                @if(!in_array($myIp, $data->allowed_ips ?? []))
                                    <button type="button" class="btn btn-link p-0 ml-1" onclick="addMyIp()" style="vertical-align:baseline;font-size:12px;">{{ __('+ Add my IP') }} ({{ $myIp }})</button>
                                @endif
                            </small>
                            @error('allowed_ips')<div class="text-danger mt-1"><small>{{ $message }}</small></div>@enderror
                        </div>

                        {{-- Message --}}
                        <div class="form-group">
                            <label style="font-weight:600;color:#0a1430;">
                                <i class="fa fa-comment-o text-warning"></i> {{ __("Maintenance Page Message") }} <span class="text-danger">*</span>
                            </label>
                            <textarea class="editor form-control" name="message" id="message" rows="8" placeholder="{{ __('Tell visitors when you will be back…') }}">@if($data){!! $data->message !!}@else{{ old('message') }}@endif</textarea>
                            <small class="text-muted">{{ __('HTML allowed. Visitors see this in place of the storefront.') }}</small>
                            @error('message')<div class="text-danger mt-1"><small>{{ $message }}</small></div>@enderror
                        </div>

                        <div class="d-flex justify-content-end gap-2" style="gap:8px;">
                            <button type="reset" class="btn btn-light" style="border-radius:8px;"><i class="fa fa-ban"></i> {{ __("Reset") }}</button>
                            <button type="submit" class="btn btn-primary" style="border-radius:8px;font-weight:600;">
                                <i class="fa fa-check-circle"></i> {{ __("Save Changes") }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            {{-- RIGHT: info panel --}}
            <div class="col-lg-4">
                <div class="card m-b-30" style="border-radius:14px;border:0;box-shadow:0 1px 3px rgba(15,23,42,.06);">
                    <div class="card-body">
                        <h6 style="font-weight:700;color:#0a1430;margin-bottom:14px;"><i class="fa fa-lightbulb-o text-warning"></i> {{ __('How maintenance works') }}</h6>
                        <ul style="padding-left:0;list-style:none;margin:0;font-size:13px;color:#475569;line-height:1.6;">
                            <li style="padding:8px 0;border-bottom:1px solid #f1f5f9;">
                                <i class="fa fa-check text-success mr-2"></i>{{ __('Storefront responds with HTTP 503') }}
                            </li>
                            <li style="padding:8px 0;border-bottom:1px solid #f1f5f9;">
                                <i class="fa fa-check text-success mr-2"></i>{{ __('Super Admins always bypass') }}
                            </li>
                            <li style="padding:8px 0;border-bottom:1px solid #f1f5f9;">
                                <i class="fa fa-check text-success mr-2"></i>{{ __('Whitelisted IPs see the live site') }}
                            </li>
                            <li style="padding:8px 0;border-bottom:1px solid #f1f5f9;">
                                <i class="fa fa-check text-success mr-2"></i>{{ __('Admin login & dashboard remain reachable') }}
                            </li>
                            <li style="padding:8px 0;">
                                <i class="fa fa-info-circle text-info mr-2"></i>{{ __('To preview, open the site in an incognito window') }}
                            </li>
                        </ul>
                    </div>
                </div>

                @if($isOn)
                    <div class="card m-b-30" style="border-radius:14px;border:0;background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);">
                        <div class="card-body">
                            <h6 style="font-weight:700;color:#92400e;margin-bottom:8px;"><i class="fa fa-eye"></i> {{ __('Preview maintenance page') }}</h6>
                            <p style="font-size:12px;color:#78350f;margin-bottom:12px;">{{ __('Open in private window to see what your visitors will see.') }}</p>
                            <a href="{{ url('/') }}" target="_blank" class="btn btn-warning btn-block" style="border-radius:8px;font-weight:600;">
                                <i class="fa fa-external-link"></i> {{ __('Open storefront') }}
                            </a>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </form>
</div>
@endsection

@section('custom-script')
<script>
$(function(){
    $('#allowed_ips').select2({
        placeholder: '{{ __("Type an IP and press Enter") }}',
        tags: true,
        tokenSeparators: [',', ' '],
        width: '100%'
    });
});
function addMyIp(){
    var ip = '{{ $myIp }}';
    var $sel = $('#allowed_ips');
    if ($sel.find('option[value="'+ip+'"]').length === 0) {
        $sel.append(new Option(ip, ip, true, true)).trigger('change');
    }
}
</script>
@endsection