@extends('layouts.admin.master')

@section('title', 'Member')
@push('css')
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <link rel="stylesheet" href="{{ asset('/assets/css/datepicker.css') }}"/>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        /* th all sides border */
        th {
            border: 1px solid #e6edef;
            padding: 8px;
        }

        /* tr bottom border only */
        tbody tr {
            border-bottom: 1px solid #e6edef;
        }

        /* td without borders */
        td {
            border: none;
            padding: 8px;
        }

        /* remove tbody border */
        tbody {
            border: none;
        }

    </style>
@endpush
@section('content')
    <div class="content">
        <div class="container-fluid">

            @if (session('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif
            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif
            <div class="row">
                <div class="">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="">
                            <h4 class="mb-1">Members</h4>
                            <nav style="--bs-breadcrumb-divider: '|';"  aria-label="breadcrumb" >
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="#!" class="text-primary">Member</a></li>
                                    <li class="breadcrumb-item active" aria-current="page">List</li>
                                </ol>
                            </nav>
                        </div>
                        <div>
                            <a href="{{route('member.create')}}" class="btn btn-primary">Add Member</a>
                        </div>
                    </div>


                    <div>
                        <form id="search">
                            <div class="mt-4 search-collapse row g-3">
                                <div class="search-input-div col-lg-3 col-md-4 col-sm-6">
                                    <label for="name">Name</label>
                                    <input type="text" placeholder="Name" id="name" class="form-control">
                                </div>
                                <div class="search-input-div col-lg-3 col-md-4 col-sm-6">
                                    <label for="phone">Phone</label>
                                    <input type="text" placeholder="Phone Number" id="phone" class="form-control">
                                </div>
                                <div class="search-input-div col-lg-3 col-md-4 col-sm-6">
                                    <label for="district">District</label>
                                    <select id="district_id" class="form-control" name="district_id" data-placeholder="--select--" data-allowClear='true'>
                                        <option value="">--select--</option>
                                        @foreach($districts as $row)
                                            <option value="{{$row->id}}">{{$row->district_name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="search-input-div col-lg-3 col-md-4 col-sm-6">
                                    <label for="block">Blocks</label>
                                    <select id="block_id" class="form-control" name="block_id" data-placeholder="--select--" data-allowClear='true'>
                                        <option value="">--select--</option>
                                        @foreach($blocks as $row)
                                            <option value="{{$row->block_id}}">{{$row->block_name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="search-input-div col-lg-3 col-md-4 col-sm-6">
                                    <label for="status">Status</label>
                                    <select name="status" class="form-select" id="status">
                                        <option value="">--select one--</option>
                                        @foreach(config('constant.STATUS') as $key => $val)
                                            <option value="{{ $key }}" {{ request('status') == $key ? 'selected' : '' }}>{{ $val }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="mb-4">
                                    <button class="btn btn-primary px-4" id="search">Search</button>
                                    <button class="btn btn-outline-danger px-4"  id="reset">Reset</button>
                                </div>
                            </div>
                        </form>
                    </div>

                    <div class="">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="text-primary m-0">
                                <a href="#!" class="btn btn-primary d-none">Add Admission</a>
                            </div>
                            <div class="d-flex align-items-center my-3 filter-icons gap-3 ">
                                <div class="icon-btn-div mb-3">
                                    <i class="icofont icofont-search color-primary" onclick="searchCollapseData()"></i>
                                </div>
                                <div class="icon-btn-div mb-3">
                                    <i class="icofont icofont-upload-alt color-primary" data-bs-toggle="modal" data-bs-target="#importMemberModal"></i>
                                </div>
                                <div class="icon-btn-div checkbox-input-div mb-3">
                                    <div class="checkbox-input-arrow d-flex align-items-center">
                                        <input type="checkbox" name="" id="datatableCheckAll" class="checkbox-input">
                                        <span class="checkbox-input-arrow-icon">
                                            <i class="fa-solid fa-angle-right"></i>
                                        </span>
                                    </div>
                                    <ul class="checkbox-input-arrow-open-div">
                                        <li>
                                            <a href="#!">Delete CC</a>
                                        </li>
                                    </ul>
                                </div>

                            </div>
                        </div>
                        <div class="table-card card">
                            <div class="table-responsive">
                                <table id="enquireTable" class="table table-bordered table-striped">
                                    <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Photo</th>
                                        <th>Name</th>
                                        <th>Contact</th>
                                        <th>Jivika Name</th>
                                        <th>Member ID</th>
                                        <th>District</th>
                                        <th>Block</th>
                                        <th>Status</th>
                                        <th>#</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="importMemberModal" tabindex="-1" aria-labelledby="importMemberModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="importMemberModalLabel">
                        <i class="fa fa-upload me-2"></i> Import Members
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <form action="{{ route('member.import') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="member_file" class="form-label">Select Excel File</label>
                            <input type="file" name="member_file" id="member_file" class="form-control" accept=".xlsx,.xls,.csv" required>
                            <small class="text-muted">Accepted formats: .xlsx, .xls, .csv</small>
                        </div>

                        <div class="alert alert-info py-2">
                            <i class="fa fa-info-circle me-1"></i>
                            Please ensure all fields match the sample format before uploading.
                        </div>

                        <a href="{{ route('members.downloadSample') }}" class="btn btn-outline-secondary btn-sm">
                            <i class="fa fa-download me-1"></i> Download Sample Format
                        </a>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fa fa-check me-1"></i> Upload
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @push('scripts')
        <script src="{{ asset('/assets/js/datepicker/datepicker.js') }}"></script>
        <script src="{{ asset('/assets/js/datepicker/datepicker.en.js') }}"></script>
        <script>

            $(document).ready(function() {
                const triggerEditUrl = "{{ route('member.edit', ['id' => ':id']) }}";
                var bed_status = JSON.parse('{!! json_encode(config('constant.STATUS')) !!}');

                $.fn.dataTable.ext.errMode = 'none';

                var enquireTable = new DataTable('#enquireTable', {
                    serverSide: true,
                    processing: true,
                    ajax: {
                        url: "{{ route('get.member.list') }}",
                        type: "POST",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        data: function (data) {
                            // Add filter parameters
                            data.district = $("#district").val();
                            data.name = $("#name").val();
                            data.block = $("#block").val();
                            data.phone = $("#phone").val();
                            data.status = $("#status").val();
                        }
                    },
                    columns: [
                        {
                            data: null,
                            render: function (data, type, row, meta) {
                                return meta.row + meta.settings._iDisplayStart + 1;
                            }
                        },
                        {
                            data: null,
                            orderable: false,
                            render: function (data) {
                                var final_url = ''
                                if (data.photo_url) {
                                    let url = data.photo_url
                                    final_url = url.slice(6)
                                    console.log(final_url,"wwwwwwwwww")
                                    
                                }
                                return `<div class="d-flex align-items-center">
                                        <img src="{{url('storage/')}}/${final_url}" class="user-img-div me-3" alt="profile">
                                    </div>`;
                            }
                        },
                        { data: 'member_name' },
                        { data: 'member_phone' },
                        { data: 'jivika_name' },
                        { data: 'member_sh_id' },
                        {
                            data: 'district',
                            render: function (data) {
                                return data?.district_name || '';
                            }
                        },
                        {
                            data: 'block',
                            render: function (data) {
                                return data?.block_name || '';
                            }
                        },
                        {
                            data: 'status',
                            render: function (data, type, row) {
                                let statusText = bed_status[row.status] || 'Unknown';
                                let badgeClass =
                                    row.status == 1 ? 'bg-success' :
                                        row.status == 0 ? 'bg-danger' : 'bg-secondary';
                                return `<span class="badge ${badgeClass}">${statusText}</span>`;
                            }
                        },
                        {
                            data:null,
                            orderable: false,
                            searchable: false,
                            render: function (data, type, row, meta) {
                                return '<div class="form-check float-end mt-1" style="text-align:center"><input type="checkbox" class="checkbox-input"></div>';
                            },
                        },
                        {
                            data: null,
                            orderable: false,
                            searchable: false,
                            render: function (data, type, row) {
                                const editUrl = triggerEditUrl.replace(':id', row.member_id);
                                return `<a href="${editUrl}" class="btn btn-sm btn-primary me-1">Edit</a>`;
                            }
                        }
                    ]
                });



            $(function () {
                    $("#search").click(function (e) {
                        e.preventDefault()
                        enquireTable.ajax.reload();
                    })
                })
                $('#enquireTable').on('order.dt', function () {
                    var order = $('#enquireTable').DataTable().order();
                    console.log("Sorting triggered");
                    console.log("Column index:", order[0][0]);
                    console.log("Direction:", order[0][1]); // asc or desc
                    useServer = false; // Next draw will be from localData
                });
                $(function () {
                    $("#reset").click(function () {
                        alert("dsfghjm")
                        enquireTable.ajax.reload();

                    })
                })

            });

            $(function(){
                $("#datatableCheckAll").change(function(){
                    var check = $(this).is(':checked')
                    if(check)
                    {
                        $('tbody tr').each(function(index,value){
                            $(this).find("input[type=checkbox]").prop('checked',true)
                        })
                    }
                    else{
                        $('tbody tr').each(function(index,value){
                            $(this).find("input[type=checkbox]").prop('checked',false)
                        })
                    }
                })
            })

        </script>
    @endpush


@endsection
