@extends('backend.layouts.app')

@section('title',__('label.listing_sant_page_title').' | '.env('APP_NAME'))

@push('after-styles')
    <!-- DataTables -->
    <link href="{{ asset('public/js/datatable/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css"/>
@endpush

@section('breadcrumb')
    <div class="subheader py-2 py-lg-4 subheader-solid" id="kt_subheader">
        <div class="container-fluid d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
            <!--begin::Info-->
            <div class="d-flex align-items-center flex-wrap mr-1">
                <!--begin::Page Heading-->
                <div class="d-flex align-items-baseline mr-5">
                    <!--begin::Page Title-->
                    <!--end::Page Title-->
                    <!--begin::Breadcrumb-->
                    <ul class="breadcrumb breadcrumb-transparent breadcrumb-dot font-weight-bold p-0 my-2 font-size-sm">
                        <li class="breadcrumb-item active">
                            <a href="{{ route('admin.dashboard') }}" class="text-muted">{{ __('breadcrumb.dashboard') }}</a>
                        </li> 
                        <li class="breadcrumb-item">
                            {{ __('breadcrumb.sants') }}
                        </li>
                    </ul>
                    <!--end::Breadcrumb-->
                </div>
                <!--end::Page Heading-->
            </div>
            <!--end::Info-->
        </div>
    </div>
