@extends('layouts.master')
@section('title') @lang('translation.Employers') @endsection
@section('content')
@component('components.breadcrumb')
@slot('li_1') Admin @endslot
@slot('title') {{ isset($employer) ? 'Edit Employer' : 'New Employer' }} @endslot
@endcomponent

<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-header">
                <div class="card-header py-3 d-flex justify-content-between align-items-center bg-primary text-white">
                    <h6 class="m-0 font-weight-bold">
                        <i class="fas fa-building mr-2"></i>{{ isset($employer) ? 'Edit Employer' : 'Create New Employer' }}
                    </h6>
                    <a href="{{ route('admin.employers.index') }}" class="btn btn-light btn-sm">
                        <i class="fas fa-arrow-left mr-1"></i> Back to List
                    </a>
                </div>
            </div>
            <div class="card-body">
                <form class="needs-validation" novalidate 
                      action="{{ isset($employer) ? route('admin.employers.update', $employer) : route('admin.employers.store') }}" 
                      method="POST" 
                      id="employersForm"
                      enctype="multipart/form-data">
                      
                    @csrf
                    @if(isset($employer))
                        @method('PUT')
                    @endif
                    
                    <div id="formErrors" class="alert alert-danger d-none"></div>
                    
                    <div class="row">
                        <div class="mb-3 col-md-6">
                            <div class="form-group">
                                <label for="name" class="font-weight-bold">Company Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" 
                                       id="name" name="name" 
                                       value="{{ old('name', $employer->name ?? '') }}" required>
                                <div class="invalid-feedback">Please provide a valid company name.</div>
                            </div>
                        </div>
                        
                        <div class="mb-3 col-md-6">
                            <div class="form-group">
                                <label for="tax_id" class="font-weight-bold">Tax ID <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" 
                                       id="tax_id" name="tax_id" 
                                       value="{{ old('tax_id', $employer->tax_id ?? '') }}" required>
                                <div class="invalid-feedback">Please provide a valid tax ID.</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3 form-group">
                        <label for="address" class="font-weight-bold">Address <span class="text-danger">*</span></label>
                        <textarea class="form-control" 
                                  id="address" name="address" rows="3" required>{{ old('address', $employer->address ?? '') }}</textarea>
                        <div class="invalid-feedback">Please provide a valid address.</div>
                    </div>
                    
                    <div class="row">
                        <div class="mb-3 col-md-6">
                            <div class="form-group">
                                <label for="contact_person" class="font-weight-bold">Contact Person</label>
                                <input type="text" class="form-control" 
                                       id="contact_person" name="contact_person" 
                                       value="{{ old('contact_person', $employer->contact_person ?? '') }}">
                                <div class="invalid-feedback"></div>
                            </div>
                        </div>
                        
                        <div class="mb-3 col-md-6">
                            <div class="form-group">
                                <label for="phone" class="font-weight-bold">Phone Number <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" 
                                       id="phone" name="phone" 
                                       value="{{ old('phone', $employer->phone ?? '') }}" required>
                                <div class="invalid-feedback">Please provide a valid phone number.</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="mb-3 col-md-6">
                            <div class="form-group">
                                <label for="email" class="font-weight-bold">Email</label>
                                <input type="email" class="form-control" 
                                       id="email" name="email" 
                                       value="{{ old('email', $employer->email ?? '') }}">
                                <div class="invalid-feedback">Please provide a valid email address.</div>
                            </div>
                        </div>
                        
                        <div class="mb-3 col-md-6">
                            <div class="form-group">
                                <label for="website" class="font-weight-bold">Website</label>
                                <input type="url" class="form-control" 
                                       id="website" name="website" 
                                       value="{{ old('website', $employer->website ?? '') }}" placeholder="https://">
                                <div class="invalid-feedback">Please provide a valid website URL.</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="mb-3 col-md-6">
                            <div class="form-group">
                                <label for="logo" class="font-weight-bold">Company Logo</label>
                                <input type="file" class="form-control" id="logo" name="logo" accept="image/*">
                                @if(isset($employer) && $employer->logo)
                                    <div class="mt-2">
                                        <img src="{{ asset('storage/'.$employer->logo) }}" alt="Current Logo" class="img-thumbnail" width="100">
                                        <div class="form-check mt-2">
                                            <input class="form-check-input" type="checkbox" id="remove_logo" name="remove_logo">
                                            <label class="form-check-label" for="remove_logo">
                                                Remove current logo
                                            </label>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                        
                        <div class="mb-3 col-md-6">
                            <div class="form-group">
                                <label class="font-weight-bold d-block">Status</label>
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="active" name="active" 
                                           value="1" {{ (old('active', $employer->active ?? true)) ? 'checked' : '' }}>
                                    <label class="custom-control-label" for="active">Active Employer</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group mt-4">
                        <button type="submit" class="btn btn-primary px-4">
                            <i class="fas fa-save mr-1"></i> {{ isset($employer) ? 'Update' : 'Save' }} Employer
                        </button>
                        <a href="{{ route('admin.employers.index') }}" class="btn btn-secondary ml-2">
                            <i class="fas fa-times mr-1"></i> Cancel
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
<script src="{{ URL::asset('assets/libs/pristinejs/pristinejs.min.js') }}"></script>
<script src="{{ URL::asset('assets/js/pages/form-validation.init.js') }}"></script>
<script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> -->
@endsection

