@extends('layouts.business')

@section('title', 'Contact Us')
@section('breadcrumb_title', 'Contact Us')
@section('breadcrumb_title_route', route('business.contact_us.edit'))
@section('breadcrumb_sub_title', 'Edit')
@section('page_title', 'Contact Us')

@section('content')

    <div class="min-h-screen bg-gray-50">
        <div class="row mt-4">
            <div class="col-12">
                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <span class="alert-icon"><i class="ni ni-check-bold"></i></span>
                        <span class="alert-text">{{ session('success') }}</span>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @endif

                @if (session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <span class="alert-icon"><i class="ni ni-bell-55"></i></span>
                        <span class="alert-text">{{ session('error') }}</span>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @endif
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <!-- Card header -->
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h5 class="mb-0">Contact Us Information</h5>
                                <p class="text-sm mb-0">
                                    Update your contact information.
                                </p>
                            </div>
                            <div>
                                <a href="{{ route('business.dashboard') }}" class="btn btn-secondary">
                                    <i class="fas fa-arrow-left me-2"></i>Back
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Card body -->
                    <div class="card-body">
                        <form id="updateContactUsForm" method="POST">
                            @csrf
                            @if(isset($contactUs) && $contactUs)
                                <input type="hidden" id="contactUsId" name="id" value="{{ $contactUs->id }}">
                            @endif

                            @php
                                $canUpdate = Auth::user()->hasPermissionTo('Update_ContactUs');
                            @endphp

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="address" class="form-label">
                                            Address <span class="text-danger">*</span>
                                        </label>
                                        <textarea class="form-control" id="address" name="address"
                                            placeholder="Enter address" rows="3" {{ !$canUpdate ? 'disabled' : '' }}>{{ $contactUs->address ?? '' }}</textarea>
                                        <small class="text-danger font-weight-bold err_address"></small>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="phone_no" class="form-label">
                                            Phone Number <span class="text-danger">*</span>
                                        </label>
                                        <input class="form-control" type="text" id="phone_no" name="phone_no"
                                            placeholder="Enter phone number (10 digits)" value="{{ $contactUs->phone_no ?? '' }}"
                                            pattern="[0-9]{10}" maxlength="10" {{ !$canUpdate ? 'disabled' : '' }} />
                                        <small class="text-danger font-weight-bold err_phone_no"></small>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="email" class="form-label">
                                            Email <span class="text-danger">*</span>
                                        </label>
                                        <input class="form-control" type="email" id="email" name="email"
                                            placeholder="Enter email address" value="{{ $contactUs->email ?? '' }}" {{ !$canUpdate ? 'disabled' : '' }} />
                                        <small class="text-danger font-weight-bold err_email"></small>
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-4">
                                <div class="col-12">
                                    <div class="d-flex justify-content-end">
                                        <button type="button" class="btn bg-gradient-secondary btn-sm me-2"
                                            onclick="window.location.href='{{ route('business.dashboard') }}'">
                                            Cancel
                                        </button>
                                        @if($canUpdate)
                                            <button type="submit" class="btn bg-gradient-primary btn-sm" id="updateSubmitBtn">
                                                Update Contact Us
                                            </button>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            // Only allow numbers in phone_no field
            $('#phone_no').on('input', function() {
                this.value = this.value.replace(/[^0-9]/g, '');
            });

            // Clear errors when user starts typing
            $('#address, #phone_no, #email').on('input', function() {
                const fieldName = $(this).attr('name');
                $('.err_' + fieldName).text('');
                $(this).removeClass('is-invalid border-danger');
            });

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

                var $updateSubmitBtn = $('#updateSubmitBtn');

                // Clear previous errors
                $('.err_address, .err_phone_no, .err_email').text('');
                $('#address, #phone_no, #email').removeClass('is-invalid border-danger');

                var formData = {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    id: $('#contactUsId').val(),
                    address: $('#address').val(),
                    phone_no: $('#phone_no').val(),
                    email: $('#email').val(),
                };

                $.ajax({
                    type: "POST",
                    url: "{{ route('business.contact_us.update') }}",
                    data: formData,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    beforeSend: function() {
                        $("#loader").show();
                        $updateSubmitBtn.prop('disabled', true);
                    },
                    success: function(response) {
                        $("#loader").hide();
                        if (response.status === true) {
                            // Keep button disabled on success as we're reloading
                            $updateSubmitBtn.prop('disabled', true);
                            $.confirm({
                                theme: 'modern',
                                columnClass: 'col-xl-6 col-lg-6 col-md-8 col-sm-12 col-12',
                                title: 'Success!',
                                content: response.message || 'Contact Us updated successfully!',
                                type: 'green',
                                typeAnimated: true,
                                buttons: {
                                    confirm: {
                                        text: 'OK',
                                        btnClass: 'btn-primary',
                                        action: function() {
                                            location.reload();
                                        }
                                    }
                                }
                            });
                        } else {
                            // Re-enable button on error
                            $updateSubmitBtn.prop('disabled', false);
                        }
                    },
                    error: function(xhr) {
                        $("#loader").hide();
                        // Re-enable button on error
                        $updateSubmitBtn.prop('disabled', false);

                        if (xhr.status === 422) {
                            var response = xhr.responseJSON;
                            if (response && response.errors) {
                                $.each(response.errors, function(key, item) {
                                    if (key) {
                                        const errorMessage = Array.isArray(item) ? item[0] : item;
                                        $('.err_' + key).text(errorMessage);
                                        if (key === 'address') {
                                            $('#address').addClass('is-invalid border-danger');
                                        } else if (key === 'phone_no') {
                                            $('#phone_no').addClass('is-invalid border-danger');
                                        } else if (key === 'email') {
                                            $('#email').addClass('is-invalid border-danger');
                                        }
                                    }
                                });
                            }
                        } else {
                            var errorMessage = 'Something went wrong!';
                            if (xhr.responseJSON && xhr.responseJSON.message) {
                                errorMessage = xhr.responseJSON.message;
                            }
                            $.confirm({
                                theme: 'modern',
                                columnClass: 'col-lg-6 col-md-8 col-sm-10 col-12',
                                title: 'Error!',
                                content: errorMessage,
                                type: 'red',
                                typeAnimated: true,
                                buttons: {
                                    confirm: {
                                        text: 'OK',
                                        btnClass: 'btn-danger'
                                    }
                                }
                            });
                        }
                    }
                });
            });
        });
    </script>
@endsection