@extends('layouts/contentNavbarLayout')

@section('title', 'Employee Details')

@section('content')
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="/dashboard">Home</a>
            </li>
            <li class="breadcrumb-item">
                <a href="/staff">Employee</a>
            </li>
            <li class="breadcrumb-item active">
                Employee Detail
            </li>
        </ol>
    </nav>
    <div class="container">
        @if (isset($userGroupPermissions['staff']) && $userGroupPermissions['staff']['views'] == 1)

            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <div class="row">
                                @if (session('success'))
                                    <div class="alert alert-success fade-out" id="success-alert1">
                                        {{ session('success') }}
                                    </div>
                                @endif

                                @if (session('error'))
                                    <div class="alert alert-danger fade-out" id="error-alert">
                                        {{ session('error') }}
                                    </div>
                                @endif
                                <div class="col-md-6">
                                    <h3 class="card-title mb-3">{{ $employee->name }}
                                        @if (isset($userGroupPermissions['staff']) && $userGroupPermissions['staff']['edits'] == 1)
                                            <span class="mdi mdi-pencil"
                                                onclick="editRow({{ $employee->staff_id }})"></span>
                                        @endif

                                    </h3>
                                    <p class="card-text">Shop:
                                        {{ $shops->firstWhere('id', $employee->shop)->shop_name ?? 'N/A' }}</p>
                                    <p class="card-text">Designation:
                                        {{ $designations->firstWhere('id', $employee->designation)->name ?? 'N/A' }}</p>
                                    <p class="card-text">Phone: {{ $employee->phone }}</p>
                                    <p class="card-text">Gender: {{ $employee->gender }}</p>
                                    <p class="card-text">Status: @if ($employee->status === 1)
                                            Active
                                        @elseif($employee->status === 0)
                                            Blocked
                                        @elseif($employee->status === 2)
                                            Resigned
                                        @else
                                            Unknown
                                        @endif
                                    </p>
                                    <p class="card-text">Joined Date:
                                        {{ \Carbon\Carbon::parse($employee->date_of_join)->format('d/m/Y') }}</p>
                                    <p class="card-text">Marital Status: {{ $employee->marital_status }}</p>
                                    <p class="card-text">Blood Group: {{ $employee->blood_group }}</p>
                                    <p class="card-text">Date of Resignation:
                                        {{ $employee->date_of_resign ? \Carbon\Carbon::parse($employee->date_of_resign)->format('d/m/Y') : 'N/A' }}
                                    </p>
                                    <p class="card-text">Date of Application:
                                        {{ \Carbon\Carbon::parse($employee->date_of_application)->format('d/m/Y') }}</p>
                                </div>
                                <div class="col-md-6 mt-5">

                                    <p class="card-text">Address: {{ $employee->address }}</p>
                                    <p class="card-text">Key Skills: {{ $employee->key_skills }}</p>
                                    <p class="card-text">Qualification: {{ $employee->qualification }}</p>
                                    <p class="card-text">Description: {{ $employee->description }}</p>

                                    <p class="card-text">ID Proof Type: {{ $employee->id_type }}</p>
                                    <p class="card-text">ID Proof Number: {{ $employee->id_proof_number }}</p>
                                    @if ($employee->resume)
                                        <p class="btn1 btn-primary card-text">
                                            <span class="mdi mdi-eye me-2"></span>
                                            <a href="{{ asset('/storage/staff/' . $employee->resume) }}" target="_blank"
                                                rel="noopener noreferrer" style="color: white;">
                                                View Resume
                                            </a>
                                        </p>
                                    @endif

                                    @if ($employee->id_proof)
                                        <p class="btn1 btn-secondary card-text">
                                            <span class="mdi mdi-eye me-2"></span>
                                            <a href="{{ asset('/storage/staff/' . $employee->id_proof) }}" target="_blank"
                                                rel="noopener noreferrer">
                                                View ID Proof
                                            </a>
                                        </p>
                                    @endif

                                </div>
                            </div>
                        </div>
                        <div>
                            <img src="{{ $employee->photo ? asset('/storage/staff/' . $employee->photo) : asset('assets/img/defaultimage.jpg') }}"
                                class="img-fluid rounded-start" alt="Employee Photo"
                                style="width: 74px; height:74px; object-fit:cover;">
                        </div>
                    </div>

                    <div class="row mt-5">
                        <div class="col-xl-12">
                            <div class="mb-4">
                                <div class="card-header p-0">
                                    <div class="nav-align-top d-flex justify-content-between align-items-center">
                                        <ul class="nav nav-tabs" role="tablist">

                                            @if (isset($userGroupPermissions['leaves']) && $userGroupPermissions['leaves']['views'] == 1)
                                                <li class="nav-item">
                                                    <button type="button" class="nav-link active" role="tab"
                                                        data-bs-toggle="tab" data-bs-target="#navs-top-leaves"
                                                        aria-controls="navs-top-leaves"
                                                        aria-selected="false">Leaves</button>
                                                </li>
                                            @endif

                                            @if (isset($userGroupPermissions['salary_master']) && $userGroupPermissions['salary_master']['views'] == 1)
                                                <li class="nav-item">
                                                    <button type="button" class="nav-link" role="tab"
                                                        data-bs-toggle="tab" data-bs-target="#navs-tops-revisions"
                                                        aria-controls="navs-tops-revisions" aria-selected="true">Revision
                                                        Details</button>
                                                </li>
                                            @endif
                                        </ul>

                                        </divdiv>
                                    </div>
                                    <div class="card-body">
                                        <div class="tab-content p-0">
                                            <div class="tab-pane fade show active" id="navs-top-leaves" role="tabpanel">
                                                <table class="table table-bordered table-hover" id="example">
                                                    <thead class="thead-dark">
                                                        <tr>
                                                            @foreach ($columns as $column)
                                                                @if ($column !== 'id' && $column !== 'created_at' && $column !== 'updated_at' && $column !== 'employee')
                                                                    <th>{{ ucfirst(str_replace('_', ' ', $column)) }}</th>
                                                                @endif
                                                            @endforeach
                                                        </tr>
                                                    </thead>
                                                    <tbody class="table-border-bottom-0">
                                                        @foreach ($leaves as $item)
                                                            <tr>
                                                                @foreach ($columns as $column)
                                                                    @if ($column !== 'id' && $column !== 'created_at' && $column !== 'updated_at' && $column !== 'employee')
                                                                        <td>
                                                                            {{ $item->{$column} }}
                                                                        </td>
                                                                    @endif
                                                                @endforeach
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>

                                            <div class="tab-pane fade" id="navs-tops-revisions" role="tabpanel">
                                                <table class="table table-bordered table-hover" id="example1">
                                                    <thead class="thead-dark">
                                                        <tr>
                                                            @foreach ($columns1 as $column)
                                                                @if ($column !== 'id' && $column !== 'created_at' && $column !== 'updated_at' && $column !== 'employee')
                                                                    <th>{{ ucfirst(str_replace('_', ' ', $column)) }}</th>
                                                                @endif
                                                            @endforeach
                                                        </tr>
                                                    </thead>
                                                    <tbody class="table-border-bottom-0">
                                                        @foreach ($salaryRevisions as $item)
                                                            <tr>
                                                                @foreach ($columns1 as $column)
                                                                    @if ($column !== 'id' && $column !== 'created_at' && $column !== 'updated_at' && $column !== 'employee')
                                                                        <td>
                                                                            {{ $item->{$column} }}
                                                                        </td>
                                                                    @endif
                                                                @endforeach
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>

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

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


                <!-- Off-canvas for editing employee data -->
                <div class="offcanvas offcanvas-end" tabindex="-1" id="editEmployeeOffcanvas"
                    aria-labelledby="editEmployeeOffcanvasLabel">
                    <div class="offcanvas-header">
                        <h5 id="editEmployeeOffcanvasLabel">Edit Employee</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                    </div>
                    <div class="offcanvas-body">
                        <form id="editForm">
                            @csrf
                            @method('PUT')
                            <input type="hidden" id="editId" name="editId">
                            <div class="row">
                                @foreach ($columns3 as $column)
                                    @if (
                                        $column === 'staff_id' ||
                                            $column === 'carry_forward_casual_leaves' ||
                                            $column === 'carry_forward_sick_leaves' ||
                                            $column === 'IsCrm' ||
                                            $column === 'IsSale' ||
                                            $column === 'created_at' ||
                                            $column === 'updated_at')
                                    @elseif ($column === 'address')
                                        <div class="col-md-3">
                                            <div class="form-floating mb-4">
                                                <textarea class="form-control" name="{{ $column }}" id="address2" placeholder=" " style="height: 100px;"
                                                    required></textarea>
                                                <label for="address2">
                                                    {{ ucfirst(str_replace('_', ' ', $column)) }}
                                                    <span class="text-danger">*</span></label>
                                            </div>
                                        </div>
                                    @elseif ($column === 'qualification' || $column === 'key_skills' || $column === 'description')
                                        <div class="col-md-3">
                                            <div class="form-floating mb-4">
                                                <textarea class="form-control" name="{{ $column }}"
                                                    id="{{ $column === 'qualification' ? 'qualification1' : ($column === 'key_skills' ? 'key_skills1' : 'description1') }}"
                                                    placeholder=" " style="height: 100px;" @if ($column === 'qualification') required @endif>
                                               </textarea>
                                                <label
                                                    for="{{ $column === 'qualification' ? 'qualification1' : ($column === 'key_skills' ? 'key_skills1' : 'description1') }}">
                                                    {{ ucfirst(str_replace('_', ' ', $column)) }}
                                                    @if ($column === 'qualification')
                                                        <span class="text-danger">*</span>
                                                    @endif
                                                </label>
                                            </div>
                                        </div>
                                    @elseif ($column === 'user_type')
                                        <div class="col-md-6">
                                            <div class="form-floating form-floating-outline mb-4">
                                                <select id="user_type1" name="user_type" class="form-select" required>
                                                    <option value="" disabled selected>
                                                        Select a
                                                        User Group
                                                    </option>
                                                    @foreach ($usergroup as $group)
                                                        <option value="{{ $group->id }}">
                                                            {{ $group->user_type }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                <label for="user_type">User
                                                    Group
                                                    <span class="text-danger">*</span></label>
                                            </div>
                                        </div>
                                    @elseif ($column === 'designation')
                                        <div class="col-md-6">
                                            <div class="form-floating form-floating-outline mb-4">
                                                <select id="designation1" name="{{ $column }}" class="form-select"
                                                    required>
                                                    <option value="" disabled selected>
                                                        Select a
                                                        Designation
                                                    </option>
                                                    @foreach ($designations as $designation)
                                                        <option value="{{ $designation->id }}">
                                                            {{ $designation->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                <label for="designation1">{{ ucfirst(str_replace('_', ' ', $column)) }}
                                                    <span class="text-danger">*</span></label>
                                            </div>
                                        </div>
                                    @elseif ($column === 'shop')
                                        <div class="col-md-6">
                                            <div class="form-floating form-floating-outline mb-4">
                                                <select id="shop1" name="{{ $column }}" class="form-select"
                                                    required>
                                                    <option value="" disabled selected>
                                                        Select a
                                                        Shop
                                                    </option>
                                                    @foreach ($shops as $shop)
                                                        <option value="{{ $shop->id }}">
                                                            {{ $shop->shop_name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                <label for="shop1">{{ ucfirst(str_replace('_', ' ', $column)) }}
                                                    <span class="text-danger">*</span></label>
                                            </div>
                                        </div>
                                    @elseif ($column === 'gender')
                                        <div class="col-md-6">
                                            <div class="form-floating form-floating-outline mb-4">
                                                <select id="{{ $column }}1" class="form-select"
                                                    name="{{ $column }}" required>
                                                    <option value="Male">
                                                        Male
                                                    </option>
                                                    <option value="Female">
                                                        Female
                                                    </option>
                                                    <option value="Others">
                                                        Others
                                                    </option>
                                                </select>
                                                <label
                                                    for="{{ $column }}">{{ ucfirst(str_replace('_', ' ', $column)) }}
                                                    <span class="text-danger">*</span></label>
                                            </div>
                                        </div>
                                    @elseif ($column === 'marital_status')
                                        <div class="col-md-6">
                                            <div class="form-floating form-floating-outline mb-4">
                                                <select id="{{ $column }}" class="form-select"
                                                    name="{{ $column }}" value="{{ old($column) }}">
                                                    <option value="Single">
                                                        Single
                                                    </option>
                                                    <option value="Married">
                                                        Married
                                                    </option>
                                                </select>
                                                <label
                                                    for="{{ $column }}">{{ ucfirst(str_replace('_', ' ', $column)) }}</label>
                                            </div>
                                        </div>
                                    @elseif ($column === 'blood_group')
                                        <div class="col-md-6">
                                            <div class="form-floating form-floating-outline mb-4">
                                                <select id="{{ $column }}1" class="form-select"
                                                    name="{{ $column }}">
                                                    <option value="" disabled selected>
                                                        Select blood
                                                        group
                                                    </option>
                                                    <option value="O+">
                                                        O+</option>
                                                    <option value="O-">
                                                        O-</option>
                                                    <option value="A+">
                                                        A+</option>
                                                    <option value="A-">
                                                        A-</option>
                                                    <option value="B+">
                                                        B+</option>
                                                    <option value="B-">
                                                        B-</option>
                                                    <option value="AB+">
                                                        AB+</option>
                                                    <option value="AB-">
                                                        AB-</option>
                                                </select>
                                                <label
                                                    for="{{ $column }}">{{ ucfirst(str_replace('_', ' ', $column)) }}</label>
                                            </div>
                                        </div>
                                    @elseif ($column === 'id_type')
                                        <div class="col-md-6">
                                            <div class="form-floating form-floating-outline mb-4">
                                                <select id="id_type1" class="form-select" name="id_type" required>
                                                    <option value="" disabled
                                                        {{ old('id_type', $data->id_type ?? '') === '' ? 'selected' : '' }}>
                                                        Select Id Type
                                                    </option>
                                                    <option value="Aadhar Card"
                                                        {{ old('id_type', $data->id_type ?? '') === 'Aadhar Card' ? 'selected' : '' }}>
                                                        Aadhar Card
                                                    </option>
                                                    <option value="Passport"
                                                        {{ old('id_type', $data->id_type ?? '') === 'Passport' ? 'selected' : '' }}>
                                                        Passport
                                                    </option>
                                                    <option value="Pan Card"
                                                        {{ old('id_type', $data->id_type ?? '') === 'Pan Card' ? 'selected' : '' }}>
                                                        Pan Card
                                                    </option>
                                                    <option value="Election Identity Card"
                                                        {{ old('id_type', $data->id_type ?? '') === 'Election Identity Card' ? 'selected' : '' }}>
                                                        Election Identity Card
                                                    </option>
                                                </select>
                                                <label for="id_type1">Id Type <span class="text-danger">*</span></label>
                                            </div>
                                        </div>
                                    @elseif ($column === 'resume')
                                        <div class="col-md-6">
                                            <div class="form-floating form-floating-outline mb-4">
                                                <input type="file" name="{{ $column }}"
                                                    id="{{ $column }}" class="form-control">
                                                <label
                                                    for="{{ $column }}">{{ ucfirst(str_replace('_', ' ', $column)) }}
                                                    (.pdf,.doc,.docx)
                                                </label>
                                            </div>
                                        </div>
                                    @elseif ($column === 'id_proof')
                                        <div class="col-md-6">
                                            <div class="form-floating form-floating-outline mb-4">
                                                <input type="file" name="{{ $column }}"
                                                    value="{{ old($column) }}" id="{{ $column }}"
                                                    class="form-control">
                                                <label
                                                    for="{{ $column }}">{{ ucfirst(str_replace('_', ' ', $column)) }}
                                                    <span class="text-danger">*</span>
                                                    (.jpg,.jpeg,.png)</label>
                                            </div>
                                        </div>
                                    @elseif ($column === 'photo')
                                        <div class="col-md-8">
                                        </div>
                                        <div class="col-md-4 mb-4">
                                            <div class="d-flex align-items-center justify-content-end">
                                                <div class="box text-center">
                                                    <!-- Display the image -->
                                                    <img id="imagePreview2"
                                                        src="{{ old('photo') ? asset('storage/staff/' . old('photo')) : asset('assets/img/defaultimage.jpg') }}"
                                                        alt="Image Preview"
                                                        style="height: 120px; object-fit: cover; cursor: pointer;" />

                                                    <label for="fileInput"
                                                        class="form-label d-flex justify-content-center">
                                                        Upload Image
                                                        (.jpg,
                                                        .jpeg, .png)
                                                    </label>
                                                    <input type="file" name="photo" id="fileInput"
                                                        class="form-control" accept=".jpg,.jpeg,.png"
                                                        onchange="previewImage(event)">
                                                </div>
                                            </div>
                                        </div>

                                        <script>
                                            function previewImage(event) {
                                                const input = event.target;
                                                const preview = document.getElementById('imagePreview2');
                                                const file = input.files[0];

                                                if (file) {
                                                    const reader = new FileReader();
                                                    reader.onload = function(e) {
                                                        preview.src = e.target.result;
                                                    }
                                                    reader.readAsDataURL(file);
                                                } else {
                                                    // Handle the case when no file is selected
                                                    preview.src =
                                                        "{{ old('photo') ? asset('storage/staff/' . old('photo')) : asset('assets/img/defaultimage.jpg') }}";
                                                }
                                            }
                                        </script>
                                    @elseif ($column === 'status')
                                        <!-- Dropdown for the status field -->
                                        <div class="col-md-6">
                                            <div class="form-floating form-floating-outline mb-4">
                                                <select id="status1" class="form-select" name="{{ $column }}">
                                                    <option value="1">
                                                        Active
                                                    </option>
                                                    <option value="0">
                                                        Blocked
                                                    </option>
                                                    <option value="2">
                                                        Resigned
                                                    </option>
                                                </select>
                                                <label for="{{ $column }}"
                                                    class="form-label">{{ ucfirst($column) }}</label>
                                            </div>
                                        </div>
                                    @elseif ($column === 'date_of_application')
                                        <div class="col-md-6">
                                            <div class="form-floating form-floating-outline mb-4">
                                                <input type="date" id="{{ $column }}1" class="form-control"
                                                    name="{{ $column }}" value="{{ old($column) }}">
                                                <label for="{{ $column }}"
                                                    class="form-label">{{ ucfirst(str_replace('_', ' ', $column)) }}</label>
                                            </div>
                                        </div>
                                    @elseif ($column === 'date_of_join')
                                        <div class="col-md-6">
                                            <div class="form-floating form-floating-outline mb-4">
                                                <input type="date" id="{{ $column }}1" class="form-control"
                                                    name="{{ $column }}" value="{{ old($column) }}" required>
                                                <label for="{{ $column }}"
                                                    class="form-label">{{ ucfirst(str_replace('_', ' ', $column)) }}
                                                    <span class="text-danger">*</span></label>
                                            </div>
                                        </div>
                                    @elseif ($column === 'date_of_resign')
                                        <div class="col-md-6">
                                            <div class="form-floating form-floating-outline mb-4">
                                                <input type="date" id="{{ $column }}1" class="form-control"
                                                    name="{{ $column }}" value="{{ old($column) }}">
                                                <label for="{{ $column }}"
                                                    class="form-label">{{ ucfirst(str_replace('_', ' ', $column)) }}</label>
                                            </div>
                                        </div>
                                    @elseif ($column === 'date_of_birth')
                                        <div class="col-md-6">
                                            <div class="form-floating form-floating-outline mb-4">
                                                <input type="date" id="{{ $column }}1" class="form-control"
                                                    name="{{ $column }}" value="{{ old($column) }}" required>
                                                <label for="{{ $column }}"
                                                    class="form-label">{{ ucfirst(str_replace('_', ' ', $column)) }}
                                                    <span class="text-danger">*</span></label>
                                            </div>
                                        </div>
                                    @elseif ($column === 'id_proof_number')
                                        <div class="col-md-6">
                                            <div class="form-floating form-floating-outline mb-4">
                                                <input type="text" id="{{ $column }}" class="form-control"
                                                    name="{{ $column }}" value="{{ old($column) }}" required>
                                                <label for="{{ $column }}"
                                                    class="form-label">{{ ucfirst(str_replace('_', ' ', $column)) }}
                                                    <span class="text-danger">*</span></label>
                                            </div>
                                        </div>
                                    @elseif ($column === 'phone')
                                        <div class="col-md-6">
                                            <div class="form-floating form-floating-outline mb-4">
                                                <input type="text" id="phone1" class="form-control"
                                                    name="{{ $column }}" value="{{ old($column) }}" required>
                                                <label for="phone1"
                                                    class="form-label">{{ ucfirst(str_replace('_', ' ', $column)) }}
                                                    <span class="text-danger">*</span></label>
                                            </div>
                                        </div>
                                    @elseif ($column === 'email')
                                        <div class="col-md-6">
                                            <div class="form-floating form-floating-outline mb-4">
                                                <input type="text" id="email1" class="form-control"
                                                    name="{{ $column }}" value="{{ old($column) }}" required>
                                                <label for="email1"
                                                    class="form-label">{{ ucfirst(str_replace('_', ' ', $column)) }}
                                                    <span class="text-danger">*</span></label>
                                            </div>
                                        </div>
                                    @elseif ($column === 'password')
                                        <div class="col-md-6">
                                            <div class="form-floating mb-4">
                                                <div class="input-group">
                                                    <input type="password" id="{{ $column }}1"
                                                        class="form-control" name="{{ $column }}"
                                                        placeholder="Enter Password" value="{{ old($column) }}"
                                                        required>


                                                    <span class="input-group-text" id="toggle-password"
                                                        style="cursor: pointer;">
                                                        <i class="mdi mdi-eye" id="password-icon"></i>
                                                    </span>
                                                </div>
                                                <div id="password-error" class="text-danger error-message">
                                                    (The password field must be at least 8 characters.)
                                                </div>
                                            </div>
                                        </div>

                                        <script>
                                            document.getElementById('toggle-password').addEventListener('click', function() {
                                                const passwordField = document.getElementById('{{ $column }}1');
                                                const passwordIcon = document.getElementById('password-icon');

                                                if (passwordField.type === "password") {
                                                    passwordField.type = "text";
                                                    passwordIcon.classList.remove('mdi-eye');
                                                    passwordIcon.classList.add('mdi-eye-off');
                                                } else {
                                                    passwordField.type = "password";
                                                    passwordIcon.classList.remove('mdi-eye-off');
                                                    passwordIcon.classList.add('mdi-eye');
                                                }
                                            });
                                        </script>
                                    @else
                                        <div class="col-md-6">
                                            <!-- Text input fields for other columns -->
                                            <div class="form-floating form-floating-outline mb-4">
                                                <input type="text" id="{{ $column }}1" class="form-control"
                                                    name="{{ $column }}"
                                                    placeholder="Enter your {{ $column }}"
                                                    value="{{ old($column) }}" required>
                                                <label
                                                    for="{{ $column }}">{{ ucfirst(str_replace('_', ' ', $column)) }}
                                                    <span class="text-danger">*</span></label>
                                                <!-- Error message placeholder -->
                                                <div id="{{ $column }}-error" class="text-danger error-message">
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @endforeach

                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn1 btn-secondary" data-bs-dismiss="modal">Close</button>
                                <button type="button" class="btn1 btn-primary ms-3" onclick="handleFormSubmit()">Save
                                    changes</button>

                            </div>


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


                <script>
                    function editRow(id) {
                        // Fetch the row data using AJAX and populate the modal
                        $.get('/manageemployee/' + id + '/edit', function(data) {
                            console.log('Received data:', data);

                            // Check if the modal element exists
                            if ($('#editEmployeeOffcanvas').length) {
                                $('#editId').val(data.staff_id);
                                $('#id_proof_number').val(data.id_proof_number);
                                $('#id_type1').val(data.id_type);
                                $('#status1').val(data.status);
                                $('#gender1').val(data.gender);
                                $('#name1').val(data.name);
                                $('#password1').val(data.password);
                                $('#email1').val(data.email);
                                $('#shop1').val(data.shop);
                                $('#designation1').val(data.designation);
                                $('#phone1').val(data.phone);
                                $('#user_type1').val(data.user_type);
                                $('#address2').val(data.address);
                                $('#qualification1').val(data.qualification);
                                $('#date_of_birth1').val(data.date_of_birth);
                                $('#key_skills1').val(data.key_skills);
                                $('#description1').val(data.description);
                                $('#date_of_application1').val(data.date_of_application);
                                $('#date_of_join1').val(data.date_of_join);
                                $('#date_of_resign1').val(data.date_of_resign);
                                $('#blood_group1').val(data.blood_group);

                                // Iterate through columns to set the values
                                @foreach ($columns as $column)
                                    @if ($column === 'photo')
                                        // Display the existing image if it exists
                                        if ($('#imagePreview2').length) {
                                            $('#imagePreview2').attr('src', data.{{ $column }} ?
                                                '{{ asset('storage/staff/') }}/' + data.{{ $column }} :
                                                '{{ asset('assets/img/defaultimage.jpg') }}');
                                        }
                                    @elseif ($column === 'user_type')
                                        // Set the selected value for dropdowns
                                        if ($('#{{ $column }}').length) {
                                            var value = data.{{ $column }};
                                            $('#{{ $column }}').val(value).change();

                                        }
                                    @else
                                        // Set the value for text inputs
                                        if ($('#{{ $column }}').length) {
                                            $('#{{ $column }}').val(data.{{ $column }});
                                        }
                                    @endif
                                @endforeach

                                var offcanvas = new bootstrap.Offcanvas(document.getElementById('editEmployeeOffcanvas'));
                                offcanvas.show();
                            } else {
                                alert('Failed to fetch Data.');
                            }
                        }).fail(function(xhr, status, error) {
                            alert('Failed to fetch data:', error);
                        });
                    }


                    function handleFormSubmit() {
                        // Prevent default form submission
                        var id = $('#editId').val(); // Extract the ID from the form
                        var formData = new FormData($('#editForm')[0]); // Get form data
                        formData.append('_method', 'PUT'); // Ensure the PUT method is included
                        console.log(formData);
                        console.log(id);

                        $.ajax({
                            url: '/manageemployee/' + id,
                            method: 'POST', // Use POST to support Laravel's method spoofing
                            data: formData,
                            processData: false,
                            contentType: false,
                            success: function(response) {
                                console.log('Updated Successfully');

                                setTimeout(function() {
                                    window.location.reload();
                                }, 2000); // Delay for 2 seconds
                            },
                            error: function(xhr, status, error) {
                                // Handle error
                                window.location.reload();
                                $('#error-alert').text('Update failed: ' + error).show();
                            }
                        });
                    }
                </script>
            </div>

        @endif
        <div class="offcanvas offcanvas-end offcanvas50" tabindex="-1" id="offcanvasRight"
            aria-labelledby="offcanvasRightLabel">
            <div class="offcanvas-header">
                <h5 id="offcanvasRightLabel">Attendance Details</h5>
                <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
                    aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                <h4><strong></strong> <span id="offcanvasDate"></span></h4>
                <div class="card-body scrollable-content" style="overflow-y: auto">
                    <ul class="res-activity-list1">
                        <!-- Dynamic content will be inserted here -->
                    </ul>
                </div>
            </div>
        </div>

    @endsection
    @section('page-script')

        <link href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css" rel="stylesheet">
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

        <!-- DataTables JS -->
        <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>

        <!-- Bootstrap 5 JS -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

        <script>
            function editRow1(date, empId) {
                // Log the original date and employee ID
                console.log("Original Date:", date);
                console.log("Employee ID:", empId);

                // Convert the date to 'Y-m-d' format for backend compatibility using moment.js
                var formattedDate = moment(date, 'DD MMMM YYYY').format('YYYY-MM-DD');

                // Log the formatted date
                console.log("Formatted Date:", formattedDate);

                // Make an AJAX request to fetch attendance data
                $.ajax({
                    url: `/attendance/${empId}/${formattedDate}`,
                    method: 'GET',
                    success: function(data) {
                        // Clear existing content
                        $('.res-activity-list1').empty();

                        // Log the data
                        console.log(data);

                        // Construct and insert the HTML content
                        if (data.length > 0) {
                            data.forEach(function(activity) {
                                var inTime = moment(activity.in_time).format('h:mm A');
                                var outTime = activity.out_time ? moment(activity.out_time).format(
                                    'h:mm A') : 'N/A';

                                var listItem = `
                        <li>
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <p class="mb-0">Punch In at</p>
                                    <p class="res-activity-time">
                                        <span class="mdi mdi-clock-outline"></span>
                                        ${inTime}.
                                    </p>
                                </div>
                                <div>${activity.time || 'N/A'}</div>
                                <div>
                                    <p class="mb-0">Punch Out at</p>
                                    <p class="res-activity-time">
                                        <span class="mdi mdi-clock-outline"></span>
                                        ${outTime}.
                                    </p>
                                </div>
                            </div>
                        </li>
                    `;

                                $('.res-activity-list1').append(listItem);
                            });
                        } else {
                            $('.res-activity-list1').append('<li>No activity for today.</li>');
                        }

                        // Update date and employee ID in off-canvas
                        $('#offcanvasDate').text(date);
                        $('#offcanvasEmployeeId').text(empId);

                        // Show the off-canvas
                        var offcanvasElement = document.getElementById('offcanvasRight');
                        var offcanvas = new bootstrap.Offcanvas(offcanvasElement);
                        offcanvas.show();
                    },
                    error: function(xhr) {
                        console.error("Error fetching attendance data:", xhr.responseText);
                    }
                });
            }

            $(document).ready(function() {
                $('#example').DataTable({
                    "paging": true,
                    "lengthChange": true,
                    "searching": true,
                    "ordering": false,
                    "info": true,
                    "autoWidth": false,
                    "responsive": true
                });
            });

            $(document).ready(function() {
                $('#example1').DataTable({
                    "paging": true,
                    "lengthChange": true,
                    "searching": true,
                    "ordering": true,
                    "info": true,
                    "autoWidth": false,
                    "responsive": true
                });
            });

            $(document).ready(function() {
                $('#example2').DataTable({
                    "paging": true,
                    "lengthChange": true,
                    "searching": true,
                    "ordering": true,
                    "info": true,
                    "autoWidth": false,
                    "responsive": true
                });
            });

            document.addEventListener('DOMContentLoaded', function() {
                const offcanvasElement = document.getElementById('offcanvasRight');

                offcanvasElement.addEventListener('show.bs.offcanvas', function(event) {
                    const button = event.relatedTarget; // Button that triggered the offcanvas
                    const date = button.getAttribute(
                        'data-date'); // Extract date from data-<span class="text-danger">*</span> attributes
                    const employeeId = button.getAttribute(
                        'data-employee-id'
                    ); // Extract employee ID from data-<span class="text-danger">*</span> attributes

                    // Update the offcanvas content
                    document.getElementById('offcanvasDate').textContent = date;
                    document.getElementById('offcanvasEmployeeId').textContent = employeeId;
                });
            });
        </script>
    @endsection