@extends('users-area.layouts.app')

@section('title', 'Theme')

@section('content')
    <div class="card bg-light-info shadow-none position-relative overflow-hidden">
        <div class="card-body px-4 py-3">
            <div class="row align-items-center">
                <div class="col-9">
                    <h4 class="fw-semibold mb-8">Theme</h4>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a class="text-muted " href="{{ route('users-area.index') }}">Home</a>
                            </li>
                            <li class="breadcrumb-item" aria-current="page">
                                Theme
                            </li>
                        </ol>
                    </nav>
                </div>
                <div class="col-3">
                    <div class="text-center mb-n5">
                        <img src="{{ asset('users-area-template/images/breadcrumb/ChatBc.png') }}" alt="" class="img-fluid mb-n4">
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="d-sm-flex align-items-center justify-content-between mt-3 mb-4">
        <div class="mb-3 mb-sm-0 fw-semibold d-flex align-items-center"></div>
        <div class="position-relative">
            <a href="{{ route('users-area.theme.create') }}" class="btn btn-primary"><i class="ti ti-template"></i> Add Theme</a>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <div class="row row-theme">
                @forelse ($themes as $theme)
                    <div class="col-md-6 col-lg-3">
                        <div class="card hover-img overflow-hidden rounded-2">
                            @if ($theme->is_default)<span class="badge bg-primary" style="position: absolute;left: 5px; top:6px">Default</span>@endif
                            <img class="card-img-top img-responsive" src="{{ asset('uploads/images/themes/thumb_' . $theme->background_image) }}" alt="{{ $theme->name }}">
                            <div class="card-body p-3">
                                <h6 class="card-title">{{ $theme->name }}</h6>
                                <div class="text-center mt-3 row">
                                    <div class="col-6 pe-1"><a href="{{ route('users-area.theme.edit', $theme->id) }}" class="btn btn-primary w-100"><i class="ti ti-edit"></i></a></div>
                                    <div class="col-6 ps-1">
                                        <form action="{{ route('users-area.theme.destroy', $theme->id) }}" class="form-delete" method="POST">
                                            @csrf
                                            @method('DELETE')
                                        </form>
                                        <button class="btn btn-delete btn-danger w-100"><i class="ti ti-trash"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="text-center">No Data</div>
                @endforelse
            </div>
        </div>
    </div>
    
    {{-- <div class="modal fade" id="theme-modal" tabindex="-1" aria-labelledby="change-template-modal" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header d-flex align-items-center">
                    <h4 class="modal-title" id="myLargeModalLabel">...</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" ></button>
                </div>
                <div class="modal-body">
                    <form action="">
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light-danger btn-close-modal text-danger font-medium waves-effect text-start" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-light-primary text-primary font-medium waves-effect text-start"><i class="ti ti-device-floppy"></i> Save</button>
                </div>
            </div>
        </div>
    </div> --}}
@endsection

@push('script')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(function(){
            $('.row-theme').on('click', '.btn-delete', function(){
                const t = $(this)
                const form = t.closest('div').find('form.form-delete')

                Swal.fire({
                    title: "Are you sure?",
                    text: "You won't be able to revert this!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Yes, delete it!"
                }).then((result) => {
                    if (result.isConfirmed) {
                        form.submit()
                    }
                });
            })

            $('form.form-delete').on('submit', function(){
                $(this).closest('div').find('.btn-delete').prop('disabled', true).html('<div class="spinner-border spinner-border-sm" role="status"></div>')
            })
        })
    </script>
@endpush