@extends('frontend.layout.dashboard-master')
@section('site_title', __('Time Tracker'))

@section('style')
<style>
    dialog::backdrop { background: rgba(0,0,0,.45); backdrop-filter: blur(2px); }
</style>
@endsection

@section('content')

    {{-- Page Header --}}
    <div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div class="space-y-0.5">
            <h1 class="text-[20px] font-semibold leading-7 text-[#242B36]">{{ __('Time Tracker') }}</h1>
            <p class="text-[14px] text-[#3B4759]">{{ __('Track your work hours for this order') }}</p>
        </div>
        <a href="{{ route('freelancer.order.details', $order->id) }}"
           class="inline-flex w-fit items-center gap-2 rounded-lg border border-[#C4C8CE] px-3 py-2 text-[13px] font-medium text-[#3B4759] transition-colors hover:bg-[#F5F6F8]">
            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                <path d="M19 12H5M5 12l7-7M5 12l7 7"/>
            </svg>
            {{ __('Back to Order') }}
        </a>
    </div>

    <x-validation.error />

    {{-- Warning notice --}}
    <div class="mb-4 flex items-start gap-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-[13px] text-amber-700">
        <svg class="mt-0.5 h-4 w-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="9"/><path d="M12 8v4"/><circle cx="12" cy="16" r=".6" fill="currentColor"/>
        </svg>
        {{ __('Please stop the time tracker before submitting your task.') }}
    </div>

    {{-- Over-budget warning --}}
    @if($over_budget)
    <div class="mb-6 flex items-start gap-3 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-[13px] text-red-700">
        <svg class="mt-0.5 h-4 w-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
            <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><path d="M12 9v4"/><circle cx="12" cy="17" r=".6" fill="currentColor"/>
        </svg>
        <div>
            <p class="font-medium">{{ __('Estimated hours exceeded') }}</p>
            <p class="mt-0.5 text-red-600">{{ __('You have logged') }} <strong>{{ number_format($logged_hours, 2) }} {{ __('hrs') }}</strong> {{ __('against an estimate of') }} <strong>{{ number_format($budget_hours, 2) }} {{ __('hrs') }}</strong>. {{ __('Any hours beyond the estimate will not be compensated.') }}</p>
        </div>
    </div>
    @else
    <div class="mb-6"></div>
    @endif

    {{-- Tracker card --}}
    <div class="mx-auto max-w-lg">
        <div class="overflow-hidden rounded-xl border border-[#C4C8CE] bg-white">

            {{-- Job info --}}
            <div class="border-b border-[#E9EBF0] px-6 py-4">
                <h2 class="line-clamp-2 text-[16px] font-semibold text-[#242B36]">{{ $order?->job->title }}</h2>
                <div class="mt-2 flex flex-wrap items-center gap-4 text-[13px] text-[#677181]">
                    <span class="flex items-center gap-1.5">
                        <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/>
                        </svg>
                        {{ $order?->job?->job_creator->fullname }}
                    </span>
                    <span class="flex items-center gap-1.5 {{ $over_budget ? 'text-red-500 font-medium' : '' }}">
                        <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/>
                        </svg>
                        @if($budget_hours > 0)
                            {{ number_format($logged_hours, 2) }} / {{ number_format($budget_hours, 2) }} {{ __('hrs logged') }}
                        @else
                            {{ __('Est.') }} {{ $order?->job->estimated_hours }} {{ __('hrs') }}
                        @endif
                    </span>
                </div>
            </div>

            {{-- Clock + controls --}}
            <div class="px-6 py-10 text-center">
                <h2 id="time"
                    title="HH:MM:SS"
                    class="font-mono text-[58px] font-bold leading-none tracking-tight text-[#242B36] tabular-nums">00:00:00</h2>
                <p id="tracker-status" class="mt-3 mb-8 text-[13px] text-[#677181]">{{ __('Ready to start') }}</p>

                <div class="flex items-center justify-center gap-5">
                    <button type="button" id="start"
                        title="{{ __('Start') }}"
                        style="width:56px;height:56px;border-radius:50%;background:#10b981;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:white;transition:all .15s;box-shadow:0 2px 8px rgba(16,185,129,.35)">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" style="transform:translateX(2px)">
                            <path d="M8 5v14l11-7z"/>
                        </svg>
                    </button>
                    <button type="button" id="pause"
                        title="{{ __('Pause') }}"
                        style="width:56px;height:56px;border-radius:50%;background:#F5F6F8;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#677181;transition:all .15s;box-shadow:0 2px 8px rgba(0,0,0,.08)">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
                        </svg>
                    </button>
                </div>
            </div>

            {{-- Form + actions --}}
            <div class="border-t border-[#E9EBF0] px-6 py-5">
                <canvas id="canvas" class="hidden"></canvas>
                <input type="hidden" name="order_id_for_screenshot" value="{{ $order->id }}">

                <form action="{{ route('freelancer.order.time.tracker', $order->id) }}" method="post" id="tracker-form">
                    @csrf
                    <input type="hidden" name="notes" id="notes">
                    <input type="hidden" name="start_time" id="start_time">
                    <input type="hidden" name="work_hour" id="work_hour">

                    {{-- Notes preview --}}
                    <div id="notes-preview" class="mb-4 hidden rounded-lg border border-[#E9EBF0] bg-[#F9FAFB] px-4 py-3">
                        <p class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-[#677181]">{{ __('Note') }}</p>
                        <p id="notes-preview-text" class="text-[13px] text-[#3B4759]"></p>
                    </div>

                    <div class="flex flex-wrap gap-2">
                        <button type="button"
                            class="add_manual_time flex-1 rounded-lg border border-[#C4C8CE] px-3 py-2.5 text-center text-[13px] font-medium text-[#3B4759] transition-colors hover:bg-[#F5F6F8]"
                            onclick="document.getElementById('time-modal').showModal()">
                            {{ __('Restore Hours') }}
                        </button>
                        <button type="button"
                            class="flex-1 rounded-lg border border-[#C4C8CE] px-3 py-2.5 text-center text-[13px] font-medium text-[#3B4759] transition-colors hover:bg-[#F5F6F8]"
                            onclick="document.getElementById('note-modal').showModal()">
                            {{ __('Add Notes') }}
                        </button>
                        <button type="submit"
                            class="flex-1 rounded-lg bg-primary px-3 py-2.5 text-center text-[13px] font-semibold text-white transition-opacity hover:opacity-90">
                            {{ __('Submit Work') }}
                        </button>
                    </div>
                </form>
            </div>

        </div>
    </div>

    {{-- Note Modal --}}
    <dialog id="note-modal" style="border:none;border-radius:12px;padding:0;background:white;width:440px;max-width:94vw;box-shadow:0 8px 40px rgba(0,0,0,.2)">
        <div style="display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px;border-bottom:1px solid #E9EBF0">
            <span style="font-weight:600;font-size:15px;color:#242B36">{{ __('Add Notes') }}</span>
            <button type="button" onclick="document.getElementById('note-modal').close()"
                style="background:none;border:none;cursor:pointer;color:#677181;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:6px;padding:0"
                onmouseenter="this.style.background='#F5F6F8'" onmouseleave="this.style.background='none'">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M18 6 6 18M6 6l12 12"/>
                </svg>
            </button>
        </div>
        <div style="padding:18px">
            <textarea id="work_notes" rows="4"
                placeholder="{{ __('Enter your notes about this work session…') }}"
                style="width:100%;padding:10px 12px;border:1px solid #C4C8CE;border-radius:8px;font-size:13px;color:#242B36;outline:none;resize:vertical;box-sizing:border-box;font-family:inherit;line-height:1.5"
                onfocus="this.style.borderColor='#6366f1'" onblur="this.style.borderColor='#C4C8CE'"></textarea>
        </div>
        <div style="display:flex;justify-content:flex-end;gap:8px;padding:12px 18px 16px;border-top:1px solid #E9EBF0">
            <button type="button" onclick="document.getElementById('note-modal').close()"
                style="padding:8px 18px;border:1px solid #C4C8CE;border-radius:8px;background:white;font-size:13px;font-weight:500;color:#3B4759;cursor:pointer">
                {{ __('Cancel') }}
            </button>
            <button type="button" class="add_notes"
                style="padding:8px 18px;border:none;border-radius:8px;background:#10b981;font-size:13px;font-weight:600;color:white;cursor:pointer">
                {{ __('Save Note') }}
            </button>
        </div>
        <script>
            document.getElementById('note-modal').addEventListener('click', function(e) { if (e.target === this) this.close(); });
        </script>
    </dialog>

    {{-- Restore Time Modal --}}
    <dialog id="time-modal" style="border:none;border-radius:12px;padding:0;background:white;width:440px;max-width:94vw;box-shadow:0 8px 40px rgba(0,0,0,.2)">
        <div style="display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px;border-bottom:1px solid #E9EBF0">
            <span style="font-weight:600;font-size:15px;color:#242B36">{{ __('Restore Work Hours') }}</span>
            <button type="button" onclick="document.getElementById('time-modal').close()"
                style="background:none;border:none;cursor:pointer;color:#677181;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:6px;padding:0"
                onmouseenter="this.style.background='#F5F6F8'" onmouseleave="this.style.background='none'">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M18 6 6 18M6 6l12 12"/>
                </svg>
            </button>
        </div>
        <div style="padding:18px;display:flex;flex-direction:column;gap:14px">
            <div style="display:flex;gap:10px;background:#fffbeb;border:1px solid #fcd34d;border-radius:8px;padding:10px 12px;font-size:12px;color:#92400e;align-items:flex-start;line-height:1.5">
                <svg style="flex:none;margin-top:1px" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="12" r="9"/><path d="M12 8v4"/><circle cx="12" cy="16" r=".6" fill="currentColor"/>
                </svg>
                {{ __('If your computer shuts down or you logged out before submitting, enter your previous work time here to restore it.') }}
            </div>
            <div>
                <label style="display:block;font-size:12px;color:#677181;margin-bottom:6px;font-weight:500">{{ __('Work Time (HH:MM:SS)') }}</label>
                <input id="manual_time" placeholder="00:00:00"
                    style="width:100%;padding:9px 12px;border:1px solid #C4C8CE;border-radius:8px;font-size:15px;font-family:monospace;letter-spacing:.05em;color:#242B36;outline:none;box-sizing:border-box"
                    onfocus="this.style.borderColor='#6366f1'" onblur="this.style.borderColor='#C4C8CE'">
            </div>
        </div>
        <div style="display:flex;justify-content:flex-end;gap:8px;padding:12px 18px 16px;border-top:1px solid #E9EBF0">
            <button type="button" onclick="document.getElementById('time-modal').close()"
                style="padding:8px 18px;border:1px solid #C4C8CE;border-radius:8px;background:white;font-size:13px;font-weight:500;color:#3B4759;cursor:pointer">
                {{ __('Cancel') }}
            </button>
            <button type="button" class="display_restore_time"
                style="padding:8px 18px;border:none;border-radius:8px;background:#10b981;font-size:13px;font-weight:600;color:white;cursor:pointer">
                {{ __('Restore') }}
            </button>
        </div>
        <script>
            document.getElementById('time-modal').addEventListener('click', function(e) { if (e.target === this) this.close(); });
        </script>
    </dialog>

@endsection

@section('script')
    <x-sweet-alert.sweet-alert2-js />
    @include('frontend.user.freelancer.order.time-tracker.time-tracker-js')
@endsection