@extends('layouts.app')

@section('content')
    <nav class="navbar navbar-main navbar-expand-lg  px-0 mx-4 shadow-none border-radius-xl z-index-sticky " id="navbarBlur"
        data-scroll="false" >
        <div class="container-fluid py-1 px-3" style="background-color:#008080">
            @include('layouts.navbars.auth.topnav', ['title' => 'Project Details'])
            <div class="sidenav-toggler sidenav-toggler-inner d-xl-block d-none ">
                <a href="javascript:;" class="nav-link p-0">
                    <div class="sidenav-toggler-inner">
                        <i class="sidenav-toggler-line bg-white"></i>
                        <i class="sidenav-toggler-line bg-white"></i>
                        <i class="sidenav-toggler-line bg-white"></i>
                    </div>
                </a>
            </div>
            <div class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar">
                <div class="ms-md-auto pe-md-3 d-flex align-items-center">
                    <div class="input-group">
                        <span class="input-group-text text-body"><i class="fas fa-search" aria-hidden="true"></i></span>
                        <input type="text" class="form-control" placeholder="Type here...">
                    </div>
                </div>
                <ul class="navbar-nav  justify-content-end">
                    <li class="nav-item d-flex align-items-center">
                        @include('auth.logout')
                    </li>
                    <li class="nav-item d-xl-none ps-3 d-flex align-items-center">
                        <a href="javascript:;" class="nav-link text-white p-0" id="iconNavbarSidenav">
                            <div class="sidenav-toggler-inner">
                                <i class="sidenav-toggler-line bg-white"></i>
                                <i class="sidenav-toggler-line bg-white"></i>
                                <i class="sidenav-toggler-line bg-white"></i>
                            </div>
                        </a>
                    </li>
                    <li class="nav-item px-3 d-flex align-items-center">
                        <a href="javascript:;" class="nav-link text-white p-0">
                            <i class="fa fa-cog fixed-plugin-button-nav cursor-pointer"></i>
                        </a>
                    </li>
                    <li class="nav-item position-relative pe-2 d-flex align-items-center">
                        <a href="javascript:;" class="nav-link text-white p-0" id="dropdownMenuButton"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fa fa-bell cursor-pointer"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end px-2 py-3 me-sm-n4" aria-labelledby="dropdownMenuButton">
                            <li class="mb-2">
                                <a class="dropdown-item border-radius-md" href="javascript:;">
                                    <div class="d-flex py-1">
                                        <div class="my-auto">
                                            <img src="/assets/img/team-2.jpg" class="avatar avatar-sm  me-3 "
                                                alt="user image">
                                        </div>
                                        <div class="d-flex flex-column justify-content-center">
                                            <h6 class="text-sm font-weight-normal mb-1">
                                                <span class="font-weight-bold">New message</span> from Laur
                                            </h6>
                                            <p class="text-xs text-secondary mb-0">
                                                <i class="fa fa-clock me-1"></i>
                                                13 minutes ago
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="mb-2">
                                <a class="dropdown-item border-radius-md" href="javascript:;">
                                    <div class="d-flex py-1">
                                        <div class="my-auto">
                                            <img src="/assets/img/small-logos/logo-spotify.svg"
                                                class="avatar avatar-sm bg-gradient-dark  me-3 " alt="logo spotify">
                                        </div>
                                        <div class="d-flex flex-column justify-content-center">
                                            <h6 class="text-sm font-weight-normal mb-1">
                                                <span class="font-weight-bold">New album</span> by Travis Scott
                                            </h6>
                                            <p class="text-xs text-secondary mb-0">
                                                <i class="fa fa-clock me-1"></i>
                                                1 day
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item border-radius-md" href="javascript:;">
                                    <div class="d-flex py-1">
                                        <div class="avatar avatar-sm bg-gradient-secondary  me-3  my-auto">
                                            <svg width="12px" height="12px" viewBox="0 0 43 36" version="1.1"
                                                xmlns="http://www.w3.org/2000/svg"
                                                xmlns:xlink="http://www.w3.org/1999/xlink">
                                                <title>credit-card</title>
                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                    <g transform="translate(-2169.000000, -745.000000)" fill="#FFFFFF"
                                                        fill-rule="nonzero">
                                                        <g transform="translate(1716.000000, 291.000000)">
                                                            <g transform="translate(453.000000, 454.000000)">
                                                                <path class="color-background"
                                                                    d="M43,10.7482083 L43,3.58333333 C43,1.60354167 41.3964583,0 39.4166667,0 L3.58333333,0 C1.60354167,0 0,1.60354167 0,3.58333333 L0,10.7482083 L43,10.7482083 Z"
                                                                    opacity="0.593633743"></path>
                                                                <path class="color-background"
                                                                    d="M0,16.125 L0,32.25 C0,34.2297917 1.60354167,35.8333333 3.58333333,35.8333333 L39.4166667,35.8333333 C41.3964583,35.8333333 43,34.2297917 43,32.25 L43,16.125 L0,16.125 Z M19.7083333,26.875 L7.16666667,26.875 L7.16666667,23.2916667 L19.7083333,23.2916667 L19.7083333,26.875 Z M35.8333333,26.875 L28.6666667,26.875 L28.6666667,23.2916667 L35.8333333,23.2916667 L35.8333333,26.875 Z">
                                                                </path>
                                                            </g>
                                                        </g>
                                                    </g>
                                                </g>
                                            </svg>
                                        </div>
                                        <div class="d-flex flex-column justify-content-center">
                                            <h6 class="text-sm font-weight-normal mb-1">
                                                Payment successfully completed
                                            </h6>
                                            <p class="text-xs text-secondary mb-0">
                                                <i class="fa fa-clock me-1"></i>
                                                2 days
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
<meta name="csrf-token" content="{{ csrf_token() }}">

