@extends('backend.layouts.app')
<style>
    .editBoarding {
        border: 1px solid #d7282f;
        background-color: #d7282f;
        color: #fff;
        font-size: 13px;
        border-radius: 4px;
        padding: 6px 12px;
    }

    .modal-header {
        justify-content: center !important;
    }

    .modal-title::before {
        display: none;
    }

    .modal-footer {
        justify-content: center !important;
    }

    .options {
        font-size: 16px;
        font-weight: 600;
        color: #000;
    }

    .members {
        font-size: 12px;
        font-weight: 400;
        color: #000;
        opacity: .8;
    }

    .add-new {
        border: 1px solid #838383 !important;
        color: #515151 !important;
        background: #fff !important;
        border-radius: 4px
    }

    .cancel {
        border: 1px solid #d7282f !important;
        color: #d7282f !important;
        background: #fff !important;
    }
</style>
@section('content')
<div class="aiz-main-content">
    <div class="parminders">
        <div class="aiz-titlebar text-left mt-2 mb-3">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h1 class="h3">Member Boarding Analytics </h1>
                </div>
                <div class="col-md-6">
                    <div style="display: flex;justify-content:flex-end">
                        <button type="button" class="btn btn-primary" data-toggle="modal"
                            data-target="#exampleModal">Edit Borading Options</button>
                        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                            aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">Boarding Options/List</h5>

                                    </div>
                                    <div class="modal-body">
                                        <div style="width:80%;margin:0 auto">
                                            @foreach ($boardingOptions as $k => $option)
                                            <div class="d-flex align-items-center justify-content-between mb-3">
                                                <div class="options">{{ Str::title(str_replace('_', ' ', $option->boarding_option)) }} <span class="members">({{$option->total_count}}
                                                        Members)</span></div>
                                                <div class="d-flex align-items-center justify-content-end"
                                                    style="gap:6px">
                                                    <!-- <div onclick="editOption({{$option->id}})"><img src="{{ url('/public/assets/img/edit-1.png') }}"
                                                            alt="edit"></div> -->
                                                    <div onclick="deleteOption({{$option->id, $option->is_deleted}})">
                                                        <img src=" {{ $option->is_deleted == 1
                                                                    ? url('/public/assets/img/del-1.png')
                                                                    : url('/public/assets/img/del-1.png') }}"
                                                            alt="del">
                                                    </div>
                                                    <div onclick="hideOption({{$option->id, $option->status}})">
                                                        <img src="{{ $option->is_deleted == 1
                                                                    ? url('/public/assets/img/hide-1.png')
                                                                    : url('/public/assets/img/hide-2.png') }}"
                                                            alt="hide">
                                                    </div>
                                                </div>
                                            </div>
                                            @endforeach

                                            <div class="d-flex justify-content-center mt-4">
                                                <button class="add-new" onclick="showAddDailog()">
                                                    Add New
                                                </button>
                                            </div>
                                            <div class="d-flex align-items-center justify-content-between" id="addDailog">
                                                <div class="options">Name</div>
                                                <div>
                                                    <input type="text" name="title" id="title" class="form-control"
                                                        placeholder="Name">
                                                </div>
                                                <div class="d-flex align-items-center " style="gap:6px">
                                                    <img src="{{ url('/public/assets/img/outline-check.png') }}"
                                                        alt="check" onclick="addOption()">
                                                    <img src="{{ url('/public/assets/img/outline-cross.png') }}"
                                                        alt="cross" onclick="clearOption()">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-primary" data-dismiss="modal">Done</button>
                                        <!-- <button type="button" class="btn btn-secondary cancel" data-dismiss="modal">
                                            Cancel
                                        </button> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="feature-page">
            <div class="page-content bg-white" style="padding: 1rem;">
                <div style="border-radius:12px">
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-6">
                            <div id="chart"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="page-content mb-0" style="padding: 1rem;">
                <div style="border-radius:12px">
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-6 p-0">
                            <div>
                                <h5>Member List </h5>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-6">
                            <div style="display: flex;align-items:center;justify-content:flex-end">
                                <div>filter:</div>
                                <div>Sort By:</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div class="row">
                    <div class="col-12">
                        <div class="table-section">
                            <div class="leadovertable">
                                <div class="admin-table table-freezed">
                                    <div class="table-responsive tbl-hgt-fixed" style="min-height:620px;">
                                        <table class="table m-0 " id="mytable">
                                            <thead>
                                                <tr>
                                                    <th width="1%">Sr. No.</th>
                                                    <th>User Name</th>
                                                    <th>Boarded From</th>
                                                    <th>Boarding Date</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($memberList as $key => $user)
                                                <tr>
                                                    <td>
                                                        {{$key+1 +($memberList->currentPage() - 1) * $memberList->perPage()}}
                                                    </td>
                                                    <td>
                                                        {{$user['name']}}
                                                    </td>
                                                    <td>
                                                        {{ Str::title(str_replace('_', ' ', $user['boardedFrom'])) }}
                                                    </td>
                                                    <td>
                                                        {{$user['boardedDate']}}
                                                    </td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="aiz-pagination">
                                        <div class="perPage">
                                            Total User(s): <strong>{{ $memberList->total()}}</strong>
                                        </div>
                                        {{ $memberList->appends(request()->input())->links() }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
    var options = {
        series: @json($series),
        chart: {
            width: 480,
            type: 'pie',
        },
        labels: @json($labels),
        responsive: [{
            breakpoint: 480,
            options: {
                chart: {
                    width: 200
                },
                legend: {
                    position: 'bottom'
                }
            }
        }]
    };

    var chart = new ApexCharts(document.querySelector("#chart"), options);
    chart.render();
</script>
<script type="text/javascript">
    $('#addDailog').attr('style', 'display: none !important');

    function showAddDailog() {
        $('#addDailog').show();
    }

    function clearOption() {
        $('#title').val() = "";
    }

    function addOption() {
        const title = $('#title').val();
        $.post('{{ route("boardingOtption.store") }}', {
                _token: '{{ @csrf_token() }}',
                title: title
            },
            function(data) {
                if (data.success == 200) {
                    AIZ.plugins.notify('success', data.message);
                    $('#title').val() = "";
                    $('#addDailog').attr('style', 'display: none !important');
                } else {
                    AIZ.plugins.notify('danger', 'Something went wrong');
                }
            });
    }

    function hideOption(id, status) {
        $.post('{{ route("boardingOtption.hide") }}', {
                _token: '{{ @csrf_token() }}',
                id: id,
                status: status
            },
            function(data) {
                if (data.success == 200) {
                    AIZ.plugins.notify('success', data.message);
                } else {
                    AIZ.plugins.notify('danger', data.message);
                }
            });
    }

    function deleteOption(id, is_deleted) {
        $.post('{{ route("boardingOtption.delete") }}', {
                _token: '{{ @csrf_token() }}',
                id: id,
                is_deleted: is_deleted
            },
            function(data) {
                if (data.success == 200) {
                    AIZ.plugins.notify('success', data.message);
                } else {
                    AIZ.plugins.notify('danger', data.message);
                }
            });
    }
</script>
@endsection