@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">
        @if (env('APP_PROJECT') != 'Rouaa' && env('APP_PROJECT') != 'Mora')
            @include('web.apps_menu')
        @endif
        <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.templates.create') }}"
                                    class="btn btn-primary shadow btn-xs sharp me-1">@lang('user.create_template') 
                                    <i class="fa fa-plus"></i></a>
                                <a href="{{ route('web.templates.createCarousel') }}"
                                    class="btn btn-info shadow btn-xs sharp me-1">@lang('user.create_carousel_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-2">
                                    {!! Form::select('status', ['' => __('user.status'), '0' => 'Inactive', '1' => 'Active'], request()->input('status'), ['class' => 'form-control select2', 'data-placeholder' => __('user.status')]) !!}
                                </div>
                                <div class="col-md-2">
                                    {!! Form::select('approval_status', ['' => __('user.approval_status'), '0' => __('user.PENDING'), '1' => __('user.APPROVED'), '2' => __('user.REJECTED')], request()->input('approval_status'), ['class' => 'form-control select2', 'data-placeholder' => __('user.approval_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.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.body')</th> --}}
                                        <th>@lang('user.media')</th>
                                        <th>@lang('user.language')</th>
                                        <th>@lang('user.status')</th>
                                        <th>@lang('user.approval_status')</th>
                                        <th>@lang('user.actions')</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($templates as $template)
                                    <tr>
                                        <td>{{ $template->name }}</td>
                                        {{-- <td>{{ $template->body }}</td> --}}
                                        <td>
                                            @if($template->media_type == 0)
                                                <i class="fas fa-ban"></i>
                                            @elseif($template->media_type == 1)
                                                <i class="fas fa-image"></i>
                                            @elseif($template->media_type == 2)
                                                <i class="fas fa-video"></i>
                                            @elseif($template->media_type == 3)
                                                <i class="fas fa-file-alt"></i>
                                            @endif
                                        </td>
                                        <td>{{ $template->lang }}</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><span class="badge text-bg-{{ $template->approval_status == 1 ? 'success' : ($template->approval_status == 2 ? 'danger' : 'warning') }}">
                                            @if($template->approval_status == 0)
                                                @lang('user.PENDING')
                                            @elseif ($template->approval_status == 1)
                                                @lang('user.APPROVED')
                                            @elseif($template->approval_status == 2)
                                                @lang('user.REJECTED')
                                            @endif
                                        </span>
                                        
                                        </td>
                                        <td>
                                            <div class="d-flex">
                                                {{-- <button type="button" data-bs-toggle="modal"
                                                    data-bs-target="#editModal_{{ $template->id }}"
                                                    class="btn btn-primary shadow btn-xs sharp me-1"><i
                                                        class="fa fa-pencil"></i></button> --}}
                                                    @if (!empty($template->carousel))
                                                        <a href="{{ route('web.templates.showCarousel', ['template' => $template]) }}"
                                                            class="btn btn-primary shadow btn-xs sharp me-1">
                                                            <i class="fa fa-eye"></i>
                                                        </a>
                                                    @else
                                                        <a href="{{ route('web.templates.show', ['template' => $template]) }}"
                                                            class="btn btn-primary shadow btn-xs sharp me-1">
                                                            <i class="fa fa-eye"></i>
                                                        </a>
                                                    @endif
                                                    @can('templates-edit')
                                                        @if($template->approval_status != 0)
                                                            @if (!empty($template->carousel))
                                                                <a href="{{ route('web.templates.editCarousel', ['template' => $template]) }}"
                                                                    class="btn btn-primary shadow btn-xs sharp me-1">
                                                                    <i class="fa fa-pencil"></i>
                                                                </a>
                                                            @else
                                                                <a href="{{ route('web.templates.edit', ['template' => $template]) }}"
                                                                    class="btn btn-primary shadow btn-xs sharp me-1">
                                                                    <i class="fa fa-pencil"></i>
                                                                </a>
                                                            @endif
                                                        @endif
                                                    @endcan
                                                {{-- <button type="button" data-bs-toggle="modal"
                                                    data-bs-target="#deleteModal_{{ $template->id }}"
                                                    class="btn btn-danger shadow btn-xs sharp"><i
                                                        class="fa fa-trash"></i></button> --}}

                                            </div>
                                        </td>
                                    </tr>
                                    
                                    {{-- @include('web.templates.delete') --}}
                                    
                                    @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