@endsection

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card card-custom">
                    <div class="card-header flex-wrap border-0 pt-6 pb-0">
                        <div class="card-title">
                            <h3>{{ __('label.listing_sant_table_title') }}</h3>
                        </div>

                        <div class="card-toolbar">
                            <!-- begin::Button -->
                            <form id="import" action="{{route('admin.sant.import-sant')}}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <input type="file" id="file" class="file-input" name="file" accept=".xlsx, .csv, .xls" data-original-title="import" required>
                                <button class="btn btn-success font-weight-bolder mr-2" type="submit">
                                    <i class="fas fa-upload fa-sm"></i> {{ __('buttons.import') }}
                                </button>
                            </form>
                            <!--end::Button-->
                            <!-- begin::Button -->
                            <a href="{{ route('admin.sant.create') }}" class="btn btn-primary font-weight-bolder">
                                <i class="fas fa-plus fa-sm"></i> {{ __('buttons.create_sant') }}
                            </a>
                            <!--end::Button-->
                        </div>
                    </div>
                    <div style="text-align: right; margin-right:25px;">
                        <a href="{{ asset('assets/sample_sant.xlsx') }}" class="btn btn-sm btn-secondary font-weight-bolder">
                            <i class="fas fa-download fa-sm"></i> Download Sample File
                        </a>
                    </div>

                    <div class="card-body">
                        <div class="mb-7">
                            <div class="row align-items-center">
                                <div class="col-lg-12 col-xl-12">
                                    <div class="row align-items-center">
                                    <div class="col-md-3 my-2 my-md-0">
                                            <div class="d-flex align-items-center">
                                                {{ Form::text('name',null,['class' => 'form-control selectpicker datatable-input change-action','id' => 'title','placeholder' => __('label.search')]) }}
                                            </div>
                                        </div>
                                        <div class="col-md-2 my-2 my-md-0">
                                            <div class="d-flex align-items-center">
                                                {{ Form::select('status',['2' => 'Active','1' => 'Inactive'],null,['class' => 'form-control selectpicker datatable-input change-action','id' => 'status', 'data-live-search' => 'true','data-allow-clear' => 'true', 'title' => __('placeholder.select_status')]) }}
                                            </div>
                                        </div>

                                        <div class="col-md-2 my-2 my-md-0">
                                            <div class="d-flex align-items-center">
                                                {{ Form::select('verification_status',['1' => 'Approved', '2' => 'In-Review', '3' => 'Sent Back', '4' => 'Approved & In-Review', '5' => 'Approved & Sent back', '6' => 'Rejected'],null,['class' => 'form-control selectpicker datatable-input change-action','id' => 'status', 'data-live-search' => 'true','data-allow-clear' => 'true', 'title' => __('placeholder.select_verification_status')]) }}
                                            </div>
                                        </div>

                                        <div class="col-md-2 my-2 my-md-0">
                                            <div class="d-flex align-items-center">
                                                {{ Form::select('dharma_id', $dharmas, null, ['class' => 'form-control selectpicker datatable-input change-action','id' => 'dharma_id', 'data-live-search' => 'true','data-allow-clear' => 'true', 'title' => __('placeholder.sant_select_dharma')]) }}
                                            </div>
                                        </div>

                                        <div class="col-md-2 my-2 my-md-0">
                                            <div class="d-flex align-items-center">
                                                {{ Form::select('sampraday_id', $sampradaies, null, ['class' => 'form-control selectpicker datatable-input change-action','id' => 'sampraday_id', 'data-live-search' => 'true','title' => __('placeholder.sant_select_sampraday')]) }}
                                            </div>
                                        </div>

                                        <div class="col-md-3 my-md-0">
                                            <button class="btn btn-secondary btn-secondary--icon" id="kt_reset" style="display: none; margin-top:10px;">
                                                <span>
                                                    <i class="la la-close"></i>
                                                    <span>{{ __('buttons.reset') }}</span>
                                                </span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--begin: Selected Rows Group Action Form-->
                        <div class="mb-2 multiple-actions" id="checkboxActionDropdown">
                            <div class="d-flex align-items-center">
                                <div class="font-weight-bold text-danger mr-3">Selected
                                    <span id="datatableSelectedRecords">0</span> records:</div>
                                <div class="dropdown mr-2">
                                    <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown">{{ __('label.update_action') }}</button>
                                    <div class="dropdown-menu dropdown-menu-sm">
                                        <ul class="nav nav-hover flex-column">
                                            <li class="nav-item">
                                                <a href="javascript:void(0);" data-value="active" class="nav-link action-type">
                                                    <span class="nav-text">{{ __('label.active') }}</span>
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a href="javascript:void(0);" data-value="inactive" class="nav-link action-type">
                                                    <span class="nav-text">{{ __('label.inactive') }}</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <!-- <a href="javascript:void(0);" class="btn btn-sm btn-danger mr-2 action-type" data-value="delete">Delete All</a> -->
                            </div>
                        </div>
                        <!--end: Selected Rows Group Action Form-->
                        <div id="kt_datatable_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer admin-table">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="datatable datatable-default datatable-bordered datatable-loaded">
                                        <table class="datatable-bordered datatable-head-custom datatable-table table-hover table table-hover responsive nowrap"
                                               id="users-table">
                                            <thead>
                                            <tr>
                                                <th>
                                                    <span style="width: 20px;">
                                                        <label class="checkbox checkbox-single">
                                                            <input type="checkbox"
                                                                   name="checkbox_action[]" id="checkbox-all"/>&nbsp;<span></span>
                                                        </label>
                                                    </span>
                                                </th>
                                                <th>{{ __('label.sant_listing_heading_2') }}</th>
                                                <th>{{ __('label.sant_listing_heading_3') }}</th>
                                                <th>{{ __('label.sant_listing_heading_4') }}</th>
                                                <th>{{ __('label.sant_listing_heading_5') }}</th>
                                                {{-- <th>{{ __('label.created_at') }}</th> --}}
                                                <th>{{ __('label.updated_at') }}</th>
                                                <th>{{ __('label.thana') }}</th>
                                                {{-- <th class="text-wrap">{{ __('label.approved_thana') }}</th>
                                                <th class="text-wrap">{{ __('label.pending_thana') }}</th> --}}
                                                <th class="text-wrap">{{ __('label.sant_verification_status') }}</th>
                                                <th>{{ __('label.sant_listing_heading_6') }}</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('after-scripts')
    <!-- DataTables -->
    <script src="{{ asset('public/js/datatable/jquery.dataTables.min.js') }}"></script>
    {{-- <script src="https://cdn.datatables.net/responsive/1.0.4/js/dataTables.responsive.js"></script> --}}
    <script src="{{ asset('public/js/datatable/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('public/js/datatable/datatable-skeleton.js?v='.time()) }}"></script>
    {{-- <script>
        $(document).ready(function() {
  $("#users-table").DataTable({
    aaSorting: [],
    responsive: true,

    columnDefs: [
      {
        responsivePriority: 1,
        targets: 0
      },
      {
        responsivePriority: 2,
        targets: -1
      }
    ]
  });

  $(".dataTables_filter input")
    .attr("placeholder", "Search here...")
    .css({
      width: "300px",
      display: "inline-block"
    });

  $('[data-toggle="tooltip"]').tooltip();
});
</script> --}}
    <script>

