@extends('backend.layouts.master')

@section('style')
    @include('backend.layouts.datatable.style')
@endsection

@section('content')
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">Route List</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <section class="content">
            <div class="container-fluid">
                <div class="card">
                    <div class="card-body">
                    <table id="dataTable" class="table table-bordered table-inverse table-hover">
                        <thead>
                            <tr>
                                <th>Show</th>
                                <th>Route URL</th>
                                <th>Mathod </th>
                                <th>1st</th>
                                <th>2nd</th>
                                <th>3rd</th>
                                <th>4th</th>
                                <th>Name</th>
                                <th>Rank</th>
                                {{-- <th>Icon</th> --}}
                            </tr>
                        </thead>
                        <tbody>
                            {!! $html !!}
                        </tbody>
                    </table>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection

@section('script')
    @include('backend.layouts.datatable.script')

    <script>
        $(function () {
            $("#dataTable").DataTable({
                "paging": false,
                "responsive": true,
                "lengthChange": true,
                "autoWidth": false,
                // "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
            }).buttons().container().appendTo('#dataTable_wrapper .col-md-6:eq(0)');

            $('#dataTable tbody').on('click', '.btnShow', function () {
                var table = $(this).closest('tr');
                var buttonValue = $(this).val();
                $.ajax({
                    type: "POST",
                    url: "{{ route('master-permission-route-store') }}",
                    data: {
                        _token: "{{ csrf_token() }}",
                        url : table.find('td').eq(1).text(),
                        methods : table.find('td').eq(2).text(),
                        first : table.find('input').eq(0).val(),
                        second : table.find('input').eq(1).val(),
                        third : table.find('input').eq(2).val(),
                        fourth : table.find('input').eq(3).val(),
                        name : table.find('input').eq(4).val(),
                        rank : table.find('input').eq(5).val(),
                        show : buttonValue,
                        // icon : table.find('select').val()
                    },
                    success: function (response) {
                        toast(response.status, response.message);
                        if(buttonValue == 1) {
                            table.find('.btnShow').removeClass('btn-success').addClass('btn-danger').val(0).text('Hide');
                        } else {
                            table.find('.btnShow').removeClass('btn-danger').addClass('btn-success').val(1).text('Show');
                        }

                    },
                    error: function (response) {
                        toast('error', 'Route Added Failed');
                    }
                });
            });

            $('#dataTable tbody').on('click', '.btnUpdate', function () {
                // get all the value from the table and send it to the controller
                var table = $('#dataTable tbody');
                for (let i = 0; i < table.find('tr').length; i++) {
                    $.ajax({
                        type: "POST",
                        url: "{{ route('master-permission-route-store') }}",
                        data: {
                            _token: "{{ csrf_token() }}",
                            url : table.find('tr').eq(i).find('td').eq(1).text(),
                            methods : table.find('tr').eq(i).find('td').eq(2).text(),
                            first : table.find('tr').eq(i).find('input').eq(0).val(),
                            second : table.find('tr').eq(i).find('input').eq(1).val(),
                            third : table.find('tr').eq(i).find('input').eq(2).val(),
                            fourth : table.find('tr').eq(i).find('input').eq(3).val(),
                            name : table.find('tr').eq(i).find('input').eq(4).val(),
                            rank : table.find('tr').eq(i).find('input').eq(5).val(),
                        },
                        success: function (response) {
                            toast(response.status, response.message);
                        },
                        error: function (response) {
                            toast('error', 'Route Added Failed');
                        }
                    });
                }
            });
        });

    </script>
@endsection