@extends('layouts.app')

@section('title', __('dashboard.sales_focus.title'))
@section('page_heading', __('dashboard.sales_focus.title'))

@section('content')
@php
    $exitIcon = app()->getLocale() === 'ar' ? 'fa-solid fa-right-from-bracket' : 'fa-solid fa-right-to-bracket';
@endphp

<style>
.sf-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
@media (max-width: 991.98px) { .sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .sf-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); } }
</style>

{{-- Header bar --}}
<div style="display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);padding:1rem 1.25rem">
    <div style="display:flex;align-items:center;gap:.75rem">
        <div style="width:40px;height:40px;border-radius:10px;background:var(--c-primary-bg);display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--c-primary)">
            <i class="fa-solid fa-circle-user"></i>
        </div>
        <div>
            <div style="font-size:1rem;font-weight:900;color:var(--text-primary)">{{ $user->name }}</div>
            <div style="font-size:.78rem;font-weight:600;color:var(--text-muted)">{{ now()->translatedFormat('l، j F Y') }}</div>
        </div>
    </div>
    @if($exitLockEnabled)
        <button type="button"
                style="display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .85rem;border-radius:999px;font-size:.78rem;font-weight:700;border:1px solid {{ $exitLockActive ? '#bbf7d0' : 'var(--border)' }};background:{{ $exitLockActive ? '#f0fdf4' : 'var(--border-subtle)' }};color:{{ $exitLockActive ? '#15803d' : 'var(--text-secondary)' }};cursor:pointer"
                data-sales-focus-action="lock"
                @disabled($exitLockActive)>
            <i class="{{ $exitLockActive ? 'fa-solid fa-lock' : 'fa-solid fa-unlock' }}"></i>
            {{ $exitLockActive ? __('dashboard.sales_focus.exit_secured') : __('dashboard.sales_focus.secure_exit') }}
        </button>
    @endif
</div>

