@extends('admin.layouts.admin')
@section('content')
<!-- [ Main Content ] start -->
<div class="pc-container">
    <div class="pc-content">
        <!-- [ breadcrumb ] start -->
        <div class="page-header">
            <div class="page-block">
                <div class="row align-items-center">
                    <div class="col-md-12">
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('admin.colors') }}">{{ $title }}</a></li>
                            <li class="breadcrumb-item" aria-current="page">List</li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>
        <!-- [ breadcrumb ] end -->

        <!-- [ Main Content ] start -->
        <div class="row">
            @if ($message = Session::get('success'))
            <div class="col-sm-12">
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <strong>{{ $message }}</strong>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            </div>
            @endif

            <!-- [ sample-page ] start -->
            <div class="col-sm-12">
                <div class="card ">
                    <div class="card-header">
                        <h3 class="float-start">{{ $title }}</h3>
                        <a href="{{ route('admin.colors.create') }}" class="btn btn-primary d-inline-flex align-item-center float-end">
                            <i class="ti ti-plus f-18"></i> Add Color
                        </a>
                    </div>
                    <div class="card-body">

                        <div class="dt-responsive table-responsive">
                            <table id="jsource-table" class="table  table-bordered nowrap"> </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- [ sample-page ] end -->
        </div>
        <!-- [ Main Content ] end -->


    </div>
</div>
@endsection
@push('scripts')

<script type="text/javascript">
    var table = $('#jsource-table').DataTable({
        ajax: "{{ route('admin.colors') }}",
        processing: true,
        serverSide: true,
        deferRender: true,
        columns: [{
                title: '#',
                data: 'id',
                name: 'id',
            },
            {
                title: 'Image',
                data: 'image',
                name: 'image',
            },
            {
                title: 'Code',
                data: 'code',
                name: 'code',
            },
            {
                title: 'Name',
                data: 'name',
                name: 'name',
            },
            {
                title: 'Active',
                data: 'active',
                name: 'active',
                orderable: false,
                searchable: false
            },
            {
                title: 'Action',
                data: 'action',
                name: 'action',
                orderable: false,
                searchable: false
            }
        ]
    });

    $(document).on('click', '.deleteSelSingle', function(e) {
        e.preventDefault();
        text = 'you want to delete ?';
        const swalWithBootstrapButtons = Swal.mixin({
            customClass: {
                confirmButton: 'btn btn-success',
                cancelButton: 'btn btn-danger'
            },
            buttonsStyling: false
        });
        swalWithBootstrapButtons
            .fire({
                title: 'Are you sure?',
                text: text,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes',
                cancelButtonText: 'No',
                reverseButtons: true
            })
            .then((result) => {
                if (result.isConfirmed) {
                    var favorite = [];
                    favorite.push($(this).attr('data-val'));
                    var ids = favorite.join(",");
                    $.ajax({
                        url: "{{ route('admin.colors.destroy') }}",
                        type: 'POST',
                        data: {
                            "ids": ids
                        },
                        success: function(res) {
                            if (res.status == true) {
                                url = "{{ route('admin.categories') }}";
                                window.location.href = url;
                            }
                        }
                    });
                } else if (result.dismiss === Swal.DismissReason.cancel) {
                    if (val == 0) {
                        $(this).prop('checked', false);
                    } else {
                        $(this).prop('checked', true);
                    }
                    swalWithBootstrapButtons.fire('Cancelled', '', 'error');
                }
            });
    });

    // active
    $(document).on('click', '.active_item', function() {
        val = $(this).attr('data-value');
        name = $(this).attr('data-name');
        id = $(this).attr('data-id');
        text = name + '! You want to deactivate ?';

        if (val == 0) {
            text = name + '! You want to activate ?';
        }
        const swalWithBootstrapButtons = Swal.mixin({
            customClass: {
                confirmButton: 'btn btn-success',
                cancelButton: 'btn btn-danger'
            },
            buttonsStyling: false
        });
        swalWithBootstrapButtons
            .fire({
                title: 'Are you sure?',
                text: text,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes',
                cancelButtonText: 'No',
                reverseButtons: true
            })
            .then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('admin.colors.updateActive') }}",
                        type: 'POST',
                        data: {
                            id: id,
                            value: val
                        },
                        success: function(res) {
                            if (res.status == true) {
                                swalWithBootstrapButtons.fire('Updated!', res.msg, 'success');

                            }
                        }
                    });


                } else if (result.dismiss === Swal.DismissReason.cancel) {
                    if (val == 0) {
                        $(this).prop('checked', false);
                    } else {
                        $(this).prop('checked', true);
                    }
                    swalWithBootstrapButtons.fire('Cancelled', '', 'error');
                }
            });
    });
</script>
@endpush