@extends('layouts.app')

@section('content')



<style>
  button.dt-button, div.dt-button, a.dt-button, input.dt-button {
    border-radius: 5px;
    color: white;
    background-color: rgb(197, 7, 178);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

button.dt-button:hover:not(.disabled), div.dt-button:hover:not(.disabled), a.dt-button:hover:not(.disabled), input.dt-button:hover:not(.disabled) {
    border: 1px solid #666;
    background-color: rgb(29, 29, 29);
}
.dropify-wrapper input {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 5;
}
.dropify-wrapper {
    display: block;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    height: 200px;
    padding: 5px 10px;
    font-size: 14px;
    line-height: 22px;
    color: #777;
    background-color: #FFF;
    background-image: none;
    text-align: center;
    border: 2px solid #E5E5E5;
    -webkit-transition: border-color .15s linear;
    transition: border-color .15s linear;
}
</style>
      <!-- partial -->
      <div class="main-panel">
        <div class="content-wrapper">
          <div class="page-header">
            <h3 class="page-title">
              Dashboard
            </h3>
          </div>
          <div class="row grid-margin">
            <div class="col-12">
              <div class="card card-statistics">
                <div class="card-body">
                  <div class="d-flex flex-column flex-md-row align-items-center justify-content-between">
                    
                      <div class="statistics-item">
                        <h4>REGISTER CUSTOMER</hr>
                      </div>
                      <div class="statistics-item">
                       
                        {{-- <h2><button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#exampleModal-2">Click Me 😊 <i class="fa fa-play-circle ml-1"></i></button></h2> --}}
                        <h2><button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target=".bd-example-modal-lg">Click Me 😊 <i class="fa fa-play-circle ml-1"></i></button></h2>
                        {{-- <button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button> --}}
                        <label class="badge badge-outline-success badge-pill"></label>
                      </div>
                    
                      
                  </div>
                </div>
              </div>
            </div>
          </div>
         
          <div class="content-wrapper">
            {{-- <div class="page-header">
              <h3 class="page-title">
                Data table
              </h3>
              <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                  <li class="breadcrumb-item"><a href="#">Tables</a></li>
                  <li class="breadcrumb-item active" aria-current="page">Data table</li>
                </ol>
              </nav>
            </div> --}}
            <div class="card">
              <div class="card-body">
                <h4 class="card-title">Data table</h4>
                <div class="row">
                  <div class="col-12">
                    <div class="table-responsive" style="overflow-x: auto; -webkit-overflow-x: auto;">
                        <table id="example" class="table table-striped table-hover table-product  nowrap" style="width: 100%; ">
                        <thead>
                          <tr>
                              <th>#</th>
                              <th>Name</th>
                              <th>Address</th>
                              <th>Contact</th>
                               <th>View</th>
                              <th>Delete</th>
                          </tr>
                        </thead>
                        <tbody>
                      
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-12">
              <div class="card">
                <div class="card-body">
                  <div class="d-md-flex justify-content-between align-items-center">
                    <div class="d-flex align-items-center mb-3 mb-md-0">
                      <button class="btn btn-social-icon btn-facebook btn-rounded">
                        <i class="fab fa-facebook-f"></i>
                      </button>
                      <div class="ml-4">
                        <h5 class="mb-0">Facebook</h5>
                        <p class="mb-0">813 friends</p>
                      </div>
                    </div>
                    <div class="d-flex align-items-center mb-3 mb-md-0">
                      <button class="btn btn-social-icon btn-twitter btn-rounded">
                        <i class="fab fa-twitter"></i>
                      </button>
                      <div class="ml-4">
                        <h5 class="mb-0">Twitter</h5>
                        <p class="mb-0">9000 followers</p>
                      </div>
                    </div>
                    <div class="d-flex align-items-center mb-3 mb-md-0">
                      <button class="btn btn-social-icon btn-google btn-rounded">
                        <i class="fab fa-google-plus-g"></i>
                      </button>
                      <div class="ml-4">
                        <h5 class="mb-0">Google plus</h5>
                        <p class="mb-0">780 friends</p>
                      </div>
                    </div>
                    <div class="d-flex align-items-center">
                      <button class="btn btn-social-icon btn-linkedin btn-rounded">
                        <i class="fab fa-linkedin-in"></i>
                      </button>
                      <div class="ml-4">
                        <h5 class="mb-0">Linkedin</h5>
                        <p class="mb-0">1090 connections</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- content-wrapper ends -->
        <!-- partial:../../partials/_footer.html -->
        <footer class="footer">
          <div class="d-sm-flex justify-content-center justify-content-sm-between">
            <span class="text-muted text-center text-sm-left d-block d-sm-inline-block">Copyright © 2025  <a href="" target="_blank">Ruwan Rathnayaka</a>. All rights reserved.</span>
            <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center">Hand-crafted & made with <i class="far fa-heart text-danger"></i></span>
          </div>
        </footer>
        <!-- partial -->
      </div>

      

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header" style="background-color: rgb(44, 3, 114)">
          <h5 class="modal-title" id="exampleModalLabel-2" style="color: white">REGISTER CUSTOMER</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"  style="color: white">
            <span aria-hidden="true"  style="color: white; ">&times;</span>
          </button>
        </div>
        <div class="modal-body">
           
          
          <form class="forms-sample">
           
            <div class="container">
                <div class="row">
                 
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="exampleInputUsername1">Name</label>
                            <input type="text" class="form-control" id="name" placeholder="Add Name">
                          </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="exampleInputUsername1">Address</label>
                            <input type="text" class="form-control" id="address" placeholder="Add Address">
                          </div>
                         
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="exampleInputUsername1">Contact Number</label>
                            <input type="text" class="form-control" id="contact" placeholder="Add Contact Number">
                          </div>
                    </div>

                    <div class="col-md-6">
                       
                        <div class="form-group">
                            <label for="description">Description</label>
                            <textarea id="description"  class="form-control" name="description" rows="13" cols="50"></textarea>
                          </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="description">Image</label>
                            <div class=" grid-margin stretch-card">
                                <div class="card">
                                  <div class="">
                                    
                                    <input type="file" class="dropify" id="image" />
                                  </div>
                                </div>
                              </div>
                          </div>
                    </div>
                </div>
             </div>
             
            
            
            
            <div class="form-group">
              <div class="form-check form-check-flat form-check-primary">
                <label class="form-check-label">
                  <input type="checkbox" class="form-check-input">
                  Remember me
                </label>
              </div>
            </div>
            
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary store">Submit</button>
          <button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
        </div>
      </div>
  </div>
</div>
     
  

<div class="modal fade bd-example-modal-lg2" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel2" aria-hidden="true">
  <div class="modal-dialog modal-lg2">
    <div class="modal-content">
        <div class="modal-header" style="background-color: rgb(44, 3, 114)">
          <h5 class="modal-title" id="exampleModalLabel-2" style="color: white">REGISTER CUSTOMER</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"  style="color: white">
            <span aria-hidden="true"  style="color: white; ">&times;</span>
          </button>
        </div>
        <div class="modal-body">
           
          
          <form class="forms-sample">
           
            <div class="container">
                <div class="row">
                 
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="exampleInputUsername1">Name</label>
                            <input type="text" class="form-control" id="updatename" placeholder="Add Name">
                          </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="exampleInputUsername1">Address</label>
                            <input type="text" class="form-control" id="updateaddress" placeholder="Add Address">
                          </div>
                         
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="exampleInputUsername1">Contact Number</label>
                            <input type="text" class="form-control" id="updatecontact" placeholder="Add Contact Number">
                          </div>
                    </div>

                    <div class="col-md-12">
                       
                        <div class="form-group">
                            <label for="description">Description</label>
                            <textarea id="description"  class="form-control" name="updatedescription" rows="8" cols="30"></textarea>
                          </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="description">Image</label>
                            <div class=" grid-margin stretch-card">
                                <div class="card">
                                  <div class="">
                                    
                                    <input type="file" class="dropify" id="updateimage" />
                                  </div>
                                </div>
                              </div>
                          </div>
                    </div>
                </div>
             </div>
             
            
            
            
            <div class="form-group">
              <div class="form-check form-check-flat form-check-primary">
                <label class="form-check-label">
                  <input type="checkbox" class="form-check-input">
                  Remember me
                </label>
              </div>
            </div>
            
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary Update">Update</button>
          <button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
        </div>
      </div>
  </div>
</div>



      <script>
$( document ).ready(function() {

  $(document).on('click', '.store', function () {
    var name = $('#name').val();
    var address = $('#address').val();
    var contact = $('#contact').val();
    var description = $('#description').val();
    var image = $('#image')[0].files[0]; // Get the file object

    var isValid = true;
    var errorMessage = '';

    // Perform individual validation checks for each input field
   
    if (!name || name.length === 0) {
        errorMessage += 'Name is required.<br>';
        isValid = false;
    }
    if (!address || address.length === 0) {
        errorMessage += 'Address is required.<br>';
        isValid = false;
    }
    if (!contact || contact.length === 0) {
        errorMessage += 'Contact is required.<br>';
        isValid = false;
    }
    if (!isValid) {
        Swal.fire({
            icon: 'error',
            title: 'Validation Error',
            html: errorMessage,
            showCloseButton: true,
            confirmButtonText: 'OK',
        });
        return;
    }

    // Prepare FormData
    var formData = new FormData();
    formData.append('name', name);
    formData.append('address', address);
    formData.append('contact', contact);
    formData.append('description', description);
    if (image) {
        formData.append('image', image); // Add image to FormData
    }

    // Send AJAX request
    $.ajax({
        url: '{{ route('store.costomer') }}',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
        },
        type: 'POST',
        data: formData,
        processData: false, // Do not process FormData
        contentType: false, // Do not set contentType (it will be auto-set)
        success: function (response) {
            Swal.fire(
                'Good job!',
                response.message,
                'success'
            ).then((result) => {
                if (result.isConfirmed) {
                    window.location.reload();
                }
            });
        },
        error: function (xhr, status, error) {
            // Handle error response from the backend
            console.error('Error:', error);
            Swal.fire({
              icon: "error",
              title: "Oops...",
              text: error,
            
            });
        },
    });
});

  // alert("hi")
  $('#example').DataTable({
            dom: "<'row'<'col-sm-12 col-md-4'l><'col-sm-12 col-md-4'B><'col-sm-12 col-md-4'f>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ],
            processing: true,
            info: true,
            responsive: true,
            lengthMenu: [
                [10, 25, 50, 100, 200, -1],
                [10, 25, 50, 100, 200, "All"]
            ],
            ajax: "{{ route('list_costomer') }}",
            columns: [
                {
                    data: 'id',
                    name: 'id'
                },

                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'address',
                    name: 'address'
                },
                {
                    data: 'contact_no',
                    name: 'contact_no'
                },
                 {
                    data: 'id',
                    name: 'view',
                    render: function(data, type, row, meta) { 
                        return `<button type="button" class="btn  btn-outline-success view"
                        data-name="${row.name}" data-address="${row.address}" data-contactno="${row.contact_no}" data-image="${row.image}" data-description="${row.description}"  data-toggle="modal" data-target=".bd-example-modal-lg2"  data-id="${data}" style="height:32px; margin:0px;">View</button>`;
                    }
                },
                {
                    data: 'id',
                    name: 'view',
                    render: function(data, type, row, meta) {
                        return `<button type="button" class="btn  btn-outline-success delete"  data-id="${data}" style="height:32px; margin:0px;">Delete</button>`;
                    }
                },
            ],

           
            createdRow: function(row, data, dataIndex) {
            // Example condition to change font color
            // Adjust condition as needed
                $(row).css('font-size', '15px');
           
        }
        });


     $(document).on('click', '.view', function () {
    var id = $(this).data('id');
    var name = $(this).data('name');
    var address = $(this).data('address');
    var contactno = $(this).data('contactno');
    var description = $(this).data('description');
    var image = $(this).data('image');

    // Set values to modal fields
    $('#updatename').val(name);
    $('#updateaddress').val(address);
    $('#updatecontact').val(contactno);
    $('#updatedescription').val(description);

    // Reset Dropify image (only once at page load)

   var dropify = $('#updateimage').data('dropify');
    dropify.resetPreview();                     // Clear current preview
    dropify.clearElement();                     // Clear input value
    $('#updateimage').attr('data-default-file', image); // Set new default image
    dropify.settings.defaultFile = image;       // Set internally
    dropify.destroy();                          // Fully destroy
    dropify.init();   


  

    // ✅ Make sure ID is attached freshly to the Update button
    $('.Update').attr('data-id', id);
});

$(document).on('click', '.Update', function () {
    var id = $(this).attr('data-id');
     var name = $('#updatename').val();
    var address = $('#updateaddress').val();
    var contact = $('#updatecontact').val();
    var description = $('#updatedescription').val();
    var image = $('#updateimage')[0].files[0]; // Get the file object

    var isValid = true;
    var errorMessage = '';

    // Perform individual validation checks for each input field
   
    if (!name || name.length === 0) {
        errorMessage += 'Name is required.<br>';
        isValid = false;
    }
    if (!address || address.length === 0) {
        errorMessage += 'Address is required.<br>';
        isValid = false;
    }
    if (!contact || contact.length === 0) {
        errorMessage += 'Contact is required.<br>';
        isValid = false;
    }
    if (!isValid) {
        Swal.fire({
            icon: 'error',
            title: 'Validation Error',
            html: errorMessage,
            showCloseButton: true,
            confirmButtonText: 'OK',
        });
        return;
    }

    // Prepare FormData
    var formData = new FormData();
    formData.append('id', id);
    formData.append('name', name);
    formData.append('address', address);
    formData.append('contact', contact);
    formData.append('description', description);
    if (image) {
        formData.append('image', image); // Add image to FormData
    }

    // Send AJAX request
    $.ajax({
        url: '{{ route('update.costomer') }}',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
        },
        type: 'POST',
        data: formData,
        processData: false, // Do not process FormData
        contentType: false, // Do not set contentType (it will be auto-set)
        success: function (response) {
            Swal.fire(
                'Good job!',
                response.message,
                'success'
            ).then((result) => {
                if (result.isConfirmed) {
                    window.location.reload();
                }
            });
        },
        error: function (xhr, status, error) {
            // Handle error response from the backend
            console.error('Error:', error);
            Swal.fire({
              icon: "error",
              title: "Oops...",
              text: error,
            
            });
        },
    });
    
});




        $(document).on('click', '.delete', function() {
        var id = $(this).data('id');
        

            const swalWithBootstrapButtons = Swal.mixin({
                customClass: {
                    confirmButton: 'btn btn-success',
                    cancelButton: 'btn btn-danger'
                },
                buttonsStyling: false
            })

            swalWithBootstrapButtons.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, Do it!',
                cancelButtonText: 'No, cancel!',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "/delete.costomer",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        type: "POST",
                        data: JSON.stringify({
                            'id': id
                        }),
                        contentType: "application/json",
                        success: function(response) {
                            window.location.reload();
                        },
                    });
                    swalWithBootstrapButtons.fire(
                        'Payment Deleted!',
                        'Your Payment has been Deleted.',
                        'success'
                    )
                } else if (
                    /* Read more about handling dismissals below */
                    result.dismiss === Swal.DismissReason.cancel
                ) {
                    swalWithBootstrapButtons.fire(
                        'Cancelled',
                        'Your imaginary file is safe  😇 ',
                        'error'
                    )
                }
            })

        });
});
      
      </script>
@endsection
      <!-- main-panel ends -->