@extends('layouts.master')
@section('title') @lang('translation.Clients') @endsection
@section('content')
@component('components.breadcrumb')
@slot('li_1') Admin @endslot
@slot('title') {{ isset($client) ? 'Edit Client' : 'New Client' }} @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-users mr-2"></i>{{ isset($client) ? 'Edit Client' : 'Create New Client' }}
                    </h6>
                    <a href="{{ route('admin.clients.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($client) ? route('admin.clients.update', $client) : route('admin.clients.store') }}" 
                      method="POST" 
                      id="clientsForm">
                      
                    @csrf
                    @if(isset($client))
                        @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="employer_id" class="font-weight-bold">Employer <span class="text-danger">*</span></label>
                                <select class="form-select" id="employer_id" name="employer_id" required>
                                    <option value="">Select Employer</option>
                                    @foreach($employers as $employer)
                                        <option value="{{ $employer->id }}" 
                                            {{ old('employer_id', $client->employer_id ?? '') == $employer->id ? 'selected' : '' }}>
                                            {{ $employer->name }}
                                        </option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">Please select an employer.</div>
                            </div>
                        </div>
                        <div class="mb-3 col-md-6">
                            <div class="form-group">
                                <label for="name" class="font-weight-bold">Client Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" 
                                       id="name" name="name" 
                                       value="{{ old('name', $client->name ?? '') }}" required>
                                <div class="invalid-feedback">Please provide a valid client name.</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="mb-3 col-md-6">
                            <div class="form-group">
                                <label for="service_agreement_ref" class="font-weight-bold">Service Agreement Ref <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" 
                                       id="service_agreement_ref" name="service_agreement_ref" 
                                       value="{{ old('service_agreement_ref', $client->service_agreement_ref ?? '') }}" required>
                                <div class="invalid-feedback">Please provide a valid service agreement reference.</div>
                            </div>
                        </div>
                        <div class="mb-3 col-md-6">
                            <div class="form-group">
                                <label for="contact_person" class="font-weight-bold">Contact Person <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" 
                                       id="contact_person" name="contact_person" 
                                       value="{{ old('contact_person', $client->contact_person ?? '') }}" required>
                                <div class="invalid-feedback">Please provide a contact person.</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 <span class="text-danger">*</span></label>
                                <input type="email" class="form-control" 
                                       id="email" name="email" 
                                       value="{{ old('email', $client->email ?? '') }}" required>
                                <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="phone_number" class="font-weight-bold">Phone Number <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" 
                                       id="phone_number" name="phone_number" 
                                       value="{{ old('phone_number', $client->phone_number ?? '') }}" required>
                                <div class="invalid-feedback">Please provide a valid phone number.</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- <div class="mb-3 form-group">
                        <label for="address" class="font-weight-bold">Address</label>
                        <textarea class="form-control" 
                                  id="address" name="address" rows="3">{{ old('address', $client->address ?? '') }}</textarea>
                        <div class="invalid-feedback"></div>
                    </div> -->
                    
                    <div class="mb-3">
                        <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', $client->active ?? true)) ? 'checked' : '' }}>
                                <label class="custom-control-label" for="active">Active Client</label>
                            </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($client) ? 'Update' : 'Save' }} Client
                        </button>
                        <a href="{{ route('admin.clients.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 = $('#clientsForm');
    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()}
        `);

        $.ajax({
            url: form.attr('action'),
            type: form.attr('method'),
            data: form.serialize(),
            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' 
                            ? 'Client updated successfully!' 
                            : 'Client created successfully!'),
                        icon: 'success',
                        confirmButtonText: 'OK',
                        timer: 1800,
                        willClose: () => {
                            window.location.href = response.redirect || "{{ route('admin.clients.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);
            }
        });
    });
});
</script>

@endsection