@extends('layouts.basic')
@section('styles')
@endsection
@section('content')
<div class="container-fluid">
   <div class="page-title">
      <div class="row">
         <div class="col-6">
            <h3>Payment Mode</h3>
         </div>
         <div class="col-6">
            <ol class="breadcrumb">
               <li class="breadcrumb-item"><a href="{{ route('home') }}"><i data-feather="home"></i></a></li>
               <li class="breadcrumb-item">Masters</li>
               <li class="breadcrumb-item active">Payment Mode</li>
            </ol>
         </div>
      </div>
   </div>
</div>
<section class="content content-card">
  <div class="container-fluid">
  <div class="row">
      <div class="col-12">
         <div class="card">
            <div class="card-body">
               <!-- <div>
                  <button class="btn btn-primary" data-bs-toggle="modal"
                      data-bs-target="#staticBackdrop">Add</button>
                  </div> -->
               <div class="row no-print align-items-center table-top-div">
                  <div class="col-lg-6">
                     <div>
                        <h6 class="table-headings">Payment Mode List</h6>
                     </div>
                  </div>
                  @can(['payment_mode-create'])
                      
                 
                  <div class="col-lg-6">
                     <div class="add-button">
                        <button class="btn btn-secondary add_modal" data-bs-toggle="modal"
                           data-bs-target="#staticBackdrop"><i class="fa fa-plus-circle"></i>&nbsp; Add</button>
                     </div>
                  </div>
                  @endcan
               </div>
               <br>
             <div class="table-responsive table-holder">
             <table id="paymentmodeTable" class="table table-bordered">
                  <thead>
                     <tr class="table table-secondary">
                        <th>S.No</th>
                        <th>Payment mode name</th>
                        <th>status</th>
                        <th>Action</th>
                     </tr>
                  </thead>
                  <tbody>
                     
                  </tbody>
               </table>
             </div>
            </div>
            <!-- Button trigger modal -->
            <!-- Modal -->
            <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false"
               tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
               <div class="modal-dialog modal-dialog-centered">
                  <div class="modal-content">
                     <div class="modal-header content-padding1">
                        <h5 class="modal-title" id="staticBackdropLabel">Add Payment Mode</h5>
                        <button type="button" class="btn-close" style="color:#000 !important;font-size:20px" data-bs-dismiss="modal"
                           aria-label="Close"></button>
                     </div>
                     <div class="modal-body">
                        <form id="create-form" method="POST">
                           @csrf
                           @method('POST')
                           <div class="form-group">
                              <p class="label-form">Payment Mode name :</p>
                              <input type="text" name="name" class="form-control"
                                 placeholder="Enter Payment Mode name" required>
                           </div>
                           <br>
                           <div class="form-group">
                              <label for="status">Status:</label>
                              <br>
                              <div class="form-check form-check-inline">
                                 <input class="form-check-input" type="radio" name="inlineRadioOptions"
                                    id="inlineRadio1" value="active">
                                 <label class="form-check-label" for="inlineRadio1">Active</label>
                              </div>
                              <div class="form-check form-check-inline">
                                 <input class="form-check-input" type="radio" name="inlineRadioOptions"
                                    id="inlineRadio2" value="inactive">
                                 <label class="form-check-label" for="inlineRadio2">Inactive</label>
                              </div>
                           </div>
                        </form>
                     </div>
                     <div class="modal-footer">
                        <button type="button" class="btn filter-clear" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="add_btn">Save</button>
                     </div>
                  </div>
               </div>
            </div>
            <div class="modal fade" id="staticBackdrop1" data-bs-backdrop="static" data-bs-keyboard="false"
               tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
               <div class="modal-dialog modal-dialog-centered">
                  <div class="modal-content">
                     <div class="modal-header content-padding1">
                        <br>
                        <h5 class="modal-title" id="staticBackdrop1Label">Edit Payment Modes</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                           aria-label="Close"></button>
                     </div>
                     <div class="modal-body">
                        <form id="edit-form" >
                           @csrf
                           @method('PUT')
                           <div class="form-group">
                              <label for="terms">Payment Mode name:</label>
                              <input type="text" name="name1" id="name1" class="form-control"
                                 placeholder="Enter Payment Modes name" required ">
                              <input type="text" name="id" id="id" hidden>
                           </div>
                           <br>
                           <div class="form-group">
                              <label for="status">Status:</label>
                              <br>
                              <div class="form-check form-check-inline">
                                 <input class="form-check-input" type="radio" name="inlineRadioOption" id="inlineRadio3" value="active" >
                                 <label class="form-check-label" for="inlineRadio1">Active</label>
                              </div>
                              <div class="form-check form-check-inline">
                                 <input class="form-check-input" type="radio" name="inlineRadioOption" id="inlineRadio4" value="inactive">
                                 <label class="form-check-label" for="inlineRadio2">Inactive</label>
                              </div>
                           </div>
                        </form>
                     </div>
                     <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="update_btn" >Update</button>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
  </div>
