@extends('layouts.main')
@section('title')
    Dashboard
@endsection
@section('breadcrumb')
    <div>
        <h4 class="mb-0">Hi, welcome back!</h4>
        <p class="mb-0 text-muted">Dashboard.</p>
    </div>
@endsection
@section('css')
    <style>
        .btn i {
            color: #fff;
            font-size: 1.3rem;
            vertical-align: middle;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
        }
    </style>
@endsection
@section('content')

    @if(auth()->user()->hasRole('Operator'))
        <div class="row">
            <div class="col-xl-12">
                <div class="card custom-card">

                    <div class="card-body">
                        <div class="row gy-4 text-center">

                            <div class="col-md-12 mb-3">
                                <button class="btn btn-success me-2" id="startWorkBtn">
                                    <i class="fe fe-play me-1"></i> Start Shift
                                </button>
                                <button class="btn btn-warning me-2" id="startBreakBtn">
                                    <i class="fe fe-clock me-1"></i> Start Break
                                </button>
                                <button class="btn btn-info me-2" id="stopBreakBtn">
                                    <i class="fe fe-pause me-1"></i> End Break
                                </button>
                                <button class="btn btn-danger" id="stopWorkBtn">
                                    <i class="fe fe-stop-circle me-1"></i> Stop Shift
                                </button>
                            </div>

                            <div class="col-md-12 mt-4">
                                <h5>Current Status: <span id="statusText" class="badge bg-secondary">Idle</span></h5>
                                <h6 class="mt-2">Started at: <span id="startTime">--:--:--</span></h6>
                            </div>

                            <div class="col-md-12 mt-5">
                                <h5 class="mb-3">Today's Summary</h5>
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="card p-3 bg-light">
                                            <h6>Total Shift Time</h6>
                                            <h4 id="workTime">00:00:00 hrs</h4>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="card p-3 bg-light">
                                            <h6>Total Break Time</h6>
                                            <h4 id="breakTime">00:00:00 hrs</h4>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="card p-3 bg-light">
                                            <h6>Total Time</h6>
                                            <h4 id="netTime">00:00:00 hrs</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="card-footer text-center">
                        <small class="text-muted">
                            Auto session time-out after 3 hours of inactivity
                        </small>
                    </div>
                </div>
            </div>
        </div>
    @endunless