<div class="container-fluid py-4">
    <div class="row mb-5">
        <div class="col-lg-9 col-12 mx-auto">
            <div class="card card-body mt-4">
                <h3 class="text-center mt-4">Customer Details</h3>
                <div class="row" style="margin-left:auto;">
   <!-- Button to trigger modal -->
<button class="btn btn-icon5 text-white" style="background-color:#333333; color:white;" onclick="$('#addCustomerModal').modal('show')">
    <span class="btn-inner--icon"><i class="fa fa-user"></i></span>
    <span class="btn-inner--text ms-1"> + Add New Customer</span>
</button>
</div>

              
<!-- Modal -->
<div class="modal fade" id="addCustomerModal" tabindex="-1" aria-labelledby="addCustomerLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="addCustomerForm">
               
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="addCustomerLabel">Add New Customer</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-2">
                        <label for="company_name" class="form-label">Company Name</label>
                        <input id="company_name" name="company_name" class="form-control" placeholder="Company Name" required>
                    </div>
                    <div class="mb-2">
                        <label for="customer_name" class="form-label">Customer Name</label>
                        <input id="customer_name" name="customer_name" class="form-control" placeholder="Customer Name">
                    </div>
                    <div class="mb-2">
                        <label for="location" class="form-label">Location</label>
                        <input id="location" name="location" class="form-control" placeholder="Location" required>
                    </div>
                    <div class="mb-2">
                        <label for="connected_year" class="form-label">Connected Year</label>
                        <input id="connected_year" name="connected_year" class="form-control" placeholder="Connected Year" required>
                    </div>
                    <div class="mb-2">
                        <label for="short_name" class="form-label">Short Name</label>
                        <input id="short_name" name="short_name" class="form-control" placeholder="Short Name">
                    </div>
                    <div class="mb-2">
                        <label for="project_count" class="form-label">Project Count</label>
                        <input id="project_count" name="project_count" class="form-control" placeholder="Project Count" type="number">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">Save</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="table-responsive mt-4">
   
    <table class="table table-bordered mt-2" id="customerTable">
    <thead class="text-white "style="background-color:#57A6A1;"><thead class="table-dark">
            <tr class="text-center">
                <th class="text-sm font-weight-normal">Company Name</th>
                <th class="text-sm font-weight-normal">Customer Name</th>
                <th class="text-sm text-center">Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($customers as $customer)
                <tr class="text-center">
                    <td><span class="text-sm" style="font-size: 18px;">{{ $customer->company_name }}</span></td>
                    <td><span class="text-sm" style="font-size: 18px;">{{ $customer->customer_name }}</span></td>
                    <td class="text-center">
                        <a href="{{ url('/customers/view/'.$customer->id) }}" class="btn btn-sm btn-white me-1" title="View">
                        <i class="fas fa-eye" style="font-size: 17px;"></i>
                        </a>

                        <button class="btn btn-sm btn-white me-1" title="Edit"
                            onclick="confirmUpdate(
                                '{{ $customer->id }}',
                                '{{ $customer->customer_name }}',
                                '{{ $customer->company_name }}',
                                '{{ $customer->location }}',
                                '{{ $customer->project_count }}',
                                '{{ $customer->connected_year }}',
                                '{{ $customer->short_name }}'
                            )">
                             <i class="fas fa-edit fa-lg" style="font-size: 17px;"></i>
                        </button>

                        <button class="btn btn-sm btn-white" title="Delete"
                            onclick="confirmDelete('{{ $customer->id }}', '{{ $customer->company_name }}')">
                            <i class="fa fa-trash" style="font-size: 17px;"></i>
                        </button>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

