@extends('layout.default')

@section('content')
    <x-card>
        <x-slot name="title">
            <h3 class="card-title align-items-start flex-column">
                <span class="card-label font-weight-bolder">{{ $page_title }}</span>
            </h3>
        </x-slot>
        <x-slot name="toolbar">
            @can('projects.delete')
                <button onclick="confirmBulkDestroy()" type="button" class="btn btn-danger font-weight-bold mr-2 other-actions"
                    disabled>
                    <i class="fa fa-trash icon-sm"></i> {{ __('Delete Selected') }}</button>
            @endcan
            @can('projects.create')
                <a href="{{ route('projects.create') }}" role="button" class="btn btn-primary font-weight-bolder">
                    <i class="fas fa-plus icon-sm"></i> {{ __('New Data') }}</a>
            @endcan
        </x-slot>

        <div class="font-weight-bolder font-size-lg mb-2">Tampilkan Data Berdasarkan: </div>
        <div class="row align-items-center">
            <div class="col-md-3 my-2 my-md-0">
                <x-inputs.form-group for="project_year" label="{{ __('Tahun') }}">
                    <x-inputs.yearpicker id="project_year" name="project_year" value="{{ date('Y') }}" />
                </x-inputs.form-group>
            </div>
            <div class="col-md-3 my-2 my-md-0">
                <x-inputs.form-group for="branch_id" label="{{ __('Cabang') }}">
                    <x-inputs.select2 id="branch_id" name="branch_id">
                        <option value="ALL" selected>{{ __('ALL') }}</option>
                        @foreach ($branches as $item)
                            <option value="{{ $item->id }}">{{ $item->name }}</option>
                        @endforeach
                    </x-inputs.select2>
                </x-inputs.form-group>
            </div>
            <div class="col-md-3 my-2 my-md-0">
                <x-inputs.form-group for="field_id" label="{{ __('Bidang') }}">
                    <x-inputs.select2 id="field_id" name="field_id">
                        <option value="ALL" selected>{{ __('ALL') }}</option>
                    </x-inputs.select2>
                </x-inputs.form-group>
            </div>
            <div class="col-md-3 my-2 my-md-0">
                <x-inputs.form-group for="status" label="{{ __('Status') }}">
                    <x-inputs.select2 id="status" name="status">
                        <option value="ALL" selected>{{ __('ALL') }}</option>
                        @foreach ($status as $item)
                            <option value="{{ $item->value }}">{{ $item->label() }}</option>
                        @endforeach
                    </x-inputs.select2>
                </x-inputs.form-group>
            </div>
            {{-- <div class="col-md-4 my-2 my-md-0">
                <x-inputs.form-group for="project_price_range" label="{{ __('Range Nilai Project (Rp)') }}">
                    <div id="project_price_range" class="nouislider mx-5 mt-5"></div>
                    <input type="hidden" id="project_price_range_start">
                    <input type="hidden" id="project_price_range_end">
                </x-inputs.form-group>
            </div> --}}
        </div>

        <div class="row align-items-center mb-5">
            <div class="col-md-10">
                <div class="input-icon">
                    <input type="text" class="form-control" placeholder="{{ __('Type here to search') }}"
                        id="search-table" autofocus />
                    <span><i class="flaticon2-search-1 text-muted"></i></span>
                </div>
            </div>
            <div class="col-md-2">
                <button class="btn btn-secondary btn-secondary--icon btn-block font-weight-bold"
                    onclick="reloadTable()"><span><i class="la la-sync-alt"></i>{{ __('Reload') }}</span>
                </button>
            </div>
        </div>

        <table class="table table-hover rounded" id="table">
            <thead class="thead-light">
                <tr>
                    <th></th>
                    <th>{{ __('Project') }}</th>
                    <th>{{ __('Klien') }}</th>
                    <th>{{ __('Nilai') }}</th>
                    <th>{{ __('Project Manager') }}</th>
                    <th>{{ __('Status') }}</th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </x-card>
    @include('project._modal-granted-fields')
@endsection

{{-- Styles Section --}}
@push('page_style')
    <link href="{{ asset('plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />
@endpush