{{-- Tiles grid --}}
<div class="sf-grid">

    @canany(['view reservations', 'create reservations', 'edit reservations'])
    <a href="{{ route('dashboard.reservations.availability.form') }}" style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);padding:1.25rem;display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;text-decoration:none;transition:transform .18s,box-shadow .18s,border-color .18s;cursor:pointer" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 10px 28px rgba(15,23,42,.10)';this.style.borderColor='#86efac'" onmouseout="this.style.transform='';this.style.boxShadow='var(--shadow-card)';this.style.borderColor='var(--border)'">
        <div style="width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;background:#f0fdf4;color:#16a34a;flex-shrink:0">
            <i class="fa-solid fa-magnifying-glass"></i>
        </div>
        <div style="font-size:.9rem;font-weight:800;color:var(--text-primary);line-height:1.4;flex:1">{{ __('dashboard.sales_focus.check_availability') }}</div>
        <div style="font-size:1.1rem;color:var(--text-muted);margin-top:auto;align-self:flex-end"><i class="fa-solid fa-chevron-left"></i></div>
    </a>
    @endcanany

    @can('create reservations')
    <a href="{{ route('dashboard.reservations.create') }}" style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);padding:1.25rem;display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;text-decoration:none;transition:transform .18s,box-shadow .18s,border-color .18s;cursor:pointer" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 10px 28px rgba(15,23,42,.10)';this.style.borderColor='var(--c-primary)'" onmouseout="this.style.transform='';this.style.boxShadow='var(--shadow-card)';this.style.borderColor='var(--border)'">
        <div style="width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;background:var(--c-primary-bg);color:var(--c-primary);flex-shrink:0">
            <i class="fa-solid fa-calendar-plus"></i>
        </div>
        <div style="font-size:.9rem;font-weight:800;color:var(--text-primary);line-height:1.4;flex:1">{{ __('dashboard.sales_focus.add_reservation') }}</div>
        <div style="font-size:1.1rem;color:var(--text-muted);margin-top:auto;align-self:flex-end"><i class="fa-solid fa-chevron-left"></i></div>
    </a>
    @endcan

    @can('create sales')
    <a href="{{ route('dashboard.sales.create') }}" style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);padding:1.25rem;display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;text-decoration:none;transition:transform .18s,box-shadow .18s,border-color .18s;cursor:pointer" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 10px 28px rgba(15,23,42,.10)';this.style.borderColor='var(--c-primary)'" onmouseout="this.style.transform='';this.style.boxShadow='var(--shadow-card)';this.style.borderColor='var(--border)'">
        <div style="width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;background:var(--c-primary-bg);color:var(--c-primary);flex-shrink:0">
            <i class="fa-solid fa-cart-plus"></i>
        </div>
        <div style="font-size:.9rem;font-weight:800;color:var(--text-primary);line-height:1.4;flex:1">{{ __('dashboard.sales_focus.new_sale') }}</div>
        <div style="font-size:1.1rem;color:var(--text-muted);margin-top:auto;align-self:flex-end"><i class="fa-solid fa-chevron-left"></i></div>
    </a>
    @endcan

    @canany(['view products', 'create products'])
    <a href="{{ route('dashboard.embroidery-orders.index') }}" style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);padding:1.25rem;display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;text-decoration:none;transition:transform .18s,box-shadow .18s,border-color .18s;cursor:pointer" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 10px 28px rgba(15,23,42,.10)';this.style.borderColor='#fcd34d'" onmouseout="this.style.transform='';this.style.boxShadow='var(--shadow-card)';this.style.borderColor='var(--border)'">
        <div style="width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;background:#fffbeb;color:#d97706;flex-shrink:0">
            <i class="fa-solid fa-star"></i>
        </div>
        <div style="font-size:.9rem;font-weight:800;color:var(--text-primary);line-height:1.4;flex:1">{{ __('dashboard.sales_focus.embroidery_orders') }}</div>
        <div style="font-size:1.1rem;color:var(--text-muted);margin-top:auto;align-self:flex-end"><i class="fa-solid fa-chevron-left"></i></div>
    </a>
    @endcanany

    @canany(['view products', 'create products'])
    <a href="{{ route('dashboard.sales-focus.recent-embroidery-orders') }}" style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);padding:1.25rem;display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;text-decoration:none;transition:transform .18s,box-shadow .18s,border-color .18s;cursor:pointer" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 10px 28px rgba(15,23,42,.10)';this.style.borderColor='#fcd34d'" onmouseout="this.style.transform='';this.style.boxShadow='var(--shadow-card)';this.style.borderColor='var(--border)'">
        <div style="width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;background:#fffbeb;color:#d97706;flex-shrink:0">
            <i class="fa-solid fa-clock-rotate-left"></i>
        </div>
        <div style="font-size:.9rem;font-weight:800;color:var(--text-primary);line-height:1.4;flex:1">{{ __('dashboard.sales_focus.recent_embroidery_orders') }}</div>
        <div style="font-size:1.1rem;color:var(--text-muted);margin-top:auto;align-self:flex-end"><i class="fa-solid fa-chevron-left"></i></div>
    </a>
    @endcanany

    @canany(['view reservations', 'create reservations', 'edit reservations'])
    <a href="{{ route('dashboard.sales-focus.recent-reservations') }}" style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);padding:1.25rem;display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;text-decoration:none;transition:transform .18s,box-shadow .18s,border-color .18s;cursor:pointer" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 10px 28px rgba(15,23,42,.10)';this.style.borderColor='var(--c-primary)'" onmouseout="this.style.transform='';this.style.boxShadow='var(--shadow-card)';this.style.borderColor='var(--border)'">
        <div style="width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;background:var(--c-primary-bg);color:var(--c-primary);flex-shrink:0">
            <i class="fa-solid fa-clock-rotate-left"></i>
        </div>
        <div style="font-size:.9rem;font-weight:800;color:var(--text-primary);line-height:1.4;flex:1">{{ __('dashboard.sales_focus.recent_reservations') }}</div>
        <div style="font-size:1.1rem;color:var(--text-muted);margin-top:auto;align-self:flex-end"><i class="fa-solid fa-chevron-left"></i></div>
    </a>
    @endcanany

    @canany(['view sales', 'create sales', 'edit sales'])
    <a href="{{ route('dashboard.sales-focus.recent-sales') }}" style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);padding:1.25rem;display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;text-decoration:none;transition:transform .18s,box-shadow .18s,border-color .18s;cursor:pointer" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 10px 28px rgba(15,23,42,.10)';this.style.borderColor='var(--c-primary)'" onmouseout="this.style.transform='';this.style.boxShadow='var(--shadow-card)';this.style.borderColor='var(--border)'">
        <div style="width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;background:var(--c-primary-bg);color:var(--c-primary);flex-shrink:0">
            <i class="fa-solid fa-receipt"></i>
        </div>
        <div style="font-size:.9rem;font-weight:800;color:var(--text-primary);line-height:1.4;flex:1">{{ __('dashboard.sales_focus.recent_sales') }}</div>
        <div style="font-size:1.1rem;color:var(--text-muted);margin-top:auto;align-self:flex-end"><i class="fa-solid fa-chevron-left"></i></div>
    </a>
    @endcanany

    <button type="button" style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);padding:1.25rem;display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s;text-align:start;width:100%" data-sales-focus-action="exit" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 10px 28px rgba(15,23,42,.10)';this.style.borderColor='#fca5a5'" onmouseout="this.style.transform='';this.style.boxShadow='var(--shadow-card)';this.style.borderColor='var(--border)'">
        <div style="width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;background:#fef2f2;color:#dc2626;flex-shrink:0">
            <i class="{{ $exitIcon }}"></i>
        </div>
        <div style="font-size:.9rem;font-weight:800;color:var(--text-primary);line-height:1.4;flex:1">{{ __('dashboard.sales_focus.exit_mode') }}</div>
        <div style="font-size:1.1rem;color:var(--text-muted);margin-top:auto;align-self:flex-end"><i class="fa-solid fa-chevron-left"></i></div>
    </button>