<div id="noDataMessage" class="container justify-content-center text-center" style="display: none;">
    @lang('words.nmresultsfound')
</div>


</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Bootstrap CSS and JS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- Ensure that jQuery and Bootstrap are loaded -->
<script>
    $(document).ready(function(){
        // This ensures the modal functionality works when triggered
        $('#addCustomerModal').on('shown.bs.modal', function () {
            console.log("Modal is now visible");
        });
    });
</script>
<script>
function confirmDelete(id, name) {
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    Swal.fire({
        title: 'Are you sure?',
        text: `Do you want to delete customer: ${name}?`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: 'Cancel',
    }).then((result) => {
        if (result.isConfirmed) {
            fetch(`/customers/delete/${id}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': csrfToken,
                    'Content-Type': 'application/json'
                }
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    Swal.fire('Deleted!', 'Customer has been deleted.', 'success')
                    .then(() => location.reload());
                } else {
                    Swal.fire('Error!', 'Something went wrong.', 'error');
                }
            })
            .catch(() => {
                Swal.fire('Error!', 'Failed to delete. Try again later.', 'error');
            });
        }
    });
}


    document.getElementById('addCustomerForm').addEventListener('submit', function (e) {
    e.preventDefault();

    const form = e.target;
    const formData = new FormData(form);

    fetch('{{ route("customers.store") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            Swal.fire('Success!', 'Customer added successfully.', 'success')
            .then(() => {
                form.reset();
                let modal = bootstrap.Modal.getInstance(document.getElementById('addCustomerModal'));
                modal.hide();
                location.reload(); // or update the view dynamically
            });
        } else {
            Swal.fire('Error!', data.message || 'Something went wrong.', 'error');
        }
    })
    .catch(error => {
        console.error(error);
        Swal.fire('Error!', 'Failed to add customer. Please try again.', 'error');
    });
});

function confirmUpdate(id, customerName, companyName, location, projectCount, connectedYear, shortName) {
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    Swal.fire({
        title: 'Edit Customer',
        html: `
            <div style="display: flex; align-items: center; margin-bottom: 10px;">
            <label for="swal-customer_name" style="width: 130px;">Customer Name</label>
            <input id="swal-customer_name" class="swal2-input" placeholder="Customer Name" value="${customerName}">
        </div>
        <div style="display: flex; align-items: center; margin-bottom: 10px;">
            <label for="swal-company_name" style="width: 130px;">Company Name</label>
            <input id="swal-company_name" class="swal2-input" placeholder="Company Name" value="${companyName}">
        </div>
        <div style="display: flex; align-items: center; margin-bottom: 10px;">
            <label for="swal-location" style="width: 130px;">Location</label>
            <input id="swal-location" class="swal2-input" placeholder="Location" value="${location}">
        </div>
        <div style="display: flex; align-items: center; margin-bottom: 10px;">
            <label for="swal-project_count" style="width: 130px;">Project Count</label>
            <input id="swal-project_count" class="swal2-input" placeholder="Project Count" value="${projectCount}">
        </div>
        <div style="display: flex; align-items: center; margin-bottom: 10px;">
            <label for="swal-connected_year" style="width: 130px;">Connected Year</label>
            <input id="swal-connected_year" class="swal2-input" placeholder="Connected Year" value="${connectedYear}">
        </div>
        <div style="display: flex; align-items: center; margin-bottom: 10px;">
            <label for="swal-short_name" style="width: 130px;">Short Name</label>
            <input id="swal-short_name" class="swal2-input" placeholder="Short Name" value="${shortName}">
        </div>
        `,
        focusConfirm: false,
        showCancelButton: true,
        confirmButtonText: 'Save Changes',
        cancelButtonText: 'Cancel',
        preConfirm: () => {
            return {
                customer_name: document.getElementById('swal-customer_name').value,
                company_name: document.getElementById('swal-company_name').value,
                location: document.getElementById('swal-location').value,
                project_count: document.getElementById('swal-project_count').value,
                connected_year: document.getElementById('swal-connected_year').value,
                short_name: document.getElementById('swal-short_name').value
            }
        }
    }).then((result) => {
        if (result.isConfirmed) {
            const formData = result.value;

            fetch(`/customers/update/${id}`, {
                method: 'PUT',
                headers: {
                    'X-CSRF-TOKEN': csrfToken,
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(formData)
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    Swal.fire('Updated!', 'Customer has been updated.', 'success')
                        .then(() => location.reload());
                } else {
                    Swal.fire('Error!', data.message || 'Something went wrong.', 'error');
                }
            })
            .catch(() => {
                Swal.fire('Error!', 'Failed to update. Try again later.', 'error');
            });
        }
    });
}

</script>
@endsection