$.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': "{{ csrf_token() }}"
            }
        });

        function getSampraday() {
            $.ajax({
                url: "{{ route('admin.dharma.sampradaies') }}",
                type: "POST",
                data: {
                    'dharma_id': $('#dharma_id').val(),
                },
                success: function (data) {
                    $('#sampraday_id').empty();
                    console.log(data);
                    var emptyOption = new Option('Select the sampraday name', '', false, false);
                    // $('#sampraday_id').append(emptyOption);
                    $.each(data.sampradaies, function (index, sampraday) {
                        console.log(sampraday);
                        if (dharma_id == sampraday.id) {
                            var newOption = new Option(sampraday.name, sampraday.id, true, true);
                        } else {
                            var newOption = new Option(sampraday.name, sampraday.id, false, false);
                        }
                        $('#sampraday_id').append(newOption);
                    });
                    $('#sampraday_id').selectpicker('refresh');
                }
            })
        }

        $(document).on('keyup', '#title', function () {
            if ($('#title').val() === '' && $('#status').val() === '' && $('#dharma_id').val() === '' && $('#sampraday_id').val() === '') {
                $('#kt_reset').hide();
            } else {
                $('#kt_reset').show();
            }
        });

        $(document).on('change', '#status', function () {
            if ($('#title').val() === '' && $('#status').val() === '' && $('#verification_status').val() === '' && $('#dharma_id').val() === '' && $('#sampraday_id').val() === '') {
                $('#kt_reset').hide();
            } else {
                $('#kt_reset').show();
            }
        });

        $(document).on('change', '#verification_status', function () {
            if ($('#title').val() === '' && $('#status').val() === '' && $('#verification_status').val() === '' && $('#dharma_id').val() === '' && $('#sampraday_id').val() === '') {
                $('#kt_reset').hide();
            } else {
                $('#kt_reset').show();
            }
        });

        $(document).on('change', '#dharma_id', function () {
            if ($('#title').val() === '' && $('#status').val() === '' && $('#verification_status').val() === '' && $('#dharma_id').val() === '' && $('#sampraday_id').val() === '') {
                $('#kt_reset').hide();
            } else {
                $('#kt_reset').show();
            }
        });

        $(document).on('change', '#dharma_id', function (e) {
            getSampraday();
        });

        $(document).on('change', '#sampraday_id', function () {
            if ($('#title').val() === '' && $('#status').val() === '' && $('#verification_status').val() === '' && $('#dharma_id').val() === '' && $('#sampraday_id').val() === '') {
                $('#kt_reset').hide();
            } else {
                $('#kt_reset').show();
            }
        });

        $(document).on('click', '#kt_reset', function () {
            $('#kt_reset').hide();
            $('#sampraday_id').empty();
            $('#sampraday_id').selectpicker('refresh');
        });

        customDataTableWidget.configuration({
            element: '#users-table',
            listingUrl: "{{ route('admin.sant.get-listing') }}",
            deleteUrl: "{{ route("admin.sant.destroy", ":id") }}",
            multipleActionUrl: "{{ route('admin.sant.grid.records.action') }}",
            columns: [
                {
                    data: 'checkbox_action',
                    name: 'checkbox_action',
                    sortable: false
                },
                {
                    data: 'name',
                    name: 'name',
                    class: "text-wrap",
                    searchable: true
                },
                {
                    data: 'sampraday_id',
                    name: 'sampraday_id',
                    class: "text-wrap",
                    searchable: true
                },
                {
                    data: 'dharma_id',
                    name: 'dharma_id',
                    searchable: true
                },
                {
                    data: 'status',
                    name: 'status',
                },
                // {
                //     data: 'created_at',
                //     name: 'created_at',
                // },
                {
                    data: 'updated_at',
                    name: 'updated_at',
                },
                
                {
                    data: 'thana',
                    name: 'thana',
                },
                // {
                //     data: 'approved_thana',
                //     name: 'approved_thana',
                // },
                // {
                //     data: 'pending_thana',
                //     name: 'pending_thana',
                // },
                {
                    data: 'verification_status',
                    name: 'verification_status',
                },
                {
                    data: 'action',
                    name: 'action',
                    sortable: false,
                    class:'text-right ws-nowrap action-col'
                }
                
            ],
            search: [
                {
                    key: 'status',
                    type: 'select'
                },
                {
                    key: 'verification_status',
                    type: 'select'
                },
                {
                    key: 'dharma_id',
                    type: 'select'
                },
                {
                    key: 'sampraday_id',
                    type: 'select'
                },
                {
                    key: 'name',
                    type: 'text'
                }
            ],
            defaultSortingIndex: 5,
            defaultSortingOrder: 'desc'
        });
    </script>
@endsection