</div>

{{-- PIN Modal --}}
<div id="salesFocusPinModal"
     x-data="salesFocusPin()"
     x-show="open"
     x-cloak
     style="position:fixed;inset:0;z-index:1050;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(15,23,42,.5);backdrop-filter:blur(4px)">
    <div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-2xl);box-shadow:var(--shadow-modal);width:100%;max-width:400px;overflow:hidden" @click.stop>
        <div style="display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid var(--border)">
            <h3 style="margin:0;font-size:1rem;font-weight:900;color:var(--text-primary)" x-text="title"></h3>
            <button type="button" @click="close()" class="hdr-btn"><i class="fa-solid fa-xmark"></i></button>
        </div>
        <div style="padding:1.5rem;display:grid;gap:1rem">
            <div>
                <label class="ws-label">{{ __('dashboard.sales_focus.admin_pin') }}</label>
                <input type="password" x-ref="pinInput" x-model="pin" class="app-input" autocomplete="off" inputmode="numeric"
                       @keydown.enter="confirm()" :class="error ? 'app-input--invalid' : ''">
                <div x-show="error" class="app-field-error" x-text="error"></div>
            </div>
            <div style="display:flex;justify-content:flex-end;gap:.75rem">
                <button type="button" @click="close()" class="app-btn app-btn--ghost">{{ __('dashboard.Cancel') }}</button>
                <button type="button" @click="confirm()" class="app-btn app-btn--primary" :disabled="loading">
                    <span x-show="!loading">{{ __('dashboard.sales_focus.confirm') }}</span>
                    <span x-show="loading" class="app-spinner app-spinner--sm"></span>
                </button>
            </div>
        </div>
    </div>
</div>

<form method="POST" action="{{ route('dashboard.sales-focus.lock-exit') }}" id="sf_lock_form" style="display:none">
    @csrf <input type="hidden" name="admin_pin_token" id="sf_lock_token">
</form>
<form method="POST" action="{{ route('dashboard.sales-focus.disable') }}" id="sf_exit_form" style="display:none">
    @csrf <input type="hidden" name="admin_pin_token" id="sf_exit_token">
</form>

@endsection

@section('scripts')
<script>
const exitLockActive = @json($exitLockActive);
const verifyUrl  = '{{ route('dashboard.verify-admin-pin') }}';
const csrfToken  = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
const titles     = { exit: @json(__('dashboard.sales_focus.verify_before_exit')), lock: @json(__('dashboard.sales_focus.verify_before_secure')) };
const contexts   = { exit: 'sales_focus_exit', lock: 'sales_focus_lock_exit' };

document.querySelectorAll('[data-sales-focus-action]').forEach(btn => {
    btn.addEventListener('click', () => {
        const action = btn.dataset.salesFocusAction;
        if (action === 'exit' && !exitLockActive) {
            document.getElementById('sf_exit_form').submit();
            return;
        }
        const modal = document.getElementById('salesFocusPinModal').__x.$data;
        modal.open  = true;
        modal.action = action;
        modal.title  = titles[action] || @json(__('dashboard.sales_focus.verify_admin_pin'));
        modal.pin    = '';
        modal.error  = '';
        setTimeout(() => modal.$refs?.pinInput?.focus(), 200);
    });
});

function salesFocusPin() {
    return {
        open: false, action: null, title: '', pin: '', error: '', loading: false,
        close() { this.open = false; },
        async confirm() {
            this.error = '';
            if (!this.pin.trim()) { this.error = @json(__('dashboard.sales_focus.enter_admin_pin')); return; }
            this.loading = true;
            try {
                const res  = await fetch(verifyUrl, { method:'POST', headers:{'Content-Type':'application/json','X-CSRF-TOKEN':csrfToken,'Accept':'application/json'}, body: JSON.stringify({ pin: this.pin, context: contexts[this.action] }) });
                const data = await res.json();
                if (!res.ok) throw new Error(data.message || @json(__('dashboard.sales_focus.verify_failed')));
                document.getElementById(`sf_${this.action}_token`).value = data.token;
                this.open = false;
                document.getElementById(`sf_${this.action}_form`).submit();
            } catch(e) { this.error = e.message; }
            finally    { this.loading = false; }
        }
    };
}
</script>
@endsection