@extends('staff::layouts.default')
@section('title', 'Overview')
@section('content')
<div class="content-wrapper">
    <div class="panel panel-white border-top-success">
        <div class="panel-heading">
            <h5 class="panel-title text-bold">
                <i class="icon-person position-left"></i>
                Overview
            </h5>
        </div>
        <div class="panel-body" style="background: #fff;">
            <div>
                <button type="button" class="btn btn-primary btn-add-new"
                        data-entity="position" id="btnAdd">
                    <i class="icon-plus-circle2"></i> Add New
                </button>
                <table class="table table-xlg">
                    <thead>
                    <tr>
                        <th width="350">Name</th>
                        <th>Description</th>
                        <th>Status</th>
                        <th class="text-center">Created Date</th>
                        <th class="text-center">Actions</th>
                    </tr>
                    </thead>

                    <tbody>
                        @foreach($data as $k => $v)
                            <tr>
                                <td>
                                    <a href="{{ route('file.upload.overview-detail', $v->id) }}">
                                        {{ $v->name }}    
                                    </a> 
                                </td>
                                <td>{{ $v->description }}</td>
                                <td>{{ $v->status ? 'Active' : 'Inactive' }}</td>
                                <td class="text-center">{{ $v->created_at->format('d-M-Y') }}</td>
                                <td class="text-center">
                                    <ul class="icons-list">
                                        <li class="dropdown">
                                            <a href="javascript:void(0)" class="dropdown-toggle"
                                               data-toggle="dropdown">
                                                <i class="icon-menu9"></i>
                                            </a>
                                            <ul class="dropdown-menu dropdown-menu-right">
                                                <li>
                                                    <a href="#" class="btn-edit-data" data-id="{{ $v->id }}"
                                                       data-name="{{ $v->name }}"
                                                       data-description="{{ $v->description }}"
                                                       data-status="{{ $v->status }}">
                                                        <i class="icon-pencil7"></i> {{ trans('admin_default.edit') }}
                                                    </a>
                                                    <a href="#" class="btn-delete-data"
                                                       data-id="{{ $v->id }}">
                                                       <i class="icon-trash"></i> {{ trans('admin_default.delete') }}
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </td>
                            </tr>
                        @endforeach              
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>

<!-- Edit Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
    <div class="modal-dialog" role="document">
        <form id="editForm">
            {!! csrf_field() !!}
            <input type="hidden" name="_method" id="form-method" value="PUT">
            <input type="hidden" name="id" id="edit-id">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="editModalLabel">Edit Item</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="id" id="edit-id">
                    
                    <div class="form-group">
                        <label>Name</label>
                        <input type="text" name="name" id="edit-name" class="form-control">
                    </div>

                    <div class="form-group">
                        <label>Description</label>
                        <textarea name="description" id="edit-description" class="form-control"></textarea>
                    </div>

                    <div class="form-group">
                        <label>Status</label>
                        <select name="status" id="edit-status" class="form-control">
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">Submit</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </form>
    </div>
</div>

@endsection

@section('script')

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

    // Open modal for add
    $('#btnAdd').on('click', function () {
        $('#editForm').trigger("reset");
        $('#form-method').val("POST");
        $('#editModalLabel').text("Add Category");
        $('#editForm').attr('action', "{{ route('file.upload.category.store') }}");
        $('#editModal').modal('show');
    });

    // Open modal for edit
    $('.btn-edit-data').on('click', function () {
        let id = $(this).data('id');
        $('#edit-id').val(id);
        $('#edit-name').val($(this).data('name'));
        $('#edit-description').val($(this).data('description'));
        $('#edit-status').val($(this).data('status'));
        $('#editModalLabel').text("Edit Category");
        $('#form-method').val("PUT");
        $('#editForm').attr('action', "{!! url('shop/file-upload/file-category/update') !!}" + "/" + id);
        $('#editModal').modal('show');
    });

    // Submit form via AJAX
    $('#editForm').submit(function (e) {
        e.preventDefault();

        let form = $(this);
        let url = form.attr('action');
        let method = $('#form-method').val();
        let formData = form.serialize();

        $.ajax({
            url: url,
            type: method,
            data: formData,
            success: function (res) {
                $('#editModal').modal('hide');
                location.reload(); // or refresh table only
            },
            error: function (xhr) {
                console.log(xhr.status);
                // console.log(xhr.responseText);
                alert("Validation Error or unexpected error");
            }
        });
    });

    // DELETE File Category
    $('.btn-delete-data').click(function (e) {
        e.preventDefault();

        const id = $(this).data('id');
        const url = "{!! url('shop/file-upload/file-category/delete') !!}" + '/' + id;

        Swal.fire({
            title: 'Are you sure?',
            text: "This action cannot be undone.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#aaa',
            confirmButtonText: 'Yes, delete it!',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: url,
                    type: 'POST', // Laravel 5.2 doesn't accept raw DELETE via AJAX
                    data: {
                        _method: 'DELETE', // Spoof method
                        _token: '{{ csrf_token() }}'
                    },
                    success: function (response) {
                        Swal.fire({
                            title: 'Deleted!',
                            text: response.message || 'Item deleted successfully.',
                            icon: 'success',
                            timer: 2000,
                            showConfirmButton: false
                        });

                        // Optionally remove row
                        // $('#row-' + id).remove();
                        location.reload();
                    },
                    error: function (xhr) {
                        let msg = 'Something went wrong.';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            msg = xhr.responseJSON.message;
                        }

                        Swal.fire({
                            title: 'Error!',
                            text: msg,
                            icon: 'error'
                        });
                    }
                });
            }
        });
    });


});
</script>



@endsection