@extends('Admin.layouts.master')

@section('content')
    @php
        $currentPage = 'manage-aboutus';
    @endphp


<div class="layout-px-spacing">
    <div class="middle-content container-xxl p-0">
        <div class="row layout-top-spacing ">
            <div class="top-tabel">
                <div class="row">
                    <div class="col-md-4">
                        <h6 class="card-title">Manage About Us</h6>
                    </div>
                    <div class="col-md-8">

                    </div>
                </div>
            </div>
            <div class="col-xl-12 col-lg-12 col-sm-12 layout-spacing">
                <div class="widget-content widget-content-area br-8 position-btn" style="overflow: auto;">
                    <table id="zero-config" class="table dt-table-hover about_table" style="width:100%">
                        <thead class="text-center">
                            <meta name="csrf-token" content="{{ csrf_token() }}">
                            <tr>
                                <th class="text-start">Sr no</th>
                                <th class="text-start">Title</th>
                                <th class="text-start">Image</th>
                                <th class="text-start">Category</th>
                                <th class="text-start">Added Date</th>
                                <th class="no-content">Action</th>
                            </tr>
                        </thead>
                        <tbody class="text-center">
                           @foreach ( $about_data as $about_us_data)
                                <tr>
                                    <td class="text-start">{{$loop->iteration}}</td>
                                    <td class="text-start">{{ $about_us_data->title }}</td>

                                    <td class="text-center">
                                        <img src="{{$about_us_data->thumbnail_image}}" height="50px" width="50px">
                                    </td>
                                    <td class="text-start">
                                        {{ $about_us_data->category->name }}
                                    </td>
                                    <td class="text-start">
                                        {{ \Carbon\Carbon::parse($about_us_data['created_at'])->format('m/d/Y') }}</td>
                                    <td>
                                        <div class="dropout">
                                            <button class="more">
                                                <span></span>
                                                <span></span>
                                                <span></span>
                                            </button>
                                            <ul> <li>
                                                <div class="switch-btn">
                                                    <input data-id="{{ $about_us_data['id'] }}"
                                                        {{ $about_us_data['is_active'] ? 'checked' : '' }}
                                                        type="checkbox" class="active_about"
                                                        id="switch{{ $about_us_data['id'] }}" switch="bool" />
                                                    <label for="switch{{ $about_us_data['id'] }}"
                                                        data-on-label="Active" data-off-label="Expired"></label>
                                                </div>
                                            </li>
                                                <li>
                                                    <a href="{{ url('about_us_edit/' . $about_us_data['id']) }}"
                                                        class="edit-faq-btn" >
                                                        <img src="{{ asset('public/assets/img/edit.svg') }}" />
                                                        <span>Edit</span>
                                                    </a>

                                                </li>
                                                <li>
                                                    <a class="delete_about" data-id="{{ $about_us_data['id'] }}" data-toggle="modal" data-target="#delete-modal">
                                                        <img
                                                            src="{{ asset('public/assets/img/delete-recycle.svg') }}" />
                                                        <span>Delete</span>
                                                    </a>
                                                </li>

                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>
    <!--  BEGIN FOOTER  -->

    <!--  END FOOTER  -->
<div class="modal fade" id="delete-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">
                    x
                </button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="delete_about_id" name="about_id">
                <p class="modal-text">Are you sure you want to<br>Delete </p>
                <div class="modal-btn d-flex ">
                    <a type="button" class="extra-btn" data-dismiss="modal">No</a>
                    <a type="button" class="download-btn-custom delete_about_button"  data-dismiss="modal">Yes</a>
                </div>

            </div>
        </div>
    </div>
</div>
@endsection

@section('section_script')
    <script src="{{ asset('public/assets/js/admin/manage_cms/manage_aboutus/main.js') }}"></script>
    <script>

    </script>
    <script>

        $(document).ready(function() {
            $('<button><a class="extra-btn width-max-content" href="{{ route('about_us_add') }}">Add New</a ></button > ')
                .insertBefore("#zero-config_filter label");
        });
    </script>
@endsection
