@php
    $key = 'all';
@endphp

@extends('layout.default')

@section('styles')
    <!--begin::Page Vendors Styles(used by this page)-->
    <link href="{{env('STORAGE_URL_VIEW')}}plugins/custom/datatables/datatables.bundle.css?v=7.0.8" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .no_wrap {
            white-space:nowrap;
        }
    </style>
    <!--end::Page Vendors Styles-->
@endsection

@section('content')
    <div class="card">
        <div class="card-body">
            @include('layout.notifications')
            <!--begin: Datatable-->
            <table class="table table-bordered table-checkable" id="kt_datatable">
                <thead>
                <tr>
                    <th>Action</th>
                    <th>Brand Logo</th>
                    <th>Brand Code</th>
                    <th width="40%">Brand Name</th>
                </tr>
                </thead>
                <tbody>
                @if(!empty($datas))
                    @foreach($datas as $data)
                        <tr>
                            <td>
                                <a href="{{ url('brand/detail/'.$data['brand_id']) }}" class="btn btn-sm btn-primary text-nowrap"><i class="fa fa-pen"></i>Edit</a>
                                <a data-toggle="confirmation" data-popout="true" data-id="{{$data['brand_id']}}" class="btn btn-sm btn-danger delete"><i class="fas fa-trash"></i> Delete</a>
                            </td>
                            <td>@if(!empty($data['brand_logo'])) <img src="{{$data['brand_logo']}}" style="width: 80px;height: 80px">@endif</td>
                            <td>{{$data['brand_code']}}</td>
                            <td>{{$data['brand_name']}}</td>
                        </tr>
                    @endforeach
                @else
                    <tr>
                        <td colspan="10" style="text-align: center">Data Not Available</td>
                    </tr>
                @endif
                </tbody>
            </table>
        </div>
    </div>
@endsection

@section('scripts')
    <!--begin::Page Vendors(used by this page)-->
    <script src="{{env('STORAGE_URL_VIEW')}}plugins/custom/datatables/datatables.bundle.js?v=7.0.8"></script>
    <!--end::Page Vendors-->
    <script>
        var table;
        $(document).ready(function() {
            table = $('#kt_datatable').DataTable({searching: false, "paging": false, ordering: false});
            $('#kt_datatable').on('click', '.delete', function () {
                const row = $(this).parents('tr');
                const url = "{{url('brand/delete')}}/" + $(this).data("id")
                Swal.fire({
                    title: "Are you sure delete this brand?",
                    text: "You won't be able to revert this!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonText: "Yes, delete it!"
                }).then(function (result) {
                    if (result.value) {
                        $.ajax({
                            type: "DELETE",
                            url: url,
                            data: {
                                '_token': '{{csrf_token()}}'
                            },
                            success: function (response) {
                                if (response.status == 'success') {
                                    $('#kt_datatable').DataTable().row(row).remove().draw();
                                    Swal.fire(
                                        "Deleted!",
                                        "Your data has been deleted.",
                                        "success"
                                    )
                                } else {
                                    Swal.fire(
                                        "Failed!",
                                        response.messages ? response.messages[0] : 'Something went wrong',
                                        "error"
                                    )
                                }
                            },
                            error: function () {
                                Swal.fire(
                                    "Failed!",
                                    "Failed delete data",
                                    "error"
                                )
                            }
                        });
                    }
                });
            });
        });
    </script>
@endsection