@extends('admin.layouts.master')

@section('title', 'Edit Student')

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    {{-- Copy your CSS from create.blade.php here --}}
    <style>
        /* Include your previous CSS styles here */
        :root {
            --primary: #4f46e5;
            --border-color: #e2e8f0;
            --bg-light: #f8fafc;
        }

        .form-card {
            background: #fff;
            border: 1px solid var(--border-color);
            border-radius: 16px;
            overflow: hidden;
        }

        .form-header {
            background: var(--bg-light);
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--border-color);
        }

        .form-label {
            font-weight: 500;
            color: #334155;
            font-size: 0.9rem;
            margin-bottom: 0.4rem;
        }

        .form-control,
        .form-select {
            border-radius: 8px;
            border-color: #cbd5e1;
            padding: 0.6rem 0.85rem;
        }

        .avatar-upload-box {
            width: 100px;
            height: 100px;
            border: 2px dashed #cbd5e1;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            background: #f8fafc;
            overflow: hidden;
            position: relative;
        }

        .avatar-preview {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: none;
        }

        .text-error {
            color: #dc3545;
            font-size: 0.875em;
            margin-top: 0.25rem;
            display: none;
        }

        .shake-effect {
            animation: shake 0.4s ease-in-out;
        }

        @keyframes shake {

            0%,
            100% {
                transform: translateX(0);
            }

            10%,
            30%,
            50%,
            70%,
            90% {
                transform: translateX(-5px);
            }

            20%,
            40%,
            60%,
            80% {
                transform: translateX(5px);
            }
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid py-4">

        {{-- Header --}}
        <div class="d-flex align-items-center justify-content-between mb-4">
            <div>
                <h2 class="fw-bold text-dark m-0">Edit Student</h2>
                <p class="text-muted small m-0">Update student profile information.</p>
            </div>
            <a href="{{ route('admin.students') }}" class="btn btn-light border">
                <i class="ri-arrow-left-line"></i> Back to List
            </a>
        </div>

        <form id="editStudentForm" enctype="multipart/form-data">
            @csrf
            {{-- Note: We use POST with AJAX, but logically this is an update --}}

            <div class="row g-4">
                {{-- Left Column --}}
                <div class="col-lg-8">
                    <div class="form-card mb-4">
                        <div class="form-header">
                            <h6 class="m-0 fw-bold text-dark"><i class="ri-id-card-line me-1 text-primary"></i> Personal &
                                Login Information</h6>
                        </div>
                        <div class="p-4">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label required">Full Name <span class="text-danger">*</span></label>
                                    <input type="text" name="name" id="name" class="form-control"
                                        value="{{ $student->name }}">
                                    <div class="invalid-feedback" id="error-name"></div>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label required">Email Address <span
                                            class="text-danger">*</span></label>
                                    <input type="email" name="email" id="email" class="form-control"
                                        value="{{ $student->email }}">
                                    <div class="invalid-feedback" id="error-email"></div>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label required">Phone Number <span
                                            class="text-danger">*</span></label>
                                    <input type="text" name="phone" id="phone" class="form-control"
                                        value="{{ $student->phone }}">
                                    <div class="invalid-feedback" id="error-phone"></div>
                                </div>

                                <div class="col-md-6"></div>

                                <div class="col-12 mt-4">
                                    <h6 class="text-uppercase text-muted fs-11 fw-bold border-bottom pb-2 mb-3">Demographics
                                    </h6>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Date of Birth</label>
                                    <input type="date" name="dob" class="form-control"
                                        value="{{ $student->dob ? $student->dob->format('Y-m-d') : '' }}">
                                    <div class="invalid-feedback" id="error-dob"></div>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Gender</label>
                                    <select name="gender" class="form-select">
                                        <option value="">Select Gender</option>
                                        <option value="male" {{ $student->gender == 'male' ? 'selected' : '' }}>Male
                                        </option>
                                        <option value="female" {{ $student->gender == 'female' ? 'selected' : '' }}>Female
                                        </option>
                                        <option value="other" {{ $student->gender == 'other' ? 'selected' : '' }}>Other
                                        </option>
                                    </select>
                                    <div class="invalid-feedback" id="error-gender"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Address --}}
                    <div class="form-card">
                        <div class="form-header">
                            <h6 class="m-0 fw-bold text-dark"><i class="ri-map-pin-line me-1 text-primary"></i> Address
                                Details</h6>
                        </div>
                        <div class="p-4">
                            <div class="row g-3">
                                <div class="col-12">
                                    <label class="form-label">Street Address</label>
                                    <textarea name="address" rows="2" class="form-control">{{ $student->address }}</textarea>
                                </div>
                                <div class="col-md-6"><label class="form-label">City</label><input type="text"
                                        name="city" class="form-control" value="{{ $student->city }}"></div>
                                <div class="col-md-6"><label class="form-label">State</label><input type="text"
                                        name="state" class="form-control" value="{{ $student->state }}"></div>
                                <div class="col-md-6"><label class="form-label">Country</label><input type="text"
                                        name="country" class="form-control" value="{{ $student->country }}"></div>
                                <div class="col-md-6"><label class="form-label">Zip Code</label><input type="text"
                                        name="zip_code" class="form-control" value="{{ $student->zip_code }}"></div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Right Column --}}
                <div class="col-lg-4">
                    {{-- Avatar --}}
                    <div class="form-card mb-4">
                        <div class="p-4 text-center">
                            <label class="form-label d-block mb-3">Profile Photo</label>
                            <div class="d-flex justify-content-center">
                                <label for="avatarInput" class="avatar-upload-box">
                                    {{-- Logic to show existing avatar or placeholder --}}
                                    <img id="avatarPreview"
                                        src="{{ $student->avatar ? asset('storage/' . $student->avatar) : '#' }}"
                                        class="avatar-preview"
                                        style="{{ $student->avatar ? 'display:block;' : 'display:none;' }}">

                                    <div id="avatarPlaceholder" class="text-muted"
                                        style="{{ $student->avatar ? 'display:none;' : 'display:block;' }}">
                                        <i class="ri-camera-line fs-24"></i>
                                        <div class="small mt-1" style="font-size: 10px;">Change</div>
                                    </div>
                                </label>
                                <input type="file" id="avatarInput" name="avatar" class="d-none" accept="image/*"
                                    onchange="previewImage(this)">
                            </div>
                            <div class="text-error text-center" id="error-avatar"></div>
                        </div>
                    </div>

                    {{-- IDs --}}
                    <div class="form-card mb-4">
                        <div class="form-header bg-primary bg-opacity-10">
                            <h6 class="m-0 fw-bold text-primary"><i class="ri-anchor-line me-1"></i> Maritime IDs</h6>
                        </div>
                        <div class="p-4">
                            <div class="mb-3">
                                <label class="form-label">INDOS Number</label>
                                <input type="text" name="indos_no" id="indos_no" class="form-control"
                                    value="{{ $student->indos_no }}">
                                <div class="invalid-feedback" id="error-indos_no"></div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">CDC Number</label>
                                <input type="text" name="cdc_no" id="cdc_no" class="form-control"
                                    value="{{ $student->cdc_no }}">
                                <div class="invalid-feedback" id="error-cdc_no"></div>
                            </div>
                            <div class="mb-3"><label class="form-label">SID Number</label><input type="text"
                                    name="sid_no" class="form-control" value="{{ $student->sid_no }}"></div>
                            <div class="mb-0"><label class="form-label">Passport Number</label><input type="text"
                                    name="passport_no" class="form-control" value="{{ $student->passport_no }}"></div>
                        </div>
                    </div>

                    {{-- Status --}}
                    <div class="form-card">
                        <div class="p-4">
                            <div class="form-check form-switch d-flex align-items-center gap-2">
                                <input class="form-check-input" type="checkbox" name="is_active" id="statusSwitch"
                                    value="1" {{ $student->is_active ? 'checked' : '' }}>
                                <label class="form-check-label fw-bold text-dark" for="statusSwitch">Active
                                    Account</label>
                            </div>
                        </div>
                    </div>

                    {{-- Submit Buttons --}}
                    <div class="mt-4 d-grid gap-2">
                        <button type="submit" id="submitBtn" class="btn btn-primary py-2 fw-bold">
                            <span id="btnText"><i class="ri-save-line me-1"></i> Update Profile</span>
                            <span id="btnLoader" style="display:none;"><span class="spinner-border spinner-border-sm"
                                    role="status"></span> Updating...</span>
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        function previewImage(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#avatarPreview').attr('src', e.target.result).show();
                    $('#avatarPlaceholder').hide();
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

        $(document).ready(function() {
            function showError(selector, message) {
                let input = $(selector);
                if (input.length === 0) return;
                let errorDiv = $('#error-' + input.attr('name'));
                input.addClass('is-invalid shake-effect');
                if (message && errorDiv.length) errorDiv.text(message);
                setTimeout(function() {
                    input.removeClass('shake-effect');
                }, 400);
            }

            $(document).on('input change', '.form-control, .form-select', function() {
                $(this).removeClass('is-invalid');
                $('#error-' + $(this).attr('name')).text('');
            });

            // Submit Form
            $('#editStudentForm').on('submit', function(e) {
                e.preventDefault();

                // Clear previous errors
                $('.form-control').removeClass('is-invalid');
                $('.invalid-feedback').text('');

                let formData = new FormData(this);
                let submitBtn = $('#submitBtn');

                submitBtn.prop('disabled', true);
                $('#btnText').hide();
                $('#btnLoader').show();

                $.ajax({
                    // Dynamic URL using Blade for the update route
                    url: "{{ route('admin.students.update', $student->uuid) }}",
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        submitBtn.prop('disabled', false);
                        $('#btnText').show();
                        $('#btnLoader').hide();

                        Swal.fire({
                            icon: 'success',
                            title: 'Updated!',
                            text: response.message,
                            timer: 2000,
                            showConfirmButton: false
                        }).then(() => {
                            window.location.href = response.redirect;
                        });
                    },
                    error: function(xhr) {
                        submitBtn.prop('disabled', false);
                        $('#btnText').show();
                        $('#btnLoader').hide();

                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;
                            $.each(errors, function(key, value) {
                                if (key === 'avatar') {
                                    $('#error-avatar').text(value[0]).show();
                                } else {
                                    let input = $('[name="' + key + '"]');
                                    showError(input, value[0]);
                                }
                            });
                            Swal.fire({
                                icon: 'error',
                                title: 'Check form errors'
                            });
                        } else {
                            Swal.fire('Error', 'Something went wrong.', 'error');
                        }
                    }
                });
            });
        });
    </script>
@endpush