@extends('backend.layout.main')

@section('title','Legal Case Laws Management')

@section('content')
<div class="page-wrapper">
    <div class="content">

        <!-- PAGE HEADER -->
        <div class="d-md-flex page-breadcrumb mb-3">
            <div class="my-auto mb-2">
                <h2 class="mb-1">Legal Case Laws Management</h2>
            </div>
            <div class="ms-auto">
                <button class="btn btn-primary"
                        data-bs-toggle="offcanvas"
                        data-bs-target="#lawOffcanvas">
                    <i class="fa fa-plus me-2"></i> Add Case Law
                </button>
            </div>
        </div>

        <!-- TABLE -->
        <div class="card mb-3">
            <div class="card-body table-responsive">
                <table class="table table-bordered" id="lawTable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th width="120">Action</th>
                            <th>Judgement</th>
                            <th>Type</th>
                            <th>Name</th>
                            <th>Year</th>
                            <th>File</th>
                            <th>Status</th>
                            
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>

        <!-- OFFCANVAS FORM -->
        <div class="offcanvas offcanvas-end" tabindex="-1" id="lawOffcanvas">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title">Add / Update Legal Case Law</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
            </div>

            <div class="offcanvas-body">
                <form id="lawForm" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="id" id="id">

                    <div class="mb-3">
                        <label>Judgement</label>
                        <select id="judgement_id" class="form-control">
                            <option value="">Select Judgement</option>
                            @foreach($judgements as $judgement)
                                <option value="{{ $judgement->id }}">
                                    {{ $judgement->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label>Judgement Type</label>
                        <select name="judgementtype_id" id="judgementtype_id" class="form-control">
                            <option value="">Select Type</option>
                            @foreach($types as $type)
                                <option value="{{ $type->id }}"
                                        data-judgement="{{ $type->judgement_id }}">
                                    {{ $type->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label>Case Law Name</label>
                        <input type="text" name="name" id="name" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label>Year</label>
                        <input type="text" name="year" id="year" class="form-control">
                    </div>

                    <div class="mb-3">
                        <label>Description</label>
                        <textarea name="description" id="description" class="form-control"></textarea>
                    </div>

                    <div class="mb-3">
                        <label>File (PDF / DOC)</label>
                        <input type="file" name="file" 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"
                                id="submitBtn">
                            Save
                        </button>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>
@endsection

@push('scripts')
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

<script>
let lawTable;

$(document).ready(function () {

    $('#description').summernote({ height: 200 });

    fetchLaws();

    // Filter types by judgement
    $('#judgement_id').on('change', function () {
        let jid = $(this).val();
        $('#judgementtype_id option').each(function () {
            let show = !jid || $(this).data('judgement') == jid;
            $(this).toggle(show);
        });
        $('#judgementtype_id').val('');
    });

    function initDataTable() {
        lawTable = $('#lawTable').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 fetchLaws() {
        $.get("{{ route('admin.legalcaselaws.fetch') }}", function (res) {

            let rows = '';
            $.each(res.data, function (i, item) {

               

                rows += `
                <tr>
                    <td>${item.id}</td>
                    <td>
                        <button class="btn btn-sm edit"
                                data-id='${item.id}'>
                            <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>
                    <td>${item.judgement_type?.judgement?.name ?? '-'}</td>
                    <td>${item.judgement_type?.name ?? '-'}</td>
                    <td>${item.name}</td>
                    <td>${item.year || "---"}</td>
                    <td>
                        ${item.file
                            ? `<a href="/${item.file}" target="_blank" class="btn btn-sm btn-dark">View</a>`
                            : '-'}
                    </td>
                    <td>
                        <button class="toggle btn btn-sm ${item.status ? 'btn-success':'btn-danger'}"
                                data-id="${item.id}">
                            ${item.status ? 'Active':'Inactive'}
                        </button>
                    </td>
                    
                </tr>`;
            });

            if ($.fn.DataTable.isDataTable('#lawTable')) {
                lawTable.destroy();
            }

            $('#lawTable tbody').html(rows);
            initDataTable();
        });
    }

    // SAVE / UPDATE
    
    $('#lawForm').submit(function (e) {
        e.preventDefault();
        let formData = new FormData(this);
        let description = $('#description').summernote('code');
        formData.set('description', btoa($('#description').summernote('code')));

        $.ajax({
            url: "{{ route('admin.legalcaselaws.store') }}",
            method: "POST",
            data: formData,
            contentType: false,
            processData: false,
            success: function (res) {
                toastr.success(res.message);
                resetForm();

                let canvas = document.getElementById('lawOffcanvas');
                bootstrap.Offcanvas.getInstance(canvas).hide();

                fetchLaws();
            }
        });
    });

    // EDIT
    $(document).on('click','.edit',function(){
        
        let id = $(this).data('id');
        
        console.log('Current Case law id : ', id); 
        
        $.ajax({
            url: "{{ route('admin.legalcaselaws.get', ':id') }}".replace(':id', id),
            type: "GET",
            success: function (res) {
                   let item  = res.data;
                  
                   $('#id').val(item.id);
                    $('#name').val(item.name);
                    $('#year').val(item.year);
                    $('#description').summernote('code', item.description ?? '');
                    $('#judgement_id').val(item.judgement_type.judgement_id).trigger('change');
                    $('#judgementtype_id').val(item.judgementtype_id);
                    $('#submitBtn').text('Update');
            
                    new bootstrap.Offcanvas('#lawOffcanvas').show();
            }
        });

        


   
    });

    function resetForm(){
        $('#lawForm')[0].reset();
        $('#description').summernote('reset');
        $('#id').val('');
        $('#submitBtn').text('Save');
    }

    // DELETE
    $(document).on('click','.delete',function(){
        if(!confirm('Delete this legal case law?')) return;

        $.ajax({
            url:"{{ route('admin.legalcaselaws.delete') }}",
            type:"DELETE",
            data:{ _token:'{{ csrf_token() }}', id:$(this).data('id') },
            success:function(res){
                toastr.success(res.message);
                fetchLaws();
            }
        });
    });

    // TOGGLE
    $(document).on('click','.toggle',function(){
        $.ajax({
            url:"{{ route('admin.legalcaselaws.toggle') }}",
            type:"PATCH",
            data:{ _token:'{{ csrf_token() }}', id:$(this).data('id') },
            success:function(res){
                toastr.success(res.message);
                fetchLaws();
            }
        });
    });

});
</script>
@endpush