@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')
            @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>
                            <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>
                        </h4>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-responsive-md ">
                                <thead class="table-info">
                                    <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> --}}
                                                    <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>
                                                    @if($template->approval_status != 0)
                                                        <a href="{{ route('web.templates.edit', ['template' => $template]) }}"
                                                        class="btn btn-primary shadow btn-xs sharp me-1">
                                                        <i class="fa fa-pen"></i></a>
                                                    @endif
                                                {{-- <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->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() {
    $('.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