@extends('web.layouts.app')
@section('content')
<div class="main-chat-container w-100 ml-md-5 overflow-hidden">
    <div class="p-3 p-lg-4 border-top mb-0 main-chat-container-in">
        <div class="row">
            <div class="col-xl-12 col-lg-12">
                <div class="card">
                    <div class="card-header" style="display: flex;justify-content: space-between;">
                        <h4 class="card-title">@lang('user.templates')</h4>
                        <h4>
                            @can('templates-create')
                                <a href="{{ route('web.messenger_templates.create') }}"
                                    class="btn btn-primary shadow btn-xs sharp me-1">@lang('user.create_template') 
                                    <i class="fa fa-plus"></i></a>
                            @endcan
                        </h4>
                    </div>
                    <div class="card-body @if(env('APP_PROJECT')=='Mora') pt-0 @endif">
                        <form method="get" action="">
                            <div class="row mb-3">
                                <div class="col-md-3">
                                    <input type="text" class="form-control" name="keyword" value="{{ request()->input('keyword') }}" placeholder="@lang('user.search')...">
                                </div>
                                <div class="col-md-3">
                                    {!! Form::select('status', ['' => __('user.status'), '0' => 'Inactive', '1' => 'Active'], request()->input('status'), ['class' => 'form-control', 'data-placeholder' => __('user.status')]) !!}
                                </div>
                                <div class="col-md-2">
                                    <input type="submit" class="btn btn-primary w-100" value="@lang('user.search')" />
                                </div>
                                @if (request()->has('keyword'))
                                    <div class="col-md-2">
                                        <a href="{{ route('web.messenger_templates.index') }}" class="btn btn-light w-100">@lang('user.clear_filters')</a>
                                    </div>
                                @endif
                            </div>
                        </form>
                        <div class="table-responsive">
                            <table class="table table-striped table-responsive-md ">
                                <thead>
                                    <tr>
                                        <th>@lang('user.name')</th>
                                        <th>@lang('user.category')</th>
                                        <th>@lang('user.status')</th>
                                        <th>@lang('user.actions')</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($templates as $template)
                                    <tr>
                                        <td>{{ $template->name }}</td>
                                        <td>{{ \App\Models\MessengerTemplate::$categories[$template->category] ?? '' }}</td>
                                        <td>
                                            <select style="{{$template->status == 1 ? 'background-color: #06d6a0':'background-color: #ffd166'}}" class="form-select statusSelect" data-template-id="{{ $template->id }}">
                                                <option value="1" {{$template->status == 1 ?'selected':''}}>Active</option>
                                                <option value="0" {{$template->status == 0 ?'selected':''}}>Inactive</option>
                                            </select>                                            
                                        </td>
                                        <td>
                                            <div class="d-flex">
                                                @can('templates-edit')
                                                    <a href="{{ route('web.messenger_templates.edit', ['messenger_template' => $template]) }}"
                                                        class="btn btn-primary shadow btn-xs sharp me-1">
                                                        <i class="fa fa-pencil"></i>
                                                    </a>
                                                @endcan
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            {{ $templates->appends(request()->input())->links('vendor.pagination.custom') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="tab-form-pane main-chat-note fade show active" id="pills-note" role="tabpanel"
    aria-labelledby="pills-note-tab">
    <div class="px-4 ">
        <div class="note-sidebar">
            <div class="note-title">
                <h4>@lang('user.note')</h4>
            </div>
            <div class="note-content">
                <p>
                    @lang('notes.templates_note')
                </p>
            </div>
        </div>
    </div>
</div>
<style>
    .form-select{
        background-color: #fff;
    }
</style>
<!-- end  layout wrapper -->
@endsection
@section('script')
<script type="text/javascript">
$(document).ready(function() {
    $('.select2').select2();
    
    $('.statusSelect').change(function() {
        var templateId = $(this).data('template-id');
        var newStatus = $(this).val(); // Retrieve the selected value from the select element

        $.ajax({
            url: "{{ route('update-template-status', ':templateId') }}".replace(':templateId', templateId),
            type: 'POST',
            data: {
                _token: "{{ csrf_token() }}",
                status: newStatus
            },
            success: function(response) {
                // Handle success
                location.reload(); 
            },
            error: function(xhr, status, error) {
                // Handle error
                console.error(xhr.responseText);
            }
        });
    });
});
</script>
@endsection