@extends('layouts.app')
@section('title', 'Rate Plans')

@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('rateplans.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('rateplans.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">Rate Plan 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">Price per CBM</th>
                                    <th class="text-center">Is Custom</th>
                                    <th class="text-center">Effective From</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 Rate Plan 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 RatePlans.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')
      }
    });

    var dtTableOption = {
        "paging": true,
        "lengthChange": false,
        "searching": true,
        "ordering": true,
        "info": true,
        "autoWidth": true,
        "responsive": true,
        "stateSave": true
    };

    var Notif = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 2000,
            timerProgressBar: true,
        })

    $('#data-table').DataTable({
        processing: true,
        serverSide: false,
        ajax: '{{ route("rateplans.index") }}',
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', class: 'text-center' },
            { data: 'name', name: 'name', class: 'text-center' },
            { data: 'price_per_cbm', name: 'price_per_cbm', class: 'text-center' },
            { data: 'is_custom', name: 'is_custom', class: 'text-center', render: function(data) {
                return data ? 'Yes' : 'No';
            }},
            { data: 'effective_from', name: 'effective_from', class: 'text-center' },
            { data: 'action', name: 'action', orderable: false, searchable: false, class: 'text-center' }
        ]
    });

    function deleteData(id) {
        var urlRedirect = "{{ route('rateplans.index') }}"
        var _url = "{{ route('rateplans.destroy', ':id') }}"
        _url = _url.replace(':id', id),
        Swal.fire({
                title: "Apakah anda yakin hapus data ini?",
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: "Ya, Hapus!",
                cancelButtonText: "Tidak",
            })
            .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){
                                Notif.fire({
                                    icon: 'success',
                                    title: res.message,
                                })
                                $('#data-table').DataTable().ajax.reload();
                            }else{
                                Notif.fire({
                                    icon: 'error',
                                    title: res.message,
                                })
                                $('#data-table').DataTable().ajax.reload();
                            }
                        },
                        error: function(err) {
                            console.log(err);
                        }
                    })
                }
            });
    }

    $('#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("rateplans.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{
                    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);
            }
        });
    });
</script>
@stop