@extends('layouts.app')

@push('style')
    <style>
        /* Optional: reuse your brand menu gradient from above if you want here, too */

        /* Form shell */
        .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;
        }

        /* Field grid inside each card */
        .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="row tablerow">
                <div class="left-card">
                    <form method="POST" action="{{ route('employee.store') }}" id="ajax_form_employee"
                        enctype="multipart/form-data">
                        @csrf

                        @if (usertype() != 'admin')
                            <input type="hidden" id="company_branch_id" name="company_branch_id" value="{{ branch_id() }}">
                        @endif

                        {{-- Global status / 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', generateEmployeeId()) }}">
                                        @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') }}">
                                        @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') == $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') == $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') }}">
                                        @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->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"
                                            placeholder="+1 415 555 0123" value="{{ old('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') }}">
                                        @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') }}">
                                        @error('joining_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') }}</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') }}">
                                        @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
                                    </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') }}">
                                        @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
                                    </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') }}">
                                        @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') === 'Islam')>Islam</option>
                                            <option value="Hindu" @selected(old('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') === 'Male')>Male</option>
                                            <option value="Female" @selected(old('gender') === 'Female')>Female</option>
                                            <option value="Third Gender" @selected(old('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>
                                            <option value="A+" @selected(old('blood_group') === 'A+')>A+</option>
                                            <option value="A−" @selected(old('blood_group') === 'A−')>A−</option>
                                            <option value="B+" @selected(old('blood_group') === 'B+')>B+</option>
                                            <option value="B−" @selected(old('blood_group') === 'B−')>B−</option>
                                            <option value="AB+" @selected(old('blood_group') === 'AB+')>AB+</option>
                                            <option value="AB−" @selected(old('blood_group') === 'AB−')>AB−</option>
                                            <option value="O+" @selected(old('blood_group') === 'O+')>O+</option>
                                            <option value="O−" @selected(old('blood_group') === 'O−')>O−</option>
                                        </select>
                                        @error('blood_group')
                                            <small class="error-text">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="field" style="grid-column: 1 / -1;">
                                        <label class="required" for="profile_image">Profile Image</label>
                                        <div style="display:flex; align-items:center; gap:12px;">
                                            <img id="profile_preview" class="avatar-preview"
                                                src="data:image/gif;base64,R0lGODlhAQABAAAAACw=" 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 class="field">
                                        <label class="required" for="status">Employee Status</label>
                                        <select id="status" name="status"
                                            class="form-select @error('status') is-invalid @enderror">
                                            <option value="Active" @selected(old('status') === 'Active')>Active</option>
                                            <option value="Inactive" @selected(old('status') === 'Inactive')>Inactive</option>
                                        </select>
                                        @error('status')
                                            <small class="error-text">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    @if (usertype() == 'admin')
                                        <div class="field">
                                            <label for="company_branch_id">Branch</label>
                                            {{-- NOTE: your original used name="outlet_id". Keep it if your controller expects it.
                         Prefer consistent naming like name="company_branch_id". --}}
                                            <select id="company_branch_id" name="outlet_id"
                                                class="form-select @error('outlet_id') is-invalid @enderror">
                                                <option value="">Select</option>
                                                @foreach (branches() as $company_branch)
                                                    <option value="{{ $company_branch->id }}"
                                                        @selected(old('outlet_id') == $company_branch->id)>
                                                        {{ $company_branch->branch_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('outlet_id')
                                                <small class="error-text">{{ $message }}</small>
                                            @enderror
                                        </div>
                                    @endif
                                </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>
    </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