</section>
@endsection
@section('script')
<script>
   $('#records_table').DataTable({
       responsive: true,
       ordering: false,
   });
</script>
{{-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> --}}
<script>
   $(document).on('submit', '#create-form', function(event) {

       event.preventDefault();
       var form = $(this);
       var url = form.attr('action');
       var method = form.attr('method');
       var formData = new FormData(form[0]);

       $.ajax({
           method: method,
           url: url,
           data: formData,
           processData: false,
           contentType: false,
           success: function(response) {
               iziToast.success({
                   title: 'Success',
                   message: response.message,
                   position: 'bottomRight'
               });
               $('#staticBackdrop').modal('hide');
               $('#create-form')[0].reset();
           },
           error: function(xhr) {
               $('#staticBackdrop').modal('show');
               if (xhr.responseJSON && xhr.responseJSON.errors) {
                   var errors = xhr.responseJSON.errors;
                   var errorMessages = Object.values(errors).join('<br>');
                   iziToast.error({
                       title: 'Error',
                       message: errorMessages,
                       position: 'bottomRight'
                   });
               } else {
                   iziToast.error({
                       title: 'Error',
                       message: xhr.responseText,
                       position: 'bottomRight'
                   });
               }
           }
       });
   });


   $(document).on('click', '#add_btn', function(e) {
       e.preventDefault(); // Prevent default form submission


       // Serialize the form data
       var formData = $('#create-form').serialize();

       // Make an AJAX call
       $.ajaxSetup({
           headers: {
               'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
           }
       });

       $.ajax({
           url: '{{ route('payment-mode.store')}}',
           type: 'post',
           data: formData,
           success: function(response) {

               iziToast.success({
                   title: 'Success',
                   message: response.message,
                   position: 'bottomRight'
               });
               // Reload the page after 3 seconds
               setTimeout(function() {
                     location.reload();
                  }, 3000); // 3000 milliseconds = 3 seconds
               $('#staticBackdrop').modal('hide');
               document.getElementById("#edit-form").reset();

           },

           error: function(xhr) {
               // $('#staticBackdrop').modal('show');
               if (xhr.responseJSON && xhr.responseJSON.errors) {
                   var errors = xhr.responseJSON.errors;
                   var errorMessages = Object.values(errors).join('<br>');
                   iziToast.error({
                       title: 'Error',
                       message: errorMessages,
                       position: 'bottomRight'
                   });
               } else {
                   iziToast.error({
                       title: 'Error',
                       message: xhr.responseText,
                       position: 'bottomRight'
                   });
               }
           }
       });
   });






   $(document).on('click', '#update_btn', function(e) {
       e.preventDefault(); // Prevent default form submission

       var recordId = $("#id").val();
       // Serialize the form data
       var formData = $('#edit-form').serialize();

       // Make an AJAX call
       $.ajaxSetup({
           headers: {
               'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
           }
       });

       $.ajax({
           url: '{{ route('payment-mode.update', '') }}/' + recordId,
           type: 'PUT',
           data: formData,
           success: function(response) {

               iziToast.success({
                   title: 'Success',
                   message: response.message,
                   position: 'bottomRight'
               });
               // Reload the page after 3 seconds
               setTimeout(function() {
                     location.reload();
                  }, 3000); // 3000 milliseconds = 3 seconds
               $('#staticBackdrop1').modal('hide');
               document.getElementById("#edit-form").reset();

           },

           error: function(xhr) {
               // $('#staticBackdrop').modal('show');
               if (xhr.responseJSON && xhr.responseJSON.errors) {
                   var errors = xhr.responseJSON.errors;
                   var errorMessages = Object.values(errors).join('<br>');
                   iziToast.error({
                       title: 'Error',
                       message: errorMessages,
                       position: 'bottomRight'
                   });
               } else {
                   iziToast.error({
                       title: 'Error',
                       message: xhr.responseText,
                       position: 'bottomRight'
                   });
               }
           }
       });
   });





   $(document).on('click', '.btn-edit', function() {
       // Open the modal
       var recordId = $(this).data('id');
       $.ajax({
           url: '{{ route('payment-mode.edit', 'recordId') }}',
           type: 'GET',
           data: {
               id: recordId
           },
           success: function(response) {
               console.log(response);

               $('#name1').val(response.paymentTerm.name);
               $('#id').val(response.paymentTerm.id);

               if( response.paymentTerm.status == 'active'){
                   jQuery("#inlineRadio3").attr('checked', true);
               }else{
                   jQuery("#inlineRadio4").attr('checked', true);
               }



               // $('[name="inlineRadioOption"][value="' + response.paymentTerm.status + '"]').prop('checked', true);



           },
           error: function(xhr) {
               console.log(xhr.responseText);
           }
       });
       // $('#editModal').modal('show');
   });

   $(document).on('click', '.table-del-btn', function() {
     var recordId = $(this).data('id');

       // Show a confirmation prompt using iziToast
       iziToast.question({
           timeout: false,
           close: false,
           overlay: true,
           displayMode: 'once',
           id: 'confirm',
           zindex: 999,
           title: 'Delete Confirmation',
           message: 'Are you sure you want to delete this record?',
           position: 'center',
           buttons: [
               ['<button><b>Yes</b></button>', function(instance, toast) {
                   // Delete the record
                   deleteRecord(recordId);
                   instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
                   location.reload();
               }, true],
               ['<button>No</button>', function(instance, toast) {
                   instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
               }]
           ]
       });
   });

   function deleteRecord(recordId) {
       // Ajax call to delete the record
       $.ajaxSetup({
                       headers: {
                           'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                       }
                   });
       $.ajax({
           url: '{{ route("payment-mode.destroy", ":id") }}'.replace(':id', recordId),
           method: 'DELETE',
           data: { id: recordId },
           success: function(response) {
               // Handle success response
               console.log("Record deleted successfully");


               iziToast.success({
                   title: 'Success',
                   message: 'Record deleted successfully',
                   position: 'topRight'
               });
               // Reload the page after 3 seconds
               setTimeout(function() {
                     location.reload();
                  }, 3000); // 3000 milliseconds = 3 seconds
           },
           error: function(xhr, status, error) {
               // Handle error response
               console.log(error);

               // Show error message using iziToast
               iziToast.error({
                   title: 'Error',
                   message: 'Failed to delete the record',
                   position: 'topRight'
               });
           }
       });
   }



   $(document).ready(function() {
   $('#paymentmodeTable').DataTable({
   processing: true,
   serverSide: true,
   responsive: true,
   ordering: false,
   ajax: "{{ route('payment-mode.index') }}",
   columns: [
    {
                data: null,
                render: function (data, type, row, meta) {
                    // Render serial number
                    return meta.row + meta.settings._iDisplayStart + 1;
                },
                name: 's.no' // You can change this name to 's.no' or anything you prefer
            },
       { data: 'name', name: 'name' },
       { data: 'status', name: 'status' },
       { data: 'action', name: 'action', orderable: false, searchable: false }
   ]
   });
   });


</script>
@endsection