@endsection
@section('js')
    <script>
        $(document).ready(function () {

            let timers = {
                workSeconds: 0,
                breakSeconds: 0,
                netSeconds: 0
            };

            let currentStatus = "idle";
            let timerInterval = null;
            let summaryLoaded = false;

            fetchCurrentStatus();
            fetchSummary();

            // setInterval(fetchSummary, 5 * 60 * 1000);

            // Start Work
            $("#startWorkBtn").on("click", function () {
                $.ajax({
                    url: "{{ route('admin.work.start') }}",
                    type: "POST",
                    data: {_token: "{{ csrf_token() }}"},
                    success: function (data) {
                        Swal.fire({title: "Success!", text: data.success, icon: "success"});
                        updateUI({status: "working", start_time: data.start_time});
                        startRealTimeTimer("working");
                    },
                    error: handleError
                });
            });

            // Stop Work
            $("#stopWorkBtn").on("click", function () {
                $.ajax({
                    url: "{{ route('admin.work.stop') }}",
                    type: "POST",
                    data: {_token: "{{ csrf_token() }}"},
                    success: function (data) {
                        Swal.fire({title: "Success!", text: data.success, icon: "success"});
                        stopRealTimeTimer();
                        updateUI({status: "idle"});
                        fetchSummary(); // refresh totals
                    },
                    error: handleError
                });
            });

            // Start Break
            $("#startBreakBtn").on("click", function () {
                $.ajax({
                    url: "{{ route('admin.break.start') }}",
                    type: "POST",
                    data: {_token: "{{ csrf_token() }}"},
                    success: function (data) {
                        Swal.fire({title: "Success!", text: data.success, icon: "success"});
                        updateUI({status: "on_break"});
                        startRealTimeTimer("on_break");
                    },
                    error: handleError
                });
            });

            // Stop Break
            $("#stopBreakBtn").on("click", function () {
                $.ajax({
                    url: "{{ route('admin.break.stop') }}",
                    type: "POST",
                    data: {_token: "{{ csrf_token() }}"},
                    success: function (data) {
                        Swal.fire({title: "Success!", text: data.success, icon: "success"});
                        stopRealTimeTimer();
                        updateUI({status: "working"});
                        startRealTimeTimer("working");
                    },
                    error: handleError
                });
            });

            // ---------- Functions ----------

            function fetchCurrentStatus() {
                $.ajax({
                    url: "{{ route('admin.work.status') }}",
                    type: "GET",
                    success: function (data) {
                        updateUI(data);
                        currentStatus = data.status;

                        if (!summaryLoaded) {
                            fetchSummary(() => {
                                startRealTimeTimer(currentStatus);
                            });
                        } else {
                            startRealTimeTimer(currentStatus);
                        }
                    },
                    error: handleError
                });
            }

            function fetchSummary(callback = null) {
                $.ajax({
                    url: "{{ route('admin.work.summary') }}",
                    type: "GET",
                    success: function (data) {
                        timers.workSeconds = convertToSeconds(data.total_work);
                        timers.breakSeconds = convertToSeconds(data.total_break);
                        timers.netSeconds = Math.max(timers.workSeconds - timers.breakSeconds, 0);
                        updateSummaryUI();
                        summaryLoaded = true;
                        if (callback) callback();
                    },
                    error: handleError
                });
            }

            function updateUI(data) {
                let $statusText = $("#statusText");
                let $startTime = $("#startTime");
                let $startWorkBtn = $("#startWorkBtn");
                let $startBreakBtn = $("#startBreakBtn");
                let $stopBreakBtn = $("#stopBreakBtn");
                let $stopWorkBtn = $("#stopWorkBtn");

                $startWorkBtn.prop("disabled", false);
                $startBreakBtn.prop("disabled", true);
                $stopBreakBtn.prop("disabled", true);
                $stopWorkBtn.prop("disabled", true);

                currentStatus = data.status;

                if (data.status === "idle") {
                    $statusText.text("Idle").attr("class", "badge bg-secondary");
                    $startTime.text("--:--:--");
                } else if (data.status === "working") {
                    $statusText.text("Working").attr("class", "badge bg-success");
                    $startTime.text(formatTime(data.start_time ?? new Date()));
                    $startWorkBtn.prop("disabled", true);
                    $startBreakBtn.prop("disabled", false);
                    $stopWorkBtn.prop("disabled", false);
                } else if (data.status === "on_break") {
                    $statusText.text("On Break").attr("class", "badge bg-warning");
                    $startBreakBtn.prop("disabled", true);
                    $stopBreakBtn.prop("disabled", false);
                    $stopWorkBtn.prop("disabled", true);
                }
            }

            function startRealTimeTimer(status) {
                stopRealTimeTimer();

                timerInterval = setInterval(() => {
                    if (status === "working") {
                        timers.workSeconds++;
                    } else if (status === "on_break") {
                        timers.breakSeconds++;
                    }

                    timers.netSeconds = Math.max(timers.workSeconds - timers.breakSeconds, 0);
                    updateSummaryUI();
                }, 1000);
            }

            function stopRealTimeTimer() {
                if (timerInterval) clearInterval(timerInterval);
                timerInterval = null;
            }

            function updateSummaryUI() {
                $("#workTime").text(formatDuration(timers.workSeconds));
                $("#breakTime").text(formatDuration(timers.breakSeconds));
                $("#netTime").text(formatDuration(timers.netSeconds));
            }

            function convertToSeconds(timeStr) {
                if (!timeStr) return 0;
                const parts = timeStr.split(":").map(Number);
                let hours = parts[0] || 0;
                let minutes = parts[1] || 0;
                let seconds = parts[2] || 0;
                return (hours * 3600) + (minutes * 60) + seconds;
            }

            function formatDuration(seconds) {
                let hrs = Math.floor(seconds / 3600);
                let mins = Math.floor((seconds % 3600) / 60);
                let secs = seconds % 60;
                return `${String(hrs).padStart(2, '0')}:${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')} hrs`;
            }

            function formatTime(dateStr) {
                if (!dateStr) return "--:--:--";
                let date = new Date(dateStr);
                return date.toLocaleTimeString('en-PK', {hour: '2-digit', minute: '2-digit',  second: '2-digit'});
            }

            function handleError(xhr) {
                const errorMessage = xhr.responseJSON?.message || "An error occurred.";
                Swal.fire({title: "Error!", text: errorMessage, icon: "error"});
            }

        });
    </script>
@endsection