@extends('layouts.master')
@section('title', 'Workflow Engine | Dashboard')
@section('content')

    @include('partials.data_table_cdn')
    @include('utility.enToBnNum')
    <style lang="">
        /* Light theme only */
        .toggle-checkbox:checked {
            @apply: right-0 border-green-400;
            right: 0;
            border-color: #68D391;
        }

        .toggle-checkbox:checked+.toggle-label {
            @apply: bg-green-400;
            background-color: #68D391;
        }

        /* Toggle switch styling */
        .toggle-label {
            background-color: #d1d5db;
            transition: background-color 0.3s ease;
        }

        /* Container styling */
        .profile-container {
            background-color: #ffffff;
            color: #111827;
        }

        .profile-header {
            color: #111827;
        }

        .profile-subheader {
            color: #4b5563;
        }

        /* Photo and signature upload blocks */
        .photo_upload_block,
        .signature_upload_block {
            background-color: #f9fafb;
            border-color: #d1d5db;
        }

        .photo_area,
        .signature_area {
            background-color: #f9fafb;
        }

        /* Input and select styling */
        .form-input-light {
            background-color: #f3f4f6;
            border-color: #d1d5db;
            color: #111827;
            transition: all 0.3s ease;
        }

        .form-input-light:focus {
            background-color: #ffffff;
            border-color: #3b82f6;
        }

        .form-input-light::placeholder {
            color: #4b5563;
        }

        /* Alert styling */
        .print-error-msg {
            background-color: #fee2e2;
            border-color: #fecaca;
            color: #991b1b;
        }
    </style>
    <div class="all_applications_block">

        <div class="container profile-container rounded_area mb-3">
            <div class="block mb-3">
                <h4 class="profile-header block text-[14px] font-bold">Profile</h4>
                <p class="profile-subheader block">This information will be displayed publicly so be careful what you share.
                </p>
            </div>
            <form class="row" id="user_info_update_form" method="POST" action="{{ route('user.store') }} "
                enctype="multipart/form-data">
                @csrf
                <div class="alert alert-danger print-error-msg" style="display:none">

                    <ul></ul>

                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div>
                        <label class="block text-sm font-medium profile-header">Profile Picture</label>
                        <div class="mt-1 flex items-center h-[225px]">
                            <div class="photo_upload_block rounded-lg border-2 border-dashed p-4">
                                <div class="flex items-center justify-center photo_area rounded-lg">
                                    <img @if (!is_null($employee->picture)) src="{{ env('SERVICE_MAIN_DOMAIN') }}/img/{{ $employee->picture }}" @endif
                                        alt="Profile Picture" />
                                </div>
                                <div
                                    class="flex items-center justify-center bg-green-600 text-white rounded-xl mt-3 gap-1 py-1 text-[11px] cursor-pointer change_photo_btn hover:bg-green-700 transition">
                                    <i class="fa fa-repeat"></i>
                                    <span>Change Photo</span>
                                </div>
                                <input type="file" class="hidden" id="attachement_p_pic" name="attachement_p_pic"
                                    accept="image/jpg,image/jpeg,image/png">
                                <div class="my-2" align="center">
                                    <p class="profile-subheader text-sm">JPG, JPEG, PNG up to 2 MB</p>
                                </div>
                            </div>


                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium profile-header">Signature</label>
                        <div
                            class="mt-1 flex justify-center rounded-md border-2 border-dashed border-gray-300 px-5 pt-4 pb-5 bg-gray-50">
                            <div class="space-y-1 text-center">
                                <div class="flex items-center justify-center gap-2 signature_upload_block">
                                    <div class="flex items-center justify-center signature_area">
                                        <img id="sig_preview"
                                            @if (!is_null($employee->signature)) src="{{ env('SERVICE_MAIN_DOMAIN') }}/img/{{ $employee->signature }}" @endif>
                                    </div>
                                </div>
                                <div
                                    class="flex items-center justify-center bg-green-600 text-white rounded-xl mt-3 gap-1 py-1 text-[11px] cursor-pointer change_signature_btn hover:bg-green-700 transition">
                                    <i class="fa fa-repeat"></i>
                                    <span>Change Signature</span>
                                </div>
                                <input type="file" id="attachement_signature" class="hidden" name="attachement_signature"
                                    accept="image/jpg,image/jpeg,image/png">
                                <div class="my-2" align="center">
                                    <p class="profile-subheader text-sm">JPG, JPEG, PNG up to 2 MB</p>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div>
                        <label for="employee_name" class="block mb-2 text-sm font-medium profile-header">Name
                            of Employee <span class="custom-error text-rose-600">*</span></label>
                        <input type="text" id="employee_name" name="employee_name"
                            class="form-input-light bg-gray-100 border border-gray-300 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 cursor-not-allowed"
                            placeholder="i.e John Doe"
                            value="{{ $employee->first_name }} {{ $employee->middle_name }} {{ $employee->last_name }} {{ $employee->surfix }}"
                            disabled required>
                    </div>
                    <div>
                        <label for="employee_id" class="block mb-2 text-sm font-medium profile-header">Employee ID <span
                                class="custom-error text-rose-600">*</span></label>
                        <input type="text" id="employee_id" name="employee_id"
                            class="form-input-light bg-gray-100 border border-gray-300 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 cursor-not-allowed"
                            placeholder="i.e 1234" value="{{ $employee->id }}" disabled required>
                    </div>
                    <div>
                        <label for="gender_id" class="block mb-2 text-sm font-medium profile-header">Sex</label>
                        <select id="gender_id" name="gender_id"
                            class="form-input-light bg-gray-50 border border-gray-300 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
                            required>
                            <option>Select Gender</option>
                            @foreach ($drop_down_info->genders as $genderInfo)
                                <option @if ($employee->gender_id == $genderInfo->id) selected @endif value="{{ $genderInfo->id }}">
                                    {{ $genderInfo->gender_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label for="father_name" class="block mb-2 text-sm font-medium profile-header">Father's Name</label>
                        <input type="text" id="father_name" name="father_name"
                            class="form-input-light bg-gray-50 border border-gray-300 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
                            value="{{ $employee->father_name }}">
                    </div>
                    <div>
                        <label for="mother_name" class="block mb-2 text-sm font-medium profile-header">Mother's Name</label>
                        <input type="text" id="mother_name" name="mother_name"
                            class="form-input-light bg-gray-50 border border-gray-300 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
                            placeholder="i.e Kate William" value="{{ $employee->mother_name }}">
                    </div>
                    <div>
                        <label for="government_issued_id_type"
                            class="block mb-2 text-sm font-medium profile-header">Government Issued ID Type
                            <span class="custom-error text-rose-600">*</span></label>
                        <input type="text" id="government_issued_id_type" name="government_issued_id_type"
                            class="form-input-light bg-gray-100 border border-gray-300 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 cursor-not-allowed"
                            value="{{ $govt_issued_type }}" disabled>
                    </div>
                    <div>
                        <label for="government_issued_id" class="block mb-2 text-sm font-medium profile-header">Government
                            Issued ID <span class="custom-error text-rose-600">*</span></label>
                        <input type="text" id="government_issued_id" name="government_issued_id"
                            class="form-input-light bg-gray-100 border border-gray-300 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 cursor-not-allowed"
                            placeholder="i.e 1234567890123" value="{{ $govt_issued_id }}" disabled>
                    </div>
                    <div>
                        <label for="date_of_birth" class="block mb-2 text-sm font-medium profile-header">Date
                            of Birth</label>
                        <input type="date" id="date_of_birth" name="government_issued_id"
                            class="form-input-light bg-gray-100 border border-gray-300 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 cursor-not-allowed"
                            placeholder="i.e 01-01-2022" value="{{ $employee->dob }}" disabled>
                    </div>
                    <div>
                        <label for="user_email" class="block mb-2 text-sm font-medium profile-header">Email
                            <span class="custom-error text-rose-600">*</span></label>
                        <input type="email" id="user_email" name="user_email"
                            class="form-input-light bg-gray-50 border border-gray-300 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
                            placeholder="i.e example@test.com" value="{{ $employee->email }}" required readonly>
                    </div>
                    <div>
                        <label for="user_mobile_number" class="block mb-2 text-sm font-medium profile-header">Mobile <span
                                class="custom-error text-rose-600">*</span></label>
                        <input type="text" id="user_mobile_number" name="user_mobile_number"
                            class="form-input-light bg-gray-50 border border-gray-300 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
                            placeholder="i.e +63-2-1234-5678" value="{{ $employee->mobile }}" required>
                    </div>
                    <div>
                        <label for="religion_id" class="block mb-2 text-sm font-medium profile-header">Religion <span
                                class="custom-error text-rose-600">*</span></label>
                        <select id="religion_id" name="religion_id"
                            class="form-input-light bg-gray-50 border border-gray-300 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                            <option>Select Religion</option>
                            @foreach ($drop_down_info->religions as $religionInfo)
                                <option @if ($employee->religion_id == $religionInfo->id) selected @endif value="{{ $religionInfo->id }}">
                                    {{ $religionInfo->name }} </option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label for="marital_status_id" class="block mb-2 text-sm font-medium profile-header">Marital
                            Status</label>
                        <select id="marital_status_id" name="marital_status_id"
                            class="form-input-light bg-gray-50 border border-gray-300 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                            <option>Select Marital Status</option>
                            @foreach ($drop_down_info->marital_statuses as $maritalInfo)
                                <option @if ($employee->marital_status_id == $maritalInfo->id) selected @endif value="{{ $maritalInfo->id }}">
                                    {{ $maritalInfo->marital_statuse_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label for="date_of_joining" class="block mb-2 text-sm font-medium profile-header">Date of Joining
                            <span class="custom-error text-rose-600">*</span></label>
                        <input type="date" id="date_of_joining" name="date_of_joining"
                            class="form-input-light bg-gray-100 border border-gray-300 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 cursor-not-allowed"
                            placeholder="i.e 01-01-2022" value="{{ $employee->date_of_joining }}" disabled>
                    </div>
                    <div>
                        <label for="date_of_retirement" class="block mb-2 text-sm font-medium profile-header">Date of
                            Retirement
                        </label>
                        <input type="date" id="date_of_retirement" name="date_of_retirement"
                            class="form-input-light bg-gray-100 border border-gray-300 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 cursor-not-allowed"
                            placeholder="i.e 01-01-2022" value="{{ $employee->date_of_retirement }}" disabled>
                    </div>
                    <div>
                        <label for="pre_address" class="block mb-2 text-sm font-medium profile-header">Present Address
                            <span class="custom-error text-rose-600">*</span></label>
                        <textarea id="pre_address" name="pre_address" rows="4"
                            class="form-input-light block p-2.5 w-full text-sm bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500"
                            placeholder="i.e Huwit-Huwit, Omar">{{ $employee->pre_address }}</textarea>
                    </div>
                    <div>
                        <label for="per_address" class="block mb-2 text-sm font-medium profile-header">Permanent Address
                            <span class="custom-error text-rose-600">*</span></label>
                        <textarea id="per_address" name="per_address" rows="4"
                            class="form-input-light block p-2.5 w-full text-sm bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500"
                            placeholder="i.e Huwit-Huwit, Omar">{{ $employee->per_address }}</textarea>
                    </div>
                    <div class="flex">
                        <label class="form-check-label inline-block  text-sm font-medium profile-header"
                            for="email_notification">Email Notification <span
                                class="custom-error text-rose-600">*</span></label>
                        <div
                            class="relative inline-block w-10 ml-10 mr-2 align-middle select-none transition duration-200 ease-in">
                            <input type="checkbox" name="email_notification" id="email_notification"
                                class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"
                                value="1"  />
                            <label for="email_notification"
                                class="toggle-label block overflow-hidden h-6 rounded-full cursor-pointer"></label>
                        </div>
                    </div>
                    <div class="flex">
                        <label class="form-check-label inline-block  text-sm font-medium profile-header"
                            for="sms_notification">SMS Notification <span
                                class="custom-error text-rose-600">*</span></label>
                        <div
                            class="relative inline-block w-10 ml-10 mr-2 align-middle select-none transition duration-200 ease-in">
                            <input type="checkbox" name="sms_notification" id="sms_notification"
                                class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"
                                value="1"  />
                            <label for="sms_notification"
                                class="toggle-label block overflow-hidden h-6 rounded-full cursor-pointer"></label>
                        </div>
                    </div>

                </div>
                <div class="flex flex-row-reverse">
                    <button type="submit" id="profile_update_btn"
                        class="text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2 focus:outline-none transition mt-3">
                        {{ __('Profile_Update') }}
                    </button>
                </div>
            </form>
        </div>

        <div class="hidden">
            <div id="editor-container1" class="hidden"></div>
        </div>

    </div>

    @include('user.index_script')
@endsection