@extends('admin.layout.master')
@section('title',  'Card Member List')
@section('custom_style')
    <style>
        .table th,
        .table td {
            padding: 0rem;
            padding-left: 0.35rem; 
        } 
        .custom-td {
            white-space:pre-wrap;
            word-wrap:break-word;
        }
    </style>
@endsection
@section('content')
    <div class="card sina-card">
        <div class="card-header card-header-s d-flex flex-wrap align-items-center">
            <h4 class="col-6 pl-0">{{__('obs.card_member_list')}}</h4>
        </div>
        <div class="card-body pt-2">
            <div class="row justify-content-center mb-4">
                <div class="col-md-3 col-6">
                    <label>{{__('obs.name')}}</label>
                    <select name="party_id" id="party_id" style="width: 100%" class="form-control party_live"></select>
                </div>
                <div class="col-md-3 col-6">
                    <label for="card_number">{{__('obs.card_number')}}</label>
                    <input type="text" name="card_number" id="card_number" class="form-control">
                </div>
                <div class="col-md-2 col-6">
                    <label for="grade_id">{{__('obs.grade')}}</label>
                    <select name="grade_id" class="form-control select_2" id="grade_id"> 
                        <option value=""></option>
                        @forelse ($card_grade as $item)
                            <option value="{{ $item->id }}">{{ $item->name_eng }}</option>
                        @empty
                            
                        @endforelse
                    </select>
                </div>
                <div class="col-md-2 col-6">
                    <label for="status">{{__('obs.status')}}</label>
                    <select name="status" class="form-control select_2" id="status"> 
                        <option value=""></option>
                        <option value="1">{{__('obs.active')}}</option>
                        <option value="0">{{__('obs.inactive')}}</option>
                    </select>
                </div>
                <div class="col-md-1 col-6"> <br>
                    <button class="btn btn-danger btn-sm" onclick="getData()"><i class="fas fa-search"></i></button>
                </div>  
            </div>
            <div class="row">
                <div class="col-md-12" id="div_tbl"> </div>
            </div>
            @include('admin.global.loader')
        </div>
    </div>
    <div class="modal fade bd-example-modal-lg" id="card_view" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalLabel">{{__('obs.member_card_preview')}}</h5>
                    <button type="button" class="close" data-dismiss="modal" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div> 
                <div class="modal-body text-center" id="card_data"> </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" onclick="$('#card_data').printThis()">{{__('obs.print')}}</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{__('obs.close')}}</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script') 
    <script type="text/javascript" src="{{ asset('inventory/blade_js/common.js') }}"></script>
    <script>
        const store_setting = @json(store_info());
        const card_grade = @json($card_grade->pluck('name_eng', 'id')->toArray());
        let other = {};
        let memberList = [];
        $(document).ready(function() {
            other.card_number = 1;
            select2('select_2');
            partySearch('party_live', 2, true, other); //only card member
        });

        const getData = () => ajaxCall('/card-member/index', 'GET',
            {
                party_id: $('#party_id').val(),
                card_number: $('#card_number').val(),
                status: $('#status').val(),
                grade_id: $('#grade_id').val()
            }, setTableData
        );

        const setTableData = (data) => {
            memberList = data;
            let html = `<table class="table table-hover table-bordered" id="tbl" style="width:100%">
                <thead class="thead-dark">
                    <tr>
                        <th class="text-center">#</th>
                        <th class="text-center">{{__('obs.name')}}</th>
                        <th class="text-center">{{__('obs.email')}}</th>
                        <th class="text-center">{{__('obs.mobile')}}</th>
                        <th class="text-center">{{__('obs.card_no')}}</th>
                        <th class="text-center">{{__('obs.grade')}}</th>
                        <th class="text-center">{{__('obs.action')}}</th>
                    </tr>
                </thead>
            <tbody id="tbl_body">`
            for (const [i, row] of data.entries()) {
                html += `<tr>
                    <td>${i+1}</td>
                    <td>${row.name_eng}</td>
                    <td>${row.email??''}</td>
                    <td>${row.mobile??''}</td>
                    <td class="text-center">${row.card_number??''}</td>
                    <td class="text-center">${card_grade[row.grade_id]}</td>
                    <td class="text-center">
                        <div class="form-group d-flex align-item-center justify-content-center mb-0">
                            <a onclick="changeStatus(${ row.id }, 'status')" id="status${row.id}" style="font-size: 25px;" title="Status">
                                <i class="text-${ (row.status == 1 ? 'success' : 'danger') } fas fa-toggle-${ (row.status == 1 ? 'on' : 'off') }"></i>
                            </a>
                            <a class="btn btn-hover text-info pt-1" title="Print"><i class="fas fa-print" onclick="viewCard(${row.id})"></i></a>
                        </div>
                    </td>
                </tr>`;
            }
            html += `</tbody>
            </table>`;
            $('#div_tbl').html(html);
            $('#tbl').dataTable();
            $('#loader').hide();
        }

        const changeStatus = (id, field) => {
            const callback = data => {
                $('#'+field+id).html('<i class="text-'+ (data[field] == 1 ? 'success' : 'danger') +' fas fa-toggle-'+ (data[field] == 1 ? 'on' : 'off') +'"></i>');
            }
            alert(field);
            ajaxCall('/party-status-change', 'GET', {id: id,field:field}, callback);
        }

        const viewCard = async id => {
            const party = await searchedItemById(id, memberList);
            console.log(party);
            $('#card_data').html(`
                <h5 class="form-control">${ party.name_eng }</h5>
                <h5 class="form-control">${ party.card_number }</h5>
                <h5 class="form-control">${ GetFormattedDate(party.expiry_date, 'dmy') }</h5>
            `);
            $('#card_view').modal('show');
        }
    </script>
@endsection