@extends('layouts.app')

@section('title', 'Admin Brand')
@section('breadcrumb', 'Manage Admin Brand')
@section('sub-breadcrumb')
    {{-- <span class="kt-subheader__breadcrumbs-separator"></span> --}}
    <a class="kt-subheader__breadcrumbs-link">
        List Admin Brand
    </a>
@endsection
@section('admin-brand', 'kt-menu__item--open kt-menu__item--here')
@section('list-admin-brand', 'kt-menu__item--active')
@section('content')
    <div class="kt-portlet">
        <div class="kt-portlet__body">
            @include('layouts.notification')

            {{-- begin: hint --}}
            <div class="mb-4">
                <div class="col-md-12">
                    <div class="accordion accordion-toggle-arrow" id="accordion-info">
                        <div class="card" style="border-bottom: 1px solid #ebedf2">
                            <div class="card-header" id="headingOne4">
                                <div class="card-title" data-toggle="collapse" data-target="#collapse-info" aria-expanded="true" aria-controls="collapse-info">
                                    <i class="flaticon-info"></i> List Admin Brand
                                </div>
                            </div>
                            <div id="collapse-info" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion-info" style="">
                                <div class="card-body">
                                    <ul>
                                        <li>Merupakan pengisian admin brand dengan hak aksesnya masing-masing.</li>
                                        <li>Untuk setiap brand memiliki pengaturan admin brandnya masing-masing.</li>
                                        <li>Untuk mengganti brand, cukup ganti brand di bagian atas halaman (di sebelah nama Admin)</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- end: hint --}}
           {{-- begin: Search form --}}

                <div class="row m--margin-bottom-20">
                    <div class="col-lg-4 m--margin-bottom-10-tablet-and-mobile">
                        <label>Name:</label>
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-user"></i></span></div>
                            <input type="text" id="name" class="form-control m-input" placeholder="E.g: Rara Admin Brand" data-col-index="0">
                        </div>
                    </div>
                    <div class="col-lg-4 m--margin-bottom-10-tablet-and-mobile">
                        <label>Email:</label>
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text">@</span></div>
                            <input type="text" id="email" class="form-control m-input" placeholder="E.g: rara@mail.com" data-col-index="0">
                        </div>
                    </div>
                    <div class="col-lg-4 m--margin-bottom-10-tablet-and-mobile">

                        <label>Phone:</label>
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-phone"></i></span></div>
                            <input type="text" id="phone" class="form-control m-input" placeholder="E.g: 087821312xxx" data-col-index="0">
                            {{-- <input type="text" id="email" class="form-control m-input" placeholder="E.g: rara@mail.com" data-col-index="0"> --}}
                        </div>
                    </div>
                    <div class="col-lg-4 m--margin-bottom-10-tablet-and-mobile">
                        <br>
                        <label>Brands:</label>
                        <div class="input-group">
                            <select name="id_brand" id="searchBrand" class="js-example-basic-single"  style="width:100%!important;">
                                <option value="">--Choose Brands--</option>
                                @foreach ($brand['result'] as $item)
                                    <option value="{{$item['id']}}">{{$item['name']}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row mt-2 pull-right">
                    <div class="col-lg-12">
                        <div class="pull-right">
                            <button class="btn btn-primary filter"><i class="fa fa-search"></i> Search</button>
                            &nbsp;&nbsp;
                            <input class="btn btn-secondary reset" type="reset">
                        </div>
                    </div>
                </div>

           {{-- end: Search form --}}

           {{-- begin: datatable --}}
            <table id="datatable" class="table table-hover" style="width:100%">
                <thead>
                    <tr>
                        <th>No</th>
                        <th style="width: 30%;">Name</th>
                        <th style="width: 20%;">Email</th>
                        <th style="width: 10%;">Phone</th>
                        <th style="width: 20%">Brand</th>
                        <th>Status</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
            <div class="kt-separator kt-separator--dashed"></div>

           {{-- Modal Brand --}}
           @foreach($data as $key => $value)

           <div class="modal fade" id="view{{$value['id']}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title" id="exampleModalLongTitle">Brand</h3>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">

                        @foreach($value['user_brand'] as $key2 => $va)
                        <input type="text" class="form-control" value="{{$va['brand']['name']}}" disabled>
                        @endforeach
                    </div>

                </div>
            </div>
        </div>
        @endforeach

        </div>
    </div>
@endsection

@section('custom-script')
    <script>
        $(document).ready(function() {
            $('.js-example-basic-single').select2();
        });

        $.fn.dataTable.ext.errMode = 'none';
        $('#datatable').DataTable({
            responsive: true,
            processing: true,
            serverSide: true,
            stateSave: true,
            "bFilter": false,
            "lengthChange": false,
            ajax: "{{ route('admin.brand.table') }}",
            columns: [
                {data: 'DT_RowIndex', name: 'id', searchable: false, orderable: false},
                {data: 'name', name: 'name'},
                {data: 'email', name: 'email'},
                {data: 'phone', name: 'phone'},
                {data: 'brand', name: 'brand'},
                {data: 'level', name: 'level'},
                {data: 'action', name: 'action', searchable: false, orderable: false}
            ]
        }).on('processing.dt', function (e, settings, processing) {
                if (processing) {
                    $('#datatable').hide();
                    $('#loading').show();
                } else {
                    $('#datatable').show();
                    $('#loading').hide();
                }
        });

        $(document).on('click', '.filter', function() {
            var name      = $('#name').val();
            var email      = $('#email').val();
            var phone   = $('#phone').val();
            var id_brand = $('#searchBrand').val();
            filter(name, email, phone, id_brand);
        });

        function filter(name = '', email = '', phone = '', id_brand = '') {
            // var name      = $('#name').val();
            // var email      = $('#email').val();
            // var phone   = $('#phone').val();
            // var id_brand = $('#searchBrand').val();
            $.fn.dataTable.ext.errMode = 'none';

            var table = $('#datatable').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                destroy: true,
                "bFilter": false,
                "lengthChange": false,
                ajax: {
                    url: "{{ route('admin.brand.table') }}",
                    type: 'get',
                    data: function(d) {
                        d.name = name;
                        d.email = email;
                        d.phone = phone;
                        d.id_brand = id_brand;
                    }
                },
                columns: [
                    {data: 'DT_RowIndex', name: 'id', searchable: false, orderable: false},
                    {data: 'name', name: 'name'},
                    {data: 'email', name: 'email'},
                    {data: 'phone', name: 'phone'},
                    {data: 'brand', name: 'brand'},
                    {data: 'level', name: 'level'},
                    {data: 'action', name: 'action', searchable: false, orderable: false}
                ]
            });
        }

        $(document).on('click', '.reset', function(){
            reset();
            filter();
        })

        function reset() {
            $('#name').val('');
            $('#email').val('');
            $('#phone').val('');
            // $('#datatable').DataTable().ajax.reload();
            // $("#datatable").DataTable().search("").draw()
            $('#datatable').DataTable().clear().draw();
            $('#searchBrand').val('').trigger('change');
        }


        $('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!',
                                    text: 'Data has been deleted!'
                                });
                            }
                        },
                        error: function (xhr) {
                            $('#loading').hide();
                            swal.fire({
                                type: 'error',
                                title: 'Oops...',
                                text: 'Something went wrong!'
                            });
                        }
                    });
                }
            });
        });
    </script>
@endsection