@extends('layouts.app')

@section('title', 'List Brand')
@section('breadcrumb', 'Manage Brand')
@section('sub-breadcrumb')
    {{-- <span class="kt-subheader__breadcrumbs-separator"></span> --}}
    <a class="kt-subheader__breadcrumbs-link">
        List Brand
    </a>
@endsection
@section('brand', 'kt-menu__item--open kt-menu__item--here')
@section('list-brand', 'kt-menu__item--active')
@section('content')
<div class="kt-portlet">
    <div class="kt-portlet__body">
        @include('layouts.notification')
        <div class="mt-3">
           {{-- Begin:: table --}}
            <table class="table table-bordered table-hover table-checkable" id="m_table_1">
                <thead>
                    <tr>
                        <th>Logo</th>
                        <th>Brand Name</th>
                        <th>Owner</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($data['brand']['data'] as $item)
                        <tr>
                            <td>
                                @if($item['logo'] == null)
                                    <img src="https://vignette.wikia.nocookie.net/simpsons/images/6/60/No_Image_Available.png/revision/latest?cb=20170219125728" style="height:100px" />
                                @else
                                    <img src="{{env('AWS_URL').$item['logo'] }}" style="height:100px" />
                                @endif
                            </td>
                            <td style="text-align: center; vertical-align: middle;">
                                <h5>
                                    <div class="kt-widget__section">
                                        <a class="kt-widget__username">
                                                {{$item['name']}}
                                            <i class="flaticon2-correct kt-font-success"></i>
                                        </a>
                                    </div>
                                </h5>
                            </td>
                            <td style="vertical-align: middle;">
                                <div class="rTable">
                                    <div class="rTableRow">
                                        <div class="rTableHead">Name</div>
                                        <div class="rTableHead">&nbsp;: {{$item['user']['name']}}</div>
                                    </div>
                                    <div class="rTableRow">
                                        <div class="rTableHead">Phone</div>
                                        <div class="rTableHead">&nbsp;: {{$item['user']['phone']}}</div>
                                    </div>
                                    <div class="rTableRow">
                                        <div class="rTableHead">Email</div>
                                        <div class="rTableHead">&nbsp;: {{$item['user']['email']}}</div>
                                    </div>
                                    <div class="rTableRow">
                                        <div class="rTableHead">Level</div>
                                        <div class="rTableHead">&nbsp;: <span class="kt-badge kt-badge--inline kt-badge--success">
                                                Admin Brand
                                            </span></div>
                                    </div>
                                </div>
                            </td>
                            <td style="text-align: center; vertical-align: middle;">
                                <a href="{{route('brand.edit', [$item['id'], $item['id_owner']])}}"><i class='fa fa-edit text-warning'></i></a>
                                | <a href="{{route('brand.delete', [$item['id'], $item['id_owner']])}}" title="{{$item['name']}}" class='btn-delete' title=""><i class='fa fa-trash text-danger'></i></a>
                            </td>
                        </tr>
                    @endforeach
                    @if (count($data)==0)
                        <tr>
                            <td colspan="4">No data to display.</td>
                        </tr>
                    @endif
                </tbody>
            </table>
           {{-- End:: table --}}

           {{-- Begin:: Pagination --}}
            <div class="float-right">
                Showing {{$data['brand']['from']}} to {{$data['brand']['to']}} of {{$data['brand']['total']}} entries

                @if($data['brand']['prev_page_url'] == null && $data['brand']['next_page_url'] == null)
                    @elseif($data['brand']['prev_page_url'] == null)
                    <a href="{{url($data['url'].$data['brand']['prev_page_url'])}}" class="btn btn-secondary disabled"> << </a>
                    <a href="{{url($data['url'].$data['brand']['next_page_url'])}}" class="btn btn-info"> >> </a>
                    @elseif($data['brand']['next_page_url'] == null)
                    <a href="{{url($data['url'].$data['brand']['prev_page_url'])}}" class="btn btn-info"> << </a>
                    <a href="{{url($data['url'].$data['brand']['next_page_url'])}}" class="btn btn-secondary disabled"> >> </a>
                    @else
                    <a href="{{url($data['url'].$data['brand']['prev_page_url'])}}" class="btn btn-info"> << </a>
                    <a href="{{url($data['url'].$data['brand']['next_page_url'])}}" class="btn btn-info"> >></a>
                @endif
            </div>
           {{-- End:: Pagination --}}
        </div>
    <div class="kt-separator kt-separator--dashed"></div>
    </div>
</div>
@endsection

@section('custom-script')
<script>
    $('body').on('click', '.btn-delete', function (event) {
        event.preventDefault();

        var me = $(this),
            url = me.attr('href'),
            title = me.attr('title'),
            csrf_token = $('meta[name="csrf-token"]').attr('content');

        swal.fire({
            title: 'Are you sure want to delete ' + title + ' ?',
            text: 'You won\'t be able to revert this!',
            type: 'warning',
            input: 'password',
            inputAttributes: {
                autocapitalize: 'off',
                placeholder: "Masukan Master PIN",
                maxlength: 6,
                autocomplete: "new-password"
            },
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.value) {
                $('#loading').show();
                $.ajax({
                    url: url,
                    type: "POST",
                    data: {
                        '_method': 'POST',
                        '_token': csrf_token,
                        'pin': result.value
                    },
                    success: function (response) {
                        $('#loading').hide();
                        // console.log(response)
                        if (response.status == "fail") {
                            swal.fire({
                                type: 'error',
                                title: 'Oops...',
                                text: response.messages
                            });
                        }
                        if (response.status == "success") {
                            // $('#datatable').DataTable().ajax.reload();
                            swal.fire({
                                type: 'success',
                                title: 'Success!',
                                timer: 5000,
                                text: 'Data has been deleted!'
                            }).then((result) => {
                                if (result.value) {
                                    $(location).attr('href', "{{route('brand.index')}}");
                                }
                                $(location).attr('href', "{{route('brand.index')}}");
                            });
                        }
                    },
                    error: function (xhr) {
                        $('#loading').hide();
                        swal.fire({
                            type: 'error',
                            title: 'Oops...',
                            text: 'Something went wrong!'
                        });
                    }
                });
            }
        });
    });
</script>
@endsection