@extends('layouts.master')
@section('title','Book Peferences')
@section('content')

<style>

    path{

        display:none;
    }

    svg{

        display:none;
    }

</style>
<div class="container mt-4">
    <h4>Languages</h4>

    <!-- Search -->
    <form method="GET" action="{{ route('languages.index') }}" class="row g-3 mb-4">
        <div class="col-md-4">
            <input type="text" name="search" value="{{ request('search') }}" class="form-control" placeholder="Search language name">
        </div>
        <div class="col-md-2">
            <button type="submit" class="btn btn-primary">Search</button>
        </div>
    </form>
<!-- Add New Button -->
<div class="mb-3">
    <a href="{{ route('languages.create') }}" class="btn btn-success">+ Add Language</a>
</div>

    <!-- Interest Table -->
    <div class="card card-xy">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>
                                
                                    Name
                                
                            </th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($languages as $language)
                            <tr>
                                <td>{{ $language->category_name }}</td>
                                <td>
                                    <a href="{{ route('languages.edit',\Crypt::encrypt($language->id)) }}" class="btn btn-sm btn-info">Edit</a>
                                    <a href="javascript:void(0)" class="btn btn-sm btn-danger deactivate-language" data-language-id="{{ \Crypt::encrypt($language->id) }}">Deactivate</a>
                                
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="2">No Language not found </td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Pagination -->
    <div class="d-flex justify-content-center">
    {{ $languages->links('pagination::bootstrap-5') }}
    </div>
</div>
@endsection

@push('script')


<script>

    $(document).ready(function()
    {

        $(document).on("click",".deactivate-language",function()
        {

            var language=$(this).data('language-id');

            var data=JSON.stringify({
                language:language
            })

            swal.fire({

                title:"Are you sure?",
                text:"Are you sure to deactivate language?",
                showCancelButton:true,
                icon:"warning"
            }).then((result)=>{

                    if(result.isConfirmed)
                {


            fetch("{{ route('deactivateLanguage') }}",{

                        method:"POST",
                        body:data,
                        headers:{'X-CSRF-TOKEN':"{{ csrf_token() }}",
                            "Content-Type":"application/json"
                        },



                        }).then((result)=>result.json())
                        .then((response)=>{

                            if(response.status=="success")
                            {
                                swal.fire({
                                    title:"Deactivated",
                                    text:response.message,
                                    icon:"success"
                                }).then((result)=>{

                                    window.location.reload()
                                });
                            }

                            else{

                                swal.fire({

                                    title:"Failed",
                                    text:response.message,
                                    icon:"error"
                                });
                            }
                        });
                    
                }
            });

            
        });
        
    });

</script>

@endpush