@extends('layouts.app')
@section('title', 'Products')

@section('content')
<div class="content-wrapper">
    <div class="row">
        {{-- <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-2"></div>
                        <div class="col-md-8 text-center mt-4">
                            <a href="{{ route('products.create') }}" class="btn btn-outline-primary btn-sm mb-0"><i class="mdi mdi-plus"></i> Add Data</a>
                            <button class="btn btn-outline-success btn-sm mb-0" data-toggle="modal" data-target="#importModal"><i class="mdi mdi-cloud-upload"></i> Import Data</button>
                            <a href="{{ route('products.export') }}" target="_blank" class="btn btn-outline-warning btn-sm mb-0" id="exportBtn"><i class="mdi mdi-cloud-download"></i> Export Data</a>
                        </div>
                        <div class="col-md-2"></div>
                    </div>
                </div>
            </div>
        </div> --}}
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="card-title">Product Data</h4>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table" id="data-table">
                            <thead>
                                <tr>
                                    <th class="text-center">No</th>
                                    <th class="text-center">Name</th>
                                    <th class="text-center">Category</th>
                                    <th class="text-center">Customer</th>
                                    <th class="text-center">Quantity</th>
                                    <th class="text-center">Origin</th>
                                    <th class="text-center">Destination</th>
                                    {{-- <th class="text-center">Action</th> --}}
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Import Modal -->
<div class="modal fade" id="importModal" tabindex="-1" role="dialog" aria-labelledby="importModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="importModalLabel">Import Product Data</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="file">Select Excel File</label>
          <input type="file" class="form-control-file" id="file" name="file">
        </div>
        <div class="form-group">
          <label for="format">Excel Import Format</label>
          <br>
          <a href="{{ asset('storage/docs/Format Import Products.xlsx') }}" class="form-control" download>Download Import Format</a>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="importBtn">Import</button>
      </div>
    </div>
  </div>
</div>

@stop

@section('footer')
<script type="text/javascript">
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });

    $('#data-table').DataTable({
        processing: true,
        serverSide: false,
        ajax: '{{ route("products.index") }}',
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', className: 'text-center' },
            { data: 'name', name: 'name', className: 'text-center' },
            { data: 'category_name', name: 'category_name', className: 'text-center' },
            { data: 'customer_name', name: 'customer_name', className: 'text-center' },
            { data: 'quantity', name: 'quantity', className: 'text-center' },
            { data: 'origin_country', name: 'origin_country', className: 'text-center' },
            { data: 'destination', name: 'destination', className: 'text-center' },
            // { data: 'action', name: 'action', orderable: false, searchable: false, className: 'text-center' }
        ]
    });

    $('#importBtn').click(function() {
        var fileInput = $('#file')[0].files[0];

        if (!fileInput) {
            Swal.fire('Failed!', 'Please select an Excel file first!', 'error');
            return;
        }

        var formData = new FormData();
        formData.append('file', fileInput);

        $.ajax({
            url: '{{ route("products.import") }}',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if(response.code == 200){
                    Swal.fire('Success!', response.message, 'success');
                    $('#data-table').DataTable().ajax.reload();
                } else if(response.code == 422) {
                    // Create error message with line breaks
                    let errorMessage = 'Import failed with following errors:\n\n';
                    errorMessage += response.errors.join('\n');
                    Swal.fire({
                        title: 'Import Errors',
                        text: errorMessage,
                        icon: 'warning',
                        customClass: {
                            content: 'text-left'
                        }
                    });
                } else {
                    Swal.fire('Failed!', response.message, 'error');
                }
            },
            error: function(xhr, status, error) {
                Swal.fire('Failed!', 'An error occurred in the program!', 'error');
                console.error(xhr.responseText);
            }
        });
    });

    function deleteData(id) {
        var _url = "{{ route('products.destroy', ':id') }}"
        _url = _url.replace(':id', id),
        Swal.fire({
            title: "Are you sure you want to delete this data?",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Yes, Delete!",
            cancelButtonText: "No",
        })
        .then((result) => {
            if (result.isConfirmed) {
                var _token = $('meta[name="csrf-token"]').attr('content');

                $.ajax({
                    url: _url,
                    type: 'DELETE',
                    data: {
                        _token: _token
                    },
                    success: function(res) {
                        if(res.code == 200){
                            Swal.fire('Success!', res.message, 'success');
                            $('#data-table').DataTable().ajax.reload();
                        }else{
                            Swal.fire('Failed!', res.message, 'error');
                            $('#data-table').DataTable().ajax.reload();
                        }
                    },
                    error: function(err) {
                        console.log(err);
                    }
                })
            }
        });
    }
</script>
@stop