@extends('layouts.contentNavbarLayout')

@section('title', 'Dashboard - Manage Employee')

@section('content')
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="/dashboard">Home</a>
            </li>
            <li class="breadcrumb-item active">
                Attendance
            </li>
        </ol>
    </nav>



    <div class="row">
        <div class="col-12">
            <div class="card mb-4">
                <h5 class="card-header">Manage Attendance</h5>
                <div class="card-body">

                    @if (session('success'))
                        <div class="alert alert-success fade-out" id="success-alert">
                            {{ session('success') }}
                        </div>
                    @endif

                    @if (session('error'))
                        <div class="alert alert-danger fade-out" id="error-alert">
                            {{ session('error') }}
                        </div>
                    @endif

                    @if (isset($userGroupPermissions['attendance']) && $userGroupPermissions['attendance']['views'] == 1)
                        <form method="GET" action="{{ route('shop.employees') }}" onsubmit="return validateAndSubmit()">
                            <div class="row">
                                <div class="col-md-4">
                                    <label for="shop">Shop</label>
                                    <select name="shop" id="shop" class="form-control">
                                        <option value="">Select Shop</option>
                                        @foreach ($shops as $shop)
                                            <option value="{{ $shop->id }}"
                                                {{ isset($selectedShopId) && $selectedShopId == $shop->id ? 'selected' : '' }}>
                                                {{ $shop->shop_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-4">
                                    <label for="year">Year</label>
                                    <select name="year" id="year" class="form-control">
                                        <option value="">Select Year</option>
                                        @for ($i = date('Y'); $i >= 2000; $i--)
                                            <option value="{{ $i }}"
                                                {{ request('year') == $i ? 'selected' : '' }}>
                                                {{ $i }}
                                            </option>
                                        @endfor
                                    </select>
                                </div>

                                <div class="col-md-4">
                                    <label for="month">Month</label>
                                    <select name="month" id="month" class="form-control">
                                        <option value="">Select Month</option>
                                        @foreach (['jan' => 'January', 'feb' => 'February', 'mar' => 'March', 'apr' => 'April', 'may' => 'May', 'jun' => 'June', 'jul' => 'July', 'aug' => 'August', 'sep' => 'September', 'oct' => 'October', 'nov' => 'November', 'dec' => 'December'] as $value => $name)
                                            <option value="{{ $value }}"
                                                {{ request('month') == $value ? 'selected' : '' }}>
                                                {{ $name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </form>

                        <script>
                            function validateAndSubmit() {
                                const shop = document.getElementById('shop').value;
                                const year = document.getElementById('year').value;
                                const month = document.getElementById('month').value;

                                if (!shop || !year || !month) {
                                    alert('Please select values for Shop, Year, and Month.');
                                    return false; // Prevent form submission
                                }

                                // Show loading spinner on valid submission
                                showSpinner();
                                return true; // Allow form submission
                            }

                            // Optional: Auto-submit form when all values are selected
                            document.querySelectorAll('#shop, #year, #month').forEach(select => {
                                select.addEventListener('change', () => {
                                    if (document.getElementById('shop').value &&
                                        document.getElementById('year').value &&
                                        document.getElementById('month').value) {
                                        showSpinner();
                                        document.querySelector('form').submit();
                                    }
                                });
                            });

                            // Show Spinner Function
                            function showSpinner() {
                                document.getElementById('loadingSpinner').classList.remove('d-none');
                            }

                            // Hide Spinner Function
                            function hideSpinner() {
                                document.getElementById('loadingSpinner').classList.add('d-none');
                            }
                        </script>
                    @endif
                    <!-- Spinner Overlay -->
                    <div id="loadingSpinner" class="spinner-overlay d-none">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>

                    @include('Includes.employeeTable', [
                        'year' => request('year'),
                        'month' => request('month'),
                    ])

                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            function showAlert(id) {
                const alert = document.getElementById(id);
                if (alert) {
                    alert.style.display = 'block';
                    setTimeout(function() {
                        alert.style.opacity = '0';
                        setTimeout(function() {
                            alert.style.display = 'none';
                        }, 500);
                    }, 2000);
                }
            }
            showAlert('success-alert');
            showAlert('error-alert');
        });
    </script>
@endsection