@extends('cms.master')

@section('content')
<script src="{{asset('assets/js/jquery-1.9.1.min.js')}}"></script>

<div class="container-fluid">
    <div class="row">
        @if(Session::has('success'))
        <div class="col-12">
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                {{Session::get('success')}}
            </div>
        </div>
        @elseif(Session::has('failed'))
        <div class="col-12">
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                {{Session::get('failed')}}
            </div>
        </div>
        @else
        @endif
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row justify-content-between">
                        <div class="col-md-4">
                            <ul id="breadcrumbs-one" style="margin: 0;padding: 0;list-style: none;">
                                <li><a href="{{url('/dashboard/home')}}"> Home </a></li>
                                <li class="disable"><a href="" class="current">background</a></li>
                            </ul>
                        </div>
                        <div class="col-md-8">
                            <div class="d-flex flex-wrap align-items-center justify-content-sm-end">
                                <a href="{{url('dashboard/background/create')}}" class="btn btn-primary waves-effect waves-light">
                                    <i class="mdi mdi-plus-circle me-1"></i>
                                    Add background
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <table id="datatable" class="table table-bordered dt-responsive table-responsive nowrap">
                        <thead>
                            <tr>
                                <th width="1">No</th>
                                <th>Flag</th>
                                <th width="1">Updated</th>
                                <th width="1">Action</th>
                            </tr>
                        </thead>


                        <tbody>
                            @foreach($backgrounds as $index => $background)
                            <tr>
                                <td>{{($index+1)}}</td>
                                <td>{{$background->background_flag}}</td>
                                <td>{{ date('j F Y',strtotime($background->updated_at)) }}</td>
                                <td>
                                    <div class="dropdown notification-list topbar-dropdown">
                                        <a class="dropdown-toggle me-0 waves-effect waves-light" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                            Action <i class="mdi mdi-chevron-down"></i>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-end profile-dropdown ">
                                            <a href="{{url('dashboard/background').'/'.$background->background_id.'/edit'}}" class="dropdown-item notify-item">
                                                <i class="fe-edit"></i>
                                                <span>Edit</span>
                                            </a>
                                            <a href="{{url('dashboard/background').'/'.$background->background_id}}" class="dropdown-item notify-item">
                                                <i class="fe-info"></i>
                                                <span>Detail</span>
                                            </a>
                                            <a type="button" class="dropdown-item notify-item delete-data" data-id="{{$background->background_id}}" data-bs-toggle="modal" data-bs-target="#warning-alert-modal">
                                                <i class="fe-trash-2"></i>
                                                <span>Delete</span>
                                            </a>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>

<div id="warning-alert-modal" class="modal fade " tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <form action="{{url('dashboard/background/delete')}}" method="POST" enctype="multipart/form-data">
                    {{csrf_field()}}
                    <div class="text-center">
                        <i class="dripicons-warning h1 text-warning"></i>
                        <h4 class="mt-2">Delete this data ?</h4>
                        <input type="text" class="form-control" id="id" name="id" style="display: none;">
                        <button type="submit" class="btn btn-warning my-2" data-bs-dismiss="modal">Continue</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    $('.delete-data').click(function() {
        var id = $(this).attr("data-id");

        $('.modal-body #id').val(id);

        $('#warning-alert-modal').modal('show');
    })
</script>
@endsection