@extends('Admin.layout')
@section('content')
<style>
.custom-file-upload {
    display: flex;
    align-items: center;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    overflow: hidden;
    height: 44px;
    background: #fff;
}
.custom-file-upload .choose-btn {
    border-radius: 8px 0 0 8px;
    padding: 10px 18px;
    white-space: nowrap;
    height: 44px;
}
.custom-file-upload .file-name {
    border: none;
    border-left: 1px solid #dcdcdc;
    height: 44px;
    border-radius: 0 8px 8px 0;
}
.custom-file-upload .file-name:focus {
    box-shadow: none;
}
</style>
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="mb-0">Contact Details</h4>
    </div>
    <div class="row justify-content-center">
        <div class="col-lg">
            <div class="card p-4 mb-4">
                <form action="{{ route('add_contact_form') }}" method="POST" enctype="multipart/form-data" novalidate>
                    @csrf
                    <div class="row g-4">
                        <!-- Choose Image -->
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">
                                Choose Image <span class="text-danger">*</span>
                            </label>
                            <div class="custom-file-upload">
                                <input type="file" name="image" id="imageInput" hidden>
                                <button type="button" class="btn btn-primary choose-btn"
                                    onclick="document.getElementById('imageInput').click()">
                                    Choose File
                                </button>
                                <input type="text" id="fileName" class="form-control file-name" placeholder="File Name"
                                    readonly>
                            </div>
                        </div>
                        <!-- Phone -->
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Phone</label>
                            <input type="text" name="phone_number" class="form-control" placeholder="Enter phone number"  value="{{ old('phone_number') }}">
                        </div>
                        <!-- Email -->
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Email</label>
                            <input type="email" name="email" class="form-control" placeholder="Enter email"  value="{{ old('email') }}">
                        </div>
                        <!-- Address -->
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Address</label>
                            <input type="text" name="address" class="form-control" placeholder="Enter address" value="{{ old('address') }}">
                        </div>
                        <!-- Update Button -->
                        <div class="col-md-12 text-center">
                            <button type="submit" class="btn btn-primary px-5">
                                Update
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-datatable table-responsive pt-0">
            <div class="table-responsive">
                <table id="View_stock" class="table  table-bordered">
                    <thead>
                        <tr>
                            <th class="text-center">SNO</th>
                            <th class="text-center">DATE</th>
                            <th class="text-center">IMAGE</th>
                            <th class="text-center">PHONE</th>
                            <th class="text-center">EMAIL</th>
                            <th class="text-center">ADDRESS</th>
                            <th class="text-center">STATUS</th>
                            <th class="text-center">ACTION</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
<!-- Toast container for JS -->
<div class="position-fixed top-0 end-0 p-3" style="z-index: 9999">
    <div id="customToast" class="toast text-white border-0" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body" id="customToastBody"></div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
    </div>
</div>
{{-- Status Modal --}}
<div class="modal fade" id="statusModal" tabindex="-1">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content text-center p-8">
            <h4>Update Contact Status?</h4>
            <p class="text-muted">Do you want to change the status of this contact?</p>
            <input type="hidden" id="statusContactId">
            <div class="d-flex justify-content-center gap-3 mt-3">
                <button class="btn btn-outline-primary w-100" data-bs-dismiss="modal">Cancel</button>
                <button id="confirmStatusUpdate" class="btn btn-danger w-100">Update&nbsp;Status</button>
            </div>
        </div>
    </div>
</div>
{{-- Delete Modal --}}
<div class="modal fade" id="deleteModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content text-center p-8">
            <h4>Are you sure?</h4>
            <p class="text-muted">Do you really want to delete this contact?</p>
            <input type="hidden" id="deleteContactId">
            <div class="d-flex justify-content-center gap-3 mt-3">
                <button class="btn btn-outline-primary w-100" data-bs-dismiss="modal">Cancel</button>
                <button id="confirmDeleteContact" class="btn btn-danger w-100">Yes, Delete</button>
            </div>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
document.getElementById('imageInput').addEventListener('change', function() {
    document.getElementById('fileName').value =
        this.files.length ? this.files[0].name : '';
});
function showToast(message, type = "success") {
    let toastEl = document.getElementById("customToast");
    let bodyEl = document.getElementById("customToastBody");
    bodyEl.innerText = message;
    toastEl.classList.remove("bg-success", "bg-danger");
    if (type === "success") {
        toastEl.classList.add("bg-success");
    } else {
        toastEl.classList.add("bg-danger");
    }
    let toast = new bootstrap.Toast(toastEl);
    toast.show();
}
// Auto-show Laravel session messages
document.addEventListener('DOMContentLoaded', function() {
    @if(session('success'))
    showToast("{{ session('success') }}", "success");
    @elseif(session('error'))
    showToast("{{ session('error') }}", "error");
    @elseif($errors -> any())
    showToast("{{ $errors->first() }}", "error");
    @endif
});
$(document).ready(function() {
    $('#View_stock').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('contact_data') }}",
        columns: [
            { data: 'DT_RowIndex', orderable: false, searchable: false, className: 'text-center' },
            { data: 'created_at', name: 'created_at', className: 'text-center' },
            { data: 'image', name: 'image', orderable: false, searchable: false, className: 'text-center' },
            { data: 'phone_number', name: 'phone_number', className: 'text-center' },
            { data: 'email', name: 'email', className: 'text-center' },
            { data: 'address', name: 'address', className: 'text-center' },
            { data: 'status', name: 'status', orderable: false, searchable: false, className: 'text-center' },
            { data: 'action', name: 'action', orderable: false, searchable: false, className: 'text-center' }
        ],
        order: [[1, 'desc']],
        responsive: true
    });
    $(document).on('click', '.open-status-modal', function() {
        // Get the contact ID from the button
        var contactId = $(this).data('id');
        // Store it in the hidden input in the modal
        $('#statusContactId').val(contactId);
        // Show the modal
        $('#statusModal').modal('show'); // simpler bootstrap method
    });
    $('#confirmStatusUpdate').on('click', function() {
        // Get contact ID from hidden input
        var contactId = $('#statusContactId').val();
        // Disable the button to prevent double click
        $(this).prop('disabled', true);
        // Send AJAX request to toggle status
        $.ajax({
            url: "{{ route('toggle_contact_status') }}",
            type: "POST",
            data: {
                _token: '{{ csrf_token() }}',
                id: contactId
            },
            success: function(response) {
                // Show success or error message
                showToast(response.message, response.status);
                // Reload the table to see updated status
                $('#View_stock').DataTable().ajax.reload();
                // Close the modal
                $('#statusModal').modal('hide');
            },
            error: function() {
                showToast('Something went wrong', 'error');
            },
            complete: function() {
                $('#confirmStatusUpdate').prop('disabled', false);
            }
        });
    });
});
// Open delete modal
$(document).on('click', '.delete-contact', function() {
    var contactId = $(this).data('id');
    $('#deleteContactId').val(contactId);
    $('#deleteModal').modal('show');
});
// Confirm deletion
$('#confirmDeleteContact').on('click', function() {
    var contactId = $('#deleteContactId').val();
    if (!contactId) return;
    $(this).prop('disabled', true);
    $.ajax({
        url: "{{ route('delete_contact') }}",
        type: "POST",
        data: {
            id: contactId,
            _token: "{{ csrf_token() }}"
        },
        success: function(response) {
            $('#deleteModal').modal('hide');
            showToast(response.success || response.error, response.status);
            $('#View_stock').DataTable().ajax.reload(null, false);
        },
        error: function(xhr) {
            let msg = 'Something went wrong';
            if (xhr.responseJSON && xhr.responseJSON.error) {
                msg = xhr.responseJSON.error;
            }
            showToast(msg, 'error');
        },
        complete: function() {
            $('#confirmDeleteContact').prop('disabled', false);
        }
    });
});
</script>
@endsection