@extends('backend.layout.main')

@section('title', 'Advocates Management')

@section('content')

<div class="page-wrapper">
    <div class="content">

        <div class="d-md-flex page-breadcrumb mb-3">
            <div class="my-auto mb-2">
                <h2 class="mb-1">Advocates Management</h2>
            </div>
            <div class="ms-auto">
                <button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#advocateOffcanvas">
                    <i class="fa fa-plus me-2"></i> Add Advocate
                </button>
            </div>
        </div>

        <!-- Advocate Table -->
        <div class="card mb-3">
            <div class="card-body table-responsive">
                <table class="table table-bordered" id="advocateTable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Login Permission</th>
                            <th>Fullname</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <th>State</th>
                            <th>City</th>
                            <th>Status</th>
                            <th>Image</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>

        <!-- Offcanvas Advocate Form -->
        <div class="offcanvas offcanvas-end" tabindex="-1" id="advocateOffcanvas">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title">Add / Update Advocate</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
            </div>
            <div class="offcanvas-body">
                <form id="advocateForm" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="id" id="id">

                    <div class="mb-2">
                        <label>Fullname</label>
                        <input type="text" name="fullname" id="fullname" class="form-control">
                    </div>

                    <div class="mb-2">
                        <label>Choose an Lawyer Register For ... </label>
                        <select class="select2" name="practice_area[]" id="practice_area" multiple="multiple">
                            <option value="arbitration">Arbitration</option>
                            <option value="aviationlaw">Aviation Law</option>
                            <option value="banking">Banking</option>
                            <option value="civil">Civil</option>
                            <option value="com_reg_complience">Company-Registration's Complience</option>
                            <option value="constitutional">Constitutional</option>
                            <option value="consumer">Consumer</option>
                            <option value="corporate">Corporate</option>
                            <option value="criminal">Criminal</option>
                            <option value="cyber_crime">Cyber Crime</option>
                            <option value="environment">Environment</option>
                            <option value="immigration">Immigration</option>
                            <option value="industrial_relations">Industrial Relations</option>
                            <option value="family">Family</option>
                            <option value="international">International</option>
                            <option value="ipr">I P R</option>
                            <option value="madid-laws">Madid Laws</option>
                            <option value="pil_rti_ngo">PIL | RTI | NGO</option>
                            <option value="property">Property</option>
                            <option value="sports_law">Sports Law</option>
                            <option value="taxation">Taxation</option>
                        </select>

                    </div>

                    <div class="mb-2">
                        <label>Email</label>
                        <input type="email" name="email" id="email" class="form-control">
                    </div>

                    <div class="mb-2">
                        <label>Phone</label>
                        <input type="text" name="phone" id="phone" class="form-control">
                    </div>

                    <div class="mb-2">
                        <label>Gender</label>
                        <select name="gender" id="gender" class="form-control">
                            <option value="">Choose Gender</option>
                            <option value="m">Male</option>
                            <option value="f">Female</option>
                        </select>
                    </div>

                    <div class="mb-2">
                        <label>Address</label>
                        <input type="text" name="address" id="address" class="form-control">
                    </div>

                    <div class="mb-2">
                        <label>State</label>
                        <input type="text" name="state" id="state" class="form-control">
                    </div>

                    <div class="mb-2">
                        <label>City</label>
                        <input type="text" name="city" id="city" class="form-control">
                    </div>

                    <div class="mb-2">
                        <label>Password</label>
                        <input type="password" name="password" id="password" class="form-control">
                    </div>

                    <div class="mb-2">
                        <label>Image</label>
                        <input type="file" name="image" id="image" class="form-control">
                    </div>

                    <div class="d-flex gap-2 mt-3">
                        <button type="button" class="btn btn-secondary w-50" data-bs-dismiss="offcanvas">Cancel</button>
                        <button type="submit" class="btn btn-primary w-50">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script>
    let advocateTable;

    $(document).ready(function() {

        fetchAdvocates();

        function initDataTable() {
            advocateTable = $('#advocateTable').DataTable({
                destroy: true
                , responsive: true
                , pageLength: 10
                , dom: 'Bfrtip'
                , buttons: [{
                        extend: 'collection'
                        , text: '<i class="fa fa-download me-1"></i> Export'
                        , className: 'btn btn-primary'
                        , buttons: [
                            'copy'
                            , 'csv'
                            , 'excel'
                            , 'pdf'
                            , 'print'
                        ]
                    }
                    , {
                        extend: 'colvis'
                        , text: '<i class="fa fa-columns me-1"></i> Columns'
                        , className: 'btn btn-secondary'
                    }
                ]
            });
        }

        function fetchAdvocates() {
            $.get("{{ route('admin.advocates.fetch') }}", function(res) {
                let rows = '';
                $.each(res.data, function(i, item) {
                    rows += `
                    <tr>
                        <td>${item.id}</td>
                        <td>
                            <button class="btn btn-sm  ${item.loginPermission ? 'btn-success' : 'btn-danger'}  loginPermission" data-id='${item.id}'>
                                ${item.loginPermission ? '<i class="fa-solid  fa-wand-sparkles  me-2"></i>' : '<i class="fa-solid fa-ban  me-2"></i>'}
                                
                                ${item.loginPermission ? 'Allow' : 'Block'}
                            </button>
                        </td>
                        <td>${item.fullname}</td>
                        <td>${item.email}</td>
                        <td>${item.phone}</td>
                        <td>${item.state}</td>
                        <td>${item.city}</td>
                        <td>
                            <button class="toggle-status btn btn-sm ${item.status ? 'btn-success':'btn-danger'}"
                                data-id="${item.id}">
                                ${item.status ? 'Active':'Inactive'}
                            </button>
                        </td>
                        <td>
                            ${item.image ? `<img src="/${item.image}" width="40">` : ''}
                        </td>
                        <td>
                            <button class="btn btn-sm edit" data-item='${JSON.stringify(item)}'>
                                <i class="fa fa-edit text-info"></i>
                            </button>
                            <button class="btn btn-sm delete" data-id="${item.id}">
                                <i class="fa fa-trash text-danger"></i>
                            </button>
                        </td>
                    </tr>
                `;
                });

                // 🔥 Destroy old DataTable if exists
                if ($.fn.DataTable.isDataTable('#advocateTable')) {
                    advocateTable.destroy();
                }

                $('#advocateTable tbody').html(rows);

                // 🔥 Reinitialize DataTable
                initDataTable();
            });
        }

        // Form submit
        $('#advocateForm').submit(function(e) {
            e.preventDefault();
            let formData = new FormData(this);

            $.ajax({
                url: "{{ route('admin.advocates.store') }}"
                , type: "POST"
                , data: formData
                , contentType: false
                , processData: false
                , success: function(res) {
                    toastr.success(res.message);
                    $('#advocateForm')[0].reset();

                    let offcanvasEl = document.getElementById('advocateOffcanvas');
                    bootstrap.Offcanvas.getInstance(offcanvasEl).hide();

                    fetchAdvocates();
                }
            });
        });

        $(document).on('click', '.edit', function () {
            let item = $(this).data('item');

            $('#id').val(item.id);
            $('#fullname').val(item.fullname);
            $('#email').val(item.email);
            $('#phone').val(item.phone);
            $('#gender').val(item.gender);
            $('#address').val(item.address);
            $('#state').val(item.state);
            $('#city').val(item.city);
            $('#password').val('');

            // ✅ Practice area (JSON + Select2)
            let areas = item.practice_area;
            if (typeof areas === 'string') {
                areas = JSON.parse(areas);
            }
            $('#practice_area').val(areas).trigger('change');

            // ✅ Open offcanvas (Bootstrap)
            let offcanvasEl = document.getElementById('advocateOffcanvas');
            let offcanvas = new bootstrap.Offcanvas(offcanvasEl);
            offcanvas.show();
        });


        $(document).on('click','.loginPermission',function(){
            if(!confirm('Are you sure?')) return;
            $.ajax({
                url: "{{ route('admin.advocates.login-permission') }}",
                type: "PATCH",
                data: {_token:'{{ csrf_token() }}', id:$(this).data('id')},
                success:function(res){
                    toastr.success(res.message);
                    fetchAdvocates();
                }
            });
        });

        $(document).on('click','.delete',function(){
            if(!confirm('Delete this advocate?')) return;
            $.ajax({
                url: "{{ route('admin.advocates.delete') }}",
                type: "DELETE",
                data: {_token:'{{ csrf_token() }}', id:$(this).data('id')},
                success:function(res){
                    toastr.success(res.message);
                    fetchAdvocates();
                }
            });
        });

        $(document).on('click','.toggle-status',function(){
            $.ajax({
                url: "{{ route('admin.advocates.toggle') }}",
                type: "PATCH",
                data: {_token:'{{ csrf_token() }}', id:$(this).data('id')},
                success:function(res){
                    toastr.success(res.message);
                    fetchAdvocates();
                }
            });
        });

    });

</script>
@endpush


{{-- loginPermission --}}