@section('script-bottom')
<script>
$(document).ready(function () {
    const form = $('#employersForm');
    const submitButton = form.find("button[type=submit]");

    // Client-side validation
    form.on('submit', function (e) {
        if (!this.checkValidity()) {
            e.preventDefault();
            e.stopPropagation();
        }
        this.classList.add('was-validated');
    });

    // AJAX form submission
    form.on('submit', function (e) {
        e.preventDefault();

        // Clear previous errors
        $('#formErrors').addClass('d-none').html('');
        form.find('.is-invalid').removeClass('is-invalid');
        form.find('.invalid-feedback').html('');

        // Set loading state
        submitButton.prop('disabled', true).html(`
            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
            ${submitButton.text()}
        `);

        // Create FormData for file uploads
        const formData = new FormData(this);

        $.ajax({
            url: form.attr('action'),
            type: form.attr('method'),
            data: formData,
            processData: false,
            contentType: false,
            dataType: 'json',
            success: function (response) {
                submitButton.prop('disabled', false).html(
                    `<i class="fas fa-save mr-1"></i> ${submitButton.text().replace('ing...', '')}`
                );

                if (response.success) {
                    Swal.fire({
                        title: 'Success!',
                        text: response.message || (form.attr('method') === 'PUT' 
                            ? 'Employer updated successfully!' 
                            : 'Employer created successfully!',
                        icon: 'success',
                        confirmButtonText: 'OK',
                        timer: 1800,
                        willClose: () => {
                            window.location.href = response.redirect || "{{ route('admin.employers.index') }}";
                        }
                    });
                }
            },
            error: function (jqXHR) {
                submitButton.prop('disabled', false).html(
                    `<i class="fas fa-save mr-1"></i> ${submitButton.text().replace('ing...', '')}`
                );

                if (jqXHR.status === 422) {
                    const errors = jqXHR.responseJSON.errors;
                    let errorHtml = '<ul>';

                    $.each(errors, function (field, messages) {
                        const input = $(`#${field}`);
                        input.addClass('is-invalid');
                        input.siblings('.invalid-feedback').html(messages.join('<br>'));
                        messages.forEach(msg => {
                            errorHtml += `<li>${msg}</li>`;
                        });
                    });

                    errorHtml += '</ul>';
                    $('#formErrors').removeClass('d-none').html(errorHtml);
                } else {
                    $('#formErrors').removeClass('d-none')
                        .html(jqXHR.responseJSON?.message || 'Something went wrong. Please try again.');
                }

                // Scroll to error box
                $('html, body').animate({
                    scrollTop: $('#formErrors').offset().top - 100
                }, 500);
            }
        });
    });

    // Preview image before upload
    $('#logo').change(function() {
        const file = this.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                $('#logo-preview').remove();
                $('#logo').after(`
                    <div id="logo-preview" class="mt-2">
                        <img src="${e.target.result}" alt="Logo Preview" class="img-thumbnail" width="100">
                    </div>
                `);
            }
            reader.readAsDataURL(file);
        }
    });
});
</script>
@endsection