@push('page_script')
    <script src="{{ asset('plugins/custom/datatables/datatables.bundle.js') }}" type="text/javascript"></script>
    <script type="text/javascript">
        const table = $("#table");
        const fields = @json($fields);

        $(document).ready(function() {
            table.DataTable({
                responsive: true,
                serverSide: true,
                processing: true,
                ajax: {
                    url: "{{ route('projects.datatable') }}",
                    type: "GET",
                    data: function(d) {
                        d.project_year = $("#project_year").val();
                        d.branch_id = $("#branch_id").val();
                        d.field_id = $("#field_id").val();
                        d.status = $("#status").val();
                    }
                },
                responsive: true,
                dom: `<'row'<'col-sm-12'tr>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 dataTables_pager'lp>>`,
                lengthMenu: [10, 25, 50, 100],
                pageLength: 10,
                language: {
                    lengthMenu: "Display _MENU_"
                },
                // scrollX: true,
                scrollCollapse: true,
                order: [
                    [1, "asc"]
                ],
                headerCallback: function(thead, data, start, end, display) {
                    thead.getElementsByTagName('th')[0].innerHTML = `
                <label class="checkbox checkbox-single">
                    <input type="checkbox" value="" class="select-all-row" />
                    <span></span>
                </label>`;
                },
                columnDefs: [{
                        orderable: false,
                        targets: [0, -1, -2]
                    },
                    {
                        targets: 0,
                        className: "dt-left",
                        render: function(data, type, row, meta) {
                            return `
                        <label class="checkbox checkbox-single">
                            <input type="checkbox" value="${data}" class="select-row"/>
                            <span></span>
                        </label>`;
                        },
                    },
                    {
                        targets: 1,
                        className: "dt-left",
                        render: function(data, type, row, meta) {
                            return `
                            <div>
                                <div class="font-weight-bolder font-size-lg mb-0">${data} ${row.field_access_count ? '<button data-url="'+(row.show_granted_fields_url)+'" onclick="loadGrantedFields($(this))" type="button" class="btn btn-icon"><span class="fas fa-user-friends text-muted icon-sm"></span></button>' : ''}</div>
                                <div class="text-dark-50">Bidang: ${row.field} - ${row.branch}</div>
                                <div class="text-dark-50">Tahun: ${row.project_year??'N/A'}</div>
                                <div class="text-dark-50">No Order: ${row.order_number??'N/A'}</div>
                            </div>`;
                        }
                    },
                    {
                        targets: 2,
                        className: "dt-left",
                        render: function(data, type, row, meta) {
                            return `
                            <div>
                                <div class="font-weight-bold mb-0">${data}</div>
                                <div href="#" class="text-dark-50">${row.region_name}</div>
                            </div>`;
                        }
                    },
                    {
                        targets: 3,
                        className: "dt-right",
                        render: function(data, type, row, meta) {
                            return type === 'sort' ? data : (data ? MyApp.numberFormat(data, 0, ',',
                                '.') : 'N/A');
                        }
                    },
                    {
                        targets: -3,
                        className: "dt-left",
                        render: function(data, type, row, meta) {
                            return `<span class="label font-weight-bold  label-light-${row.status_color} label-inline">${row.status_label}</span>`;
                        }
                    },
                    {
                        targets: -2,
                        className: "dt-left",
                        render: function(data, type, row, meta) {
                            const progress = row
                                .folders_count ? Math.floor(row.filled_folders_count / row
                                    .folders_count * 100) : 0;
                            return `
                            <div class="btn-group mb-3" role="group" aria-label="Basic example">
                                <button type="button" class="btn btn-outline-primary btn-sm font-weight-bold"
                                    title="Jumlah Folder" data-toggle="tooltip">
                                    <span class="fas fa-folder"></span> ${row.folders_count}
                                </button>
                                <button type="button" class="btn btn-outline-primary btn-sm font-weight-bold"
                                    title="Jumlah File" data-toggle="tooltip">
                                    <span class="fas fa-file"></span> ${row.folder_media_count + row.media_count}
                                </button>
                            </div>
                            <div title="${row.filled_folders_count} dari ${row.folders_count} telah diisi" data-toggle="tooltip">
                                <div class="progress progress-xs mb-2">
                                    <div class="progress-bar bg-success" role="progressbar" style="width: ${progress}%;" aria-valuenow="${progress}" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <span class="font-weight-bold text-dark-50">${progress}% Folder Terisi</span>
                            </div>
                            `;
                        }
                    },
                    {
                        targets: -1,
                        className: "dt-left",
                        render: function(data, type, row, meta) {
                            const showLink = `<a href="${row.show_url}" class="navi-link">
                                                <span class="navi-icon"><i class="fas fa-eye"></i></span>
                                                <span class="navi-text">Lihat Detail</span>
                                            </a>`;
                            const editLink = `<a href="${row.edit_url}" class="navi-link">
                                                <span class="navi-icon"><i class="fas fa-edit"></i></span>
                                                <span class="navi-text">Edit</span>
                                            </a>`;
                            const settingAccessLink = `<a href="${row.setting_access_url}" class="navi-link">
                                                <span class="navi-icon"><i class="fas fa-cogs"></i></span>
                                                <span class="navi-text">Setting Akses</span>
                                            </a>`;
                            const manageFile = `<a href="${row.manage_file_url}" class="navi-link">
                                                <span class="navi-icon"><i class="fas fa-folder"></i></span>
                                                <span class="navi-text">Kelola File</span>
                                            </a>`;
                            const searchFile = `<a href="${row.search_file_url}" class="navi-link">
                                                <span class="navi-icon"><i class="fas fa-search"></i></span>
                                                <span class="navi-text">Cari Berkas</span>
                                            </a>`;
                            const manageFileHistory = `<a href="${row.manage_file_history_url}" class="navi-link">
                                                <span class="navi-icon"><i class="fas fa-history"></i></span>
                                                <span class="navi-text">Riwayat Kelola File</span>
                                            </a>`;

                            const actionDropdown = `
                            <div class="dropdown dropdown-inline">
                                <a href="javascript:;" class="btn btn-sm btn-light-primary btn-icon mr-2"
                                    data-toggle="dropdown">
                                    <i class="fas fa-cog"></i>
                                </a>
                                <div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
                                    <ul class="navi flex-column navi-hover py-2">
                                        <li class="navi-header font-weight-bolder text-uppercase font-size-xs text-primary pb-2">
                                            {{ __('Pilih aksi') }}:
                                        </li>
                                        <li class="navi-item">
                                            ${row.show_url ? showLink : ''}
                                            ${row.edit_url ? editLink : ''}
                                            ${row.setting_access_url ? settingAccessLink : ''}
                                            ${row.manage_file_url ? manageFile : ''}
                                            ${row.search_file_url ? searchFile : ''}
                                            ${row.manage_file_history_url ? manageFileHistory : ''}
                                        </li>
                                    </ul>
                                </div>
                            </div>`;
                            return actionDropdown
                        },
                    },
                ],
                columns: [{
                        width: "5%",
                        data: "id",
                        column: "projects.id",
                        searchable: false,
                    },
                    {
                        width: "20%",
                        data: "name",
                        column: "name",
                    },
                    {
                        width: "15%",
                        data: "client_name",
                        column: "client_name",
                    },
                    {
                        width: "10%",
                        data: "project_price",
                        column: "project_price",
                    },
                    {
                        width: "15%",
                        data: "project_manager",
                        column: "project_manager",
                    },
                    {
                        width: "12%",
                        data: "status",
                        column: "status",
                    },
                    {
                        width: "20%",
                        data: null,
                        searchable: false,
                    },
                    {
                        width: "5%",
                        data: null,
                        searchable: false,
                    }
                ],
                drawCallback: function() {
                    KTApp.initTooltips();
                    otherActionState();
                },
            });

            table.on("click", ".select-all-row", function() {
                let isChecked = $(this).is(":checked");
                let childCheckbox = $(this).parents('table').find(".select-row");
                childCheckbox.prop("checked", isChecked);
                childCheckbox.each(function() {
                    if (isChecked) {
                        $(this).parents('tr').addClass('active');
                    } else {
                        $(this).parents('tr').removeClass('active');
                    }
                });
                otherActionState();
            });

            table.on("click", ".select-row", function() {
                $(this).parents("tr").toggleClass("active");
                let isAllChecked = countChecked() == countRow();
                $(".select-all-row").prop("checked", isAllChecked);
                otherActionState();
            });

            $("#search-table").on("keyup", function() {
                table.DataTable().search($(this).val()).draw();
            });

            $('#branch_id').on('select2:select', function() {
                const selectedBranch = $(this).val();
                const filteredFields = fields.filter((field) => field.branch_id == selectedBranch);

                $('#field_id').html('<option value="ALL" selected>ALL</option>' + filteredFields.map((
                    field) => {
                    return `<option value="${field.id}">${field.name}</option>`
                }).join(''));

                reloadTable();
            });

            $('#field_id, #status').on('select2:select', reloadTable);
            $('#project_year-element').on('change.datetimepicker', reloadTable);

            // initProjectPriceRangeFilter();
        });

        function countChecked() {
            return table.find(".select-row:checked").length;
        }

        function countRow() {
            return table.find("tbody tr").length;
        }

        function reloadTable() {
            table.DataTable().ajax.reload();
        }

        function otherActionState() {
            $(".other-actions").prop("disabled", countChecked() == 0);
        }

        function confirmBulkDestroy() {
            return MyApp.confirm("{{ __('Confirm') }}",
                "{{ __('Are you sure to delete selected data?') }}", "warning", bulkDestroy);
        }

        function bulkDestroy() {
            let selectedRow = [];
            table.find(".select-row:checked").each(function() {
                selectedRow.push($(this).val());
            });
            let data = {
                projects: selectedRow,
            };
            MyApp.ajaxPost("{{ route('projects.bulk_destroy') }}", data,
                function(response) {
                    MyApp.notify("{{ __('Delete') }}",
                        "{{ __('Data deleted successfully.') }}",
                        "success");
                    reloadTable();
                });
        }

        function loadGrantedFields(button) {
            MyApp.ajaxGet(button.data('url'), null, (response) => showGrantedFields(response));
        }

        // function initProjectPriceRangeFilter() {
        //     noUiSlider.create(slider, {
        //         start: [0, 0],
        //         connect: true,
        //         step: 1000000,
        //         format: wNumb({
        //             decimals: 0,
        //             thousand: '.',
        //         }),
        //         tooltips: [true, wNumb({
        //             decimals: 0,
        //             thousand: '.',
        //         })],
        //         range: {
        //             'min': [0],
        //             'max': [50000000]
        //         },
        //     });

        //     // init slider input
        //     var projectPriceRangeStart = $('#project_price_range_start');
        //     var projectPriceRangeEnd = $('#project_price_range_end');
        //     var sliderInputs = [projectPriceRangeStart, projectPriceRangeEnd];

        //     slider.noUiSlider.on('update', function(values, handle) {
        //         sliderInputs[handle].val(values[handle].replaceAll('.', ''));
        //     });
        // }
    </script>
@endpush