@extends('internal.layouts.index')
@section('content')
<style>
    #summernote {
        height: 300px; /* You can change this to whatever height you prefer */
    }
</style>
<div class="row">
    <!-- Left col -->
    <section class="col-lg-12 connectedSortable">
    <!-- Custom tabs (Charts with tabs)-->
    <div class="card">
        <div class="card-header">
        <h3 class="card-title">
            <h2>Data Harga Emas<h2>
        </h3>
        <div class="card-tools">
            <ul class="nav nav-pills ml-auto">
        </div>
        </div><!-- /.card-header -->
        <div class="card-body">
        <div class="tab-content p-0">
            <div class="row">
                <div class="col-md-3">
                    <button class="btn btn-primary" data-toggle="modal" data-target="#myModal" style="margin:10px"> <i class="fas fa-plus-circle"></i> Input Harga Emas</button>
                </div>
            </div>
            <table class="table table-bordered" id="example2">
                <thead>
                    <tr>
                        <th style="text-align:center">No</th>
                        <th style="text-align:center">Harga</th>
                        <th style="text-align:center">Update Date </th>
                        <th style="text-align:center"> </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($result as $key => $v)
                        <tr>
                            <td style="text-align: center;"> {{ $loop->iteration }}</td>
                            <td style="text-align: center;"> {{ 'Rp. ' . number_format($v->harga, 0, ',', '.') }}</td>
                            <td style="text-align: center;"> {{ date('Y-m-d H:i', strtotime($v->update_date)) }}</td>
                            <td style="text-align: center;"> 
                                <button class="btn btn-danger" onclick="return btnDelete(`{{ $v->id_trx_tren_emas }}`)">Delete</button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        </div><!-- /.card-body -->
    </div>
    </section>
</div>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Input Harga Emas</h4>
      </div>
      <div class="modal-body">
      <form id="fileUploadForm" enctype="multipart/form-data">
        <div class="row" style="margin:5px">
            <div class="col-md-4">
                <label for="">Harga</label>
            </div>
            <div class="col-md-5">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <input type="number" class="form-control" name="harga_emas" id="harga-emas">
            </div>
        </div>

        <div class="row" style="margin:5px">
            <div class="col-md-4">
                <label for="">Date Time</label>
            </div>
            <div class="col-md-8">
                <input type="text" id="datetime-picker" placeholder="Select Date and Time" class="form-control" style="background-color: white;">
                <input type="hidden" id="datetime_harga" name="datetime_harga">
            </div>
        </div> 

        <div class="row" style="margin:5px">
            <div class="col-md-4"></div>
            <div class="col-md-8">
                    <button class="btn btn-primary" id="upload-data" style="margin: 10px;">
                    <i class="fas fa-file-upload"></i>
                    Submit</button>
            </div>
        </div>

        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal" id="tutup-modal-harga"> <i class="fas fa-window-close"></i> Tutup</button>
      </div>
    </div>

  </div>
</div>

<!-- /.row (main row) -->
@endsection
@section('internal.layouts.script')
<script>

    $('#myModal').on('hidden.bs.modal', function () {
        $('#harga-emas').val('');
        $('#datetime-picker').val('');
        $('#datetime_harga').val('');
    });
      
    $('#tutup-modal-harga').click(function(){
        $('#harga-emas').val('');
        $('#datetime-picker').val('');
        $('#datetime_harga').val('');
    });
    
    
     $('#datetimepicker').datetimepicker({
        format: 'YYYY-MM-DD HH:mm:ss'
    });
    $('#fileUploadForm').on('submit', function(event) {
        event.preventDefault();

        var formData = new FormData(this); // Create FormData object with form data
        $.ajax({
            url: `{{ route('input.harga.emas') }}`,
            type: 'POST',
            data: formData,
            processData: false,  // Important for file uploads
            contentType: false,  // Important for file uploads
            success: function(response) {
                $('#harga-emas').val('');
                $('#datetime-picker').val('');
                $('#datetime_harga').val('');
                
                swal({
                    title: "Good job!",
                    text: "Data Berhasil Diinput",
                    icon: "success",
                    button: "",
                });
                setTimeout(function() {
                    location.reload();  // Reload the page after 2 seconds (2000ms)
                }, 250);  // Adjust the delay as needed
            },
        });
    });

    var fp = flatpickr("#datetime-picker", {
        enableTime: true,  // Enable time picker
        dateFormat: "Y-m-d H:i", // Set format for date and time (Year-Month-Day Hour:Minute)
        time_24hr: true,   // Use 24-hour time format
    });

    function getDateTimeValue() {
        var selectedDateTime = fp.input.value; // Get the current value of the input
        return selectedDateTime;
    }

    document.getElementById("datetime-picker").addEventListener("change", function() {
       let $datetime =  getDateTimeValue();
       $('#datetime_harga').val($datetime);
    });


    $('#example2').DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": true,
      "ordering": true,
      "info": true,
      "autoWidth": false,
      "responsive": true,
    });

    function btnDelete($id)
{
    swal({
        title: "",
        text: "Apakah ingin menghapus data ini ?",
        icon: "warning",
        buttons: true,
        dangerMode: true,
    })
    .then((willDelete) => {
        if (willDelete) {
            $.ajax({
                url : `{{ route('delete.row.tren.emas') }}`, // Fix the route syntax by closing the parentheses
                type : 'POST',
                data : {
                    id : $id, 
                    _token : "{{ csrf_token() }}"
                },
                success:function(response){
                    if(response.status){
                        swal({
                            title: "Good job!",
                            text: "Data Berhasil Dihapus",
                            icon: "success",
                            button: "", // Fixed property name
                        });
                        setTimeout(function() {
                            location.reload();  // Reload the page after 1 second (1000ms)
                        }, 250);  // Adjust the delay if needed
                    }
                }
            });
        }
    });
}

</script>
@endsection