@extends('dashboard.layouts.app')
<style>

    .attendance-wrapper {
        height: 80vh;
        background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    }

    .attendance-card {
        width: 100%;
        max-width: 420px;
        background: #fff;
        border-radius: 16px;
        padding: 30px;
        box-shadow: 0 15px 35px rgba(0,0,0,0.1);
        animation: fadeIn 0.5s ease-in-out;
    }

    .attendance-form {
        width: 100%;
    }

    .checkin-btn {
        width: 100%;
        padding: 16px;
        font-size: 1.2rem;
        border-radius: 12px;
        background: linear-gradient(135deg, #0d6efd, #0a58ca);
        border: none;
        color: #fff !important  ;
        transition: all 0.3s ease;
    }

    .checkin-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(13,110,253,0.4);
    }

    .checked-in-box {
        padding: 20px;
        background: #e9f7ef;
        border-radius: 12px;
        color: #198754;
    }

    .checked-in-box i {
        font-size: 2.5rem;
        margin-bottom: 10px;
    }

    .checked-in-box span {
        font-size: 1.3rem;
        font-weight: bold;
    }

    .checkout-btn {
        background: #dc3545;
        color: #fff;
        border-radius: 12px;
        padding: 14px;
    }

    .logout-btn {
        background: #6c757d;
        color: #fff;
        border-radius: 12px;
        padding: 14px;
    }

    .checkout-btn:hover,
    .logout-btn:hover {
        opacity: 0.9;
    }

    /* Animation */
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }



    .welcome-box {
        background: #f8f9fa;
        border-radius: 12px;
        padding: 15px 20px;
        box-shadow: inset 0 0 0 1px #e9ecef;
    }

    .welcome-text {
        font-size: 0.85rem;
        color: #6c757d;
        letter-spacing: 0.5px;
    }

    .user-name {
        margin: 0;
        font-weight: 600;
        color: #212529;
    }


</style>
@section('content')
    @include('components.alert')
    <div class="attendance-wrapper d-flex justify-content-center align-items-center">
        <div class="attendance-card text-center">

            {{-- Check-in Form --}}
            <form  class="attendance-form"  method="POST" action="{{ route('attendance.checkin.store') }}">
                @if(!is_null($attendance?->check_in))
                    <div class="checked-in-box">
                        <i class="fa-solid fa-circle-check"></i>
                        <h4>Checked in at</h4>
                        <span>{{ \Carbon\Carbon::parse($attendance->check_in)->format('h:i A') }}</span>
                    </div>
                @else
                    @csrf
                    <div class="welcome-box mb-4">
                        <span class="welcome-text">Welcome,</span>
                        <div class="user-name fw-bold">{{ auth()->user()->full_name }}</div>
                    </div>
                    <div class="alert alert-warning text-center mb-3">
                        <i class="fa-solid fa-circle-info me-1"></i>
                        You need to check in before continuing.
                    </div>

                    <button type="submit" name="type" value="checkin" class="btn checkin-btn">
                        <i class="fa-solid fa-door-open me-2"></i> Check In
                    </button>
                @endif
            </form>

            @if(!is_null($attendance?->check_in))
                {{-- Checkout / Logout --}}
                <form class="attendance-form mt-3">
                    <button type="submit" name="type" value="checkout" class="btn btn-log-out checkout-btn mb-2">
                        <i class="fa-solid fa-door-closed me-2"></i> Check Out & Logout
                    </button>

                    <button type="submit" name="type" value="logout" class="btn btn-log-out logout-btn">
                        <i class="fa-solid fa-right-from-bracket me-2"></i> Just Logout
                    </button>
                </form>
            @endif

        </div>
    </div>

@endsection

@push('styles')
    {{-- Select2 CDN --}}
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush

@push('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        $(document).ready(function () {
            let env_test  =  "{{env('APP_LOCALE_ENV')}}";
            $('.select2').select2();

            $(document).on('click', '.btn-log-out', function (e) {
                e.preventDefault();
                let url = '';
                env_test ? url = '{{env("TEST_LOGOUT_URL")}}' : url = '{{env("LOGOUT_URL")}}';
                let type = $(this).val();
                $.ajax({
                    url: url,
                    type: "POST",
                    data: {
                        _token: '{{ csrf_token() }}',
                        type: type
                    },
                    xhrFields: { withCredentials: true },
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    },
                    success: function (response) {
                        console.log(response);
                        if (response.redirect) {
                            window.location.href = response.redirect
                        }
                        if(response.test_url) {
                            window.location.href = response.test_url ;
                        }
                    },
                    error: function (xhr) {
                        let msg = 'Logout failed. Please try again.';

                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            msg = xhr.responseJSON.message;
                        }

                        alert(msg);

                        console.error('Logout error:', xhr);
                    }
                });
            });
        });
    </script>
@endpush