@extends('layouts.app')

@push('style')
    <style>
        /* Shell & layout */
        .form-wrap {
            display: grid;
            gap: 24px;
        }

        .form-grid {
            display: grid;
            gap: 24px;
            grid-template-columns: 1fr;
        }

        @media (min-width: 992px) {
            .form-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        .form-card {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
            padding: 20px;
        }

        .section-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1.05rem;
            font-weight: 700;
            margin: 0 0 14px;
        }

        .section-title .badge {
            background: linear-gradient(135deg, #2c2594 0%, #362aab 50%, #4a3bd6 100%);
            color: #fff;
            border-radius: 999px;
            padding: 6px 10px;
            font-size: .8rem;
        }

        /* Fields */
        .fields {
            display: grid;
            gap: 14px;
            grid-template-columns: 1fr;
        }

        .fields.two-cols {
            grid-template-columns: 1fr;
        }

        @media (min-width: 576px) {
            .fields.two-cols {
                grid-template-columns: 1fr 1fr;
            }
        }

        .field {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .field label {
            font-weight: 600;
            font-size: .95rem;
        }

        .required::after {
            content: " *";
            color: #e11d48;
        }

        .form-control,
        .form-select {
            border: 1px solid #d1d5db;
            border-radius: 8px;
            padding: 10px 12px;
            width: 100%;
            transition: border-color .2s, box-shadow .2s;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: #362aab;
            outline: 0;
            box-shadow: 0 0 0 3px rgba(54, 42, 171, .15);
        }

        textarea.form-control {
            min-height: 90px;
            resize: vertical;
        }

        .error-text {
            color: #b91c1c;
            font-size: .85rem;
        }

        .is-invalid {
            border-color: #ef4444 !important;
            box-shadow: 0 0 0 3px rgba(239, 68, 68, .15);
        }

        /* Actions */
        .form-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }

        .btn {
            border-radius: 8px;
            padding: 10px 16px;
            font-weight: 600;
        }

        .btn.primary-button {
            background: #362aab;
            color: #fff;
            border: none;
        }

        .btn.primary-button:hover {
            filter: brightness(1.05);
        }

        .btn-secondary {
            background: #f3f4f6;
            color: #111827;
            border: 1px solid #e5e7eb;
        }

        .btn-secondary:hover {
            background: #e5e7eb;
        }

        /* Image preview */
        .avatar-preview {
            width: 72px;
            height: 72px;
            border-radius: 8px;
            object-fit: cover;
            border: 1px solid #e5e7eb;
        }
    </style>
@endpush

@section('content')
    <div class="page-wrapper">
        <div class="page-content">
            <div class="left-card">
                <form method="POST" action="{{ route('employee.update', $item->id) }}" id="ajax_form_data"
                    enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    {{-- Validation summary --}}
                    @if ($errors->any())
                        <div class="alert alert-danger" style="margin-bottom:14px;">
                            <ul style="margin:0; padding-left:18px;">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <div class="form-wrap form-grid">
                        {{-- Official Information --}}
                        <div class="form-card">
                            <div class="section-title">
                                <span class="badge">Official Information</span>
                            </div>

                            <div class="fields two-cols">
                                <div class="field">
                                    <label class="required" for="employee_id">Employee ID</label>
                                    <input id="employee_id" type="text" name="employee_id"
                                        class="form-control @error('employee_id') is-invalid @enderror"
                                        value="{{ old('employee_id', $item->employee_id) }}">
                                    @error('employee_id')
                                        <small class="error-text">{{ $message }}</small>
                                    @enderror
                                </div>

                                <div class="field">
                                    <label class="required" for="name">Employee Name</label>
                                    <input id="name" type="text" name="name"
                                        class="form-control @error('name') is-invalid @enderror"
                                        value="{{ old('name', $item->name) }}">
                                    @error('name')
                                        <small class="error-text">{{ $message }}</small>
                                    @enderror
                                </div>

                                <div class="field">
                                    <label class="required" for="department_id">Department</label>
                                    <select id="department_id" name="department_id"
                                        class="form-select @error('department_id') is-invalid @enderror">
                                        <option value="">Select</option>
                                        @foreach ($departments as $department)
                                            <option value="{{ $department->id }}" @selected(old('department_id', $item->department_id) == $department->id)>
                                                {{ $department->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('department_id')
                                        <small class="error-text">{{ $message }}</small>
                                    @enderror
                                </div>

                                <div class="field">
                                    <label class="required" for="designation_id">Designation</label>
                                    <select id="designation_id" name="designation_id"
                                        class="form-select @error('designation_id') is-invalid @enderror">
                                        <option value="">Select</option>
                                        @foreach ($designations as $designation)
                                            <option value="{{ $designation->id }}" @selected(old('designation_id', $item->designation_id) == $designation->id)>
                                                {{ $designation->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('designation_id')
                                        <small class="error-text">{{ $message }}</small>
                                    @enderror
                                </div>

                                <div class="field">
                                    <label class="required" for="gross_salary">Gross Salary</label>
                                    <input id="gross_salary" type="number" name="gross_salary" step="0.01"
                                        min="0" class="form-control @error('gross_salary') is-invalid @enderror"
                                        value="{{ old('gross_salary', $item->gross_salary) }}">
                                    @error('gross_salary')
                                        <small class="error-text">{{ $message }}</small>
                                    @enderror
                                </div>

                                <div class="field">
                                    <label class="required" for="gross_salary">Pay Grades</label>
                                    <select name="salary_type_id" class="form-control">
                                        <option value="">Select</option>
                                        @foreach ($paygrades as $paygrade)
                                            <option value="{{ $paygrade->id }}"
                                                {{ $paygrade->id == $item->salary_type_id ? 'selected' : '' }}>
                                                {{ $paygrade->name }}</option>
                                        @endforeach
                                    </select>
                                    @error('salary_type_id')
                                        <small class="error-text">{{ $message }}</small>
                                    @enderror
                                </div>


                                <div class="field">
                                    <label class="required" for="mobile">Mobile Number</label>
                                    <input id="mobile" type="tel" name="mobile"
                                        class="form-control @error('mobile') is-invalid @enderror"
                                        value="{{ old('mobile', $item->mobile) }}">
                                    @error('mobile')
                                        <small class="error-text">{{ $message }}</small>
                                    @enderror
                                </div>

                                <div class="field">
                                    <label for="email">Email</label>
                                    <input id="email" type="email" name="email"
                                        class="form-control @error('email') is-invalid @enderror"
                                        value="{{ old('email', $item->email) }}">
                                    @error('email')
                                        <small class="error-text">{{ $message }}</small>
                                    @enderror
                                </div>

                                <div class="field">
                                    <label class="required" for="joining_date">Joining Date</label>
                                    <input id="joining_date" type="date" name="joining_date"
                                        class="form-control @error('joining_date') is-invalid @enderror"
                                        value="{{ old('joining_date', $item->joining_date) }}">
                                    @error('joining_date')
                                        <small class="error-text">{{ $message }}</small>
                                    @enderror
                                </div>

                                <div class="field">
                                    <label for="last_working_date">Last Working Date</label>
                                    <input id="last_working_date" type="date" name="last_working_date"
                                        class="form-control @error('last_working_date') is-invalid @enderror"
                                        value="{{ old('last_working_date', $item->last_working_date) }}">
                                    @error('last_working_date')
                                        <small class="error-text">{{ $message }}</small>
                                    @enderror
                                </div>

                                <div class="field" style="grid-column: 1/-1;">
                                    <label class="required" for="present_address">Present Address</label>
                                    <textarea id="present_address" name="present_address"
                                        class="form-control @error('present_address') is-invalid @enderror" rows="3">{{ old('present_address', $item->present_address) }}</textarea>
                                    @error('present_address')
                                        <small class="error-text">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        {{-- Additional Information --}}
                        <div class="form-card">
                            <div class="section-title">
                                <span class="badge">Additional Information</span>
                            </div>

                            <div class="fields two-cols">
                                <div class="field">
                                    <label class="required" for="nid_no">NID</label>
                                    <input id="nid_no" type="text" name="nid_no"
                                        class="form-control @error('nid_no') is-invalid @enderror"
                                        value="{{ old('nid_no', $item->nid_no) }}">
                                    @error('nid_no')
                                        <small class="error-text">{{ $message }}</small>
                                    @enderror
                                </div>

                                <div class="field">
                                    <label for="nid">Upload NID</label>
                                    <input id="nid" type="file" name="nid"
                                        class="form-control @error('nid') is-invalid @enderror"
                                        accept="image/*,application/pdf">
                                    @error('nid')
                                        <small class="error-text">{{ $message }}</small>
                                    @enderror
                                    @if (!empty($item->nid))
                                        <small><a href="{{ \Illuminate\Support\Facades\Storage::url($item->nid) }}"
                                                target="_blank">View current NID</a></small>
                                    @endif
                                </div>

                                <div class="field">
                                    <label for="passport_no">Passport Number</label>
                                    <input id="passport_no" type="text" name="passport_no"
                                        class="form-control @error('passport_no') is-invalid @enderror"
                                        value="{{ old('passport_no', $item->passport_no) }}">
                                    @error('passport_no')
                                        <small class="error-text">{{ $message }}</small>
                                    @enderror
                                </div>

                                <div class="field">
                                    <label for="passport">Upload Passport</label>
                                    <input id="passport" type="file" name="passport"
                                        class="form-control @error('passport') is-invalid @enderror"
                                        accept="image/*,application/pdf">
                                    @error('passport')
                                        <small class="error-text">{{ $message }}</small>
                                    @enderror
                                    @if (!empty($item->passport))
                                        <small><a href="{{ \Illuminate\Support\Facades\Storage::url($item->passport) }}"
                                                target="_blank">View current Passport</a></small>
                                    @endif
                                </div>

                                <div class="field">
                                    <label class="required" for="dob">Date of Birth</label>
                                    <input id="dob" type="date" name="dob"
                                        class="form-control @error('dob') is-invalid @enderror"
                                        value="{{ old('dob', $item->dob) }}">
                                    @error('dob')
                                        <small class="error-text">{{ $message }}</small>
                                    @enderror
                                </div>

                                <div class="field">
                                    <label for="religion">Religion</label>
                                    <select id="religion" name="religion"
                                        class="form-select @error('religion') is-invalid @enderror">
                                        <option value="Islam" @selected(old('religion', $item->religion) === 'Islam')>Islam</option>
                                        <option value="Hindu" @selected(old('religion', $item->religion) === 'Hindu')>Hindu</option>
                                    </select>
                                    @error('religion')
                                        <small class="error-text">{{ $message }}</small>
                                    @enderror
                                </div>

                                <div class="field">
                                    <label class="required" for="gender">Gender</label>
                                    <select id="gender" name="gender"
                                        class="form-select @error('gender') is-invalid @enderror">
                                        <option value="Male" @selected(old('gender', $item->gender) === 'Male')>Male</option>
                                        <option value="Female" @selected(old('gender', $item->gender) === 'Female')>Female</option>
                                        <option value="Third Gender" @selected(old('gender', $item->gender) === 'Third Gender')>Third Gender</option>
                                    </select>
                                    @error('gender')
                                        <small class="error-text">{{ $message }}</small>
                                    @enderror
                                </div>

                                <div class="field">
                                    <label class="required" for="blood_group">Blood Group</label>
                                    <select id="blood_group" name="blood_group"
                                        class="form-select @error('blood_group') is-invalid @enderror">
                                        <option value="">Select</option>
                                        @foreach (['A+', 'A−', 'B+', 'B−', 'AB+', 'AB−', 'O+', 'O−'] as $bg)
                                            <option value="{{ $bg }}" @selected(old('blood_group', $item->blood_group) === $bg)>
                                                {{ $bg }}</option>
                                        @endforeach
                                    </select>
                                    @error('blood_group')
                                        <small class="error-text">{{ $message }}</small>
                                    @enderror
                                </div>

                                <div class="field" style="grid-column: 1 / -1;">
                                    <label for="profile_image">Profile Image</label>
                                    @php
                                        $profileUrl = !empty($item->profile_image)
                                            ? \Illuminate\Support\Facades\Storage::url($item->profile_image)
                                            : 'data:image/gif;base64,R0lGODlhAQABAAAAACw=';
                                    @endphp
                                    <div style="display:flex; align-items:center; gap:12px;">
                                        <img id="profile_preview" class="avatar-preview" src="{{ $profileUrl }}"
                                            alt="Preview">
                                        <input id="profile_image" type="file" name="profile_image"
                                            class="form-control @error('profile_image') is-invalid @enderror"
                                            accept="image/*">
                                    </div>
                                    @error('profile_image')
                                        <small class="error-text">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>

                            <div id="uploadProgress" class="progress d-none mt-3" style="height:10px;">
                                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
                                    style="width:0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                                    0%
                                </div>
                            </div>


                        </div>
                    </div>

                    <div class="row mt-4 mb-4">
                        <div class="col-12 form-actions">
                            <button type="submit" id="submitBtn" class="btn primary-button">
                                <span class="btn-text">Submit</span>
                                <span class="spinner-border spinner-border-sm align-middle ms-2 d-none" role="status"
                                    aria-hidden="true"></span>
                            </button>
                        </div>
                    </div>


                </form>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        // Simple profile image preview (unchanged)
        (function() {
            const input = document.getElementById('profile_image');
            const preview = document.getElementById('profile_preview');
            if (input && preview) {
                input.addEventListener('change', (e) => {
                    const file = e.target.files && e.target.files[0];
                    if (!file) return;
                    const reader = new FileReader();
                    reader.onload = (ev) => {
                        preview.src = ev.target.result;
                    };
                    reader.readAsDataURL(file);
                });
            }
        })();

        $(document).on("submit", "form#ajax_form_employee", function(e) {
            e.preventDefault();

            const $form = $(this);
            const url = $form.attr("action");
            const method = $form.attr("method") || "POST";

            // Button state
            const $btn = $("#submitBtn");
            const $btnText = $btn.find(".btn-text");
            const $btnSpin = $btn.find(".spinner-border");
            const originalText = $btnText.text();

            function setSubmittingState(on) {
                if (on) {
                    $btn.prop("disabled", true).addClass("disabled");
                    $btnText.text("Submitting…");
                    $btnSpin.removeClass("d-none");
                } else {
                    $btn.prop("disabled", false).removeClass("disabled");
                    $btnText.text(originalText);
                    $btnSpin.addClass("d-none");
                }
            }

            // Progress bar elements
            const $barWrap = $("#uploadProgress");
            const $bar = $barWrap.find(".progress-bar");

            function resetProgress() {
                $bar.css("width", "0%").attr("aria-valuenow", 0).text("0%");
                $bar.addClass("progress-bar-animated"); // make sure animation is back for next time
                $barWrap.addClass("d-none");
            }

            // Detect if any file is selected
            const hasFile = $form.find('input[type="file"]').toArray()
                .some(inp => inp.files && inp.files.length > 0);

            const formData = new FormData($form[0]);

            setSubmittingState(true);
            $("#loading-indicator").show(); // keep your existing overlay if you have it

            $.ajax({
                type: method,
                url: url,
                data: formData,
                processData: false,
                contentType: false,

                // Only attach progress tracking when uploading files
                xhr: function() {
                    const xhr = new window.XMLHttpRequest();
                    if (hasFile && xhr.upload) {
                        $barWrap.removeClass("d-none");
                        xhr.upload.addEventListener("progress", function(evt) {
                            if (evt.lengthComputable) {
                                const percent = Math.round((evt.loaded / evt.total) * 100);
                                $bar.css("width", percent + "%")
                                    .attr("aria-valuenow", percent)
                                    .text(percent + "%");
                            }
                        }, false);

                        // When upload is done but server still processing
                        xhr.upload.addEventListener("load", function() {
                            $bar.css("width", "100%").attr("aria-valuenow", 100);
                            // Show 'Processing…' after upload completes
                            $bar.removeClass("progress-bar-animated").text("Processing…");
                        }, false);
                    }
                    return xhr;
                },

                success: function(res) {
                    if (res.status === true) {
                        toastr.success(res.msg || 'Saved');
                        if (res.url) {
                            window.location.href = res.url;
                        } else {
                            window.location.reload();
                        }
                    } else if (res.status === false) {
                        toastr.error(res.msg || 'Failed to save');
                    } else if (res.errors) {
                        // Optional: server-side validation in another shape
                        $.each(res.errors, function(field, msgs) {
                            [].concat(msgs).forEach(msg => toastr.error(msg));
                        });
                    }
                },
                error: function(xhr) {
                    const json = xhr.responseJSON || {};
                    if (json.errors) {
                        // Clear previous inline errors
                        $form.find("span.textdanger, span.field-error").remove();
                        $.each(json.errors, function(field_name, error) {
                            const $field = $form.find("[name='" + field_name + "']");
                            $field.after('<span class="field-error" style="color:red">' +
                                error + '</span>');
                            toastr.error(error);
                        });
                    } else {
                        toastr.error(json.message || "Something went wrong.");
                    }
                },
                complete: function() {
                    setSubmittingState(false);
                    $("#loading-indicator").hide();
                    setTimeout(resetProgress, 400);
                }
            });
        });
    </script>
@endpush