@extends('cms.master')

@section('content')
<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">Section</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/section/create')}}" class="btn btn-primary waves-effect waves-light">
                                    <i class="mdi mdi-plus-circle me-1"></i>
                                    Add section
                                </a>
                            </div> -->
                            <form action="{{url('/dashboard/section/add')}}" method="POST" enctype="multipart/form-data">
                                {{csrf_field()}}
                                <div class="input-group justify-content-sm-end">
                                    <select name="type" class="form-control" style="max-width: 150px;" required>
                                        <option value="" data-display="Select">Select type</option>
                                        <option value="text">Text</option>
                                        <option value="video">Video</option>
                                        <option value="image">Image</option>
                                    </select>
                                    <button type="submit" class="btn btn-primary waves-effect waves-light">
                                        <i class="mdi mdi-plus-circle me-1"></i>
                                        Add section
                                    </button>
                                </div>
                            </form>
                        </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>No</th>
                                <th>Title</th>
                                <th>Author</th>
                                <th>Updated</th>
                                <th width="1">Action</th>
                            </tr>
                        </thead>


                        <tbody>
                            @foreach($sections as $index => $section)
                            <tr>
                                <td>{{($index+1)}}</td>
                                <td>{{$section->title}}</td>
                                <td>{{$section->name}}</td>
                                <td>{{ date('j F Y',strtotime($section->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/section').'/'.$section->id.'/edit'}}" class="dropdown-item notify-item">
                                                <i class="fe-edit"></i>
                                                <span>Edit</span>
                                            </a>
                                            <a href="{{url('dashboard/section').'/'.$section->id}}" class="dropdown-item notify-item">
                                                <i class="fe-info"></i>
                                                <span>Detail</span>
                                            </a>
                                            <a type="button" class="dropdown-item notify-item" 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">
                <div class="text-center">
                    <i class="dripicons-warning h1 text-warning"></i>
                    <h4 class="mt-2">Delete this data ?</h4>
                    <button type="button" class="btn btn-warning my-2" data-bs-dismiss="modal">Continue</button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection