@extends('layouts/contentLayoutMaster')

@section('title', 'Application Students')

@section('vendor-style')
    {{-- vendor css files --}}
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/toastr.min.css')) }}">
@endsection

@section('page-style')
    {{-- Page Css files --}}
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/extensions/ext-component-toastr.css')) }}">
@endsection


@section('content')
    <!-- Responsive Datatable -->
    <div class="row">
        <div class="col-md-8">

        </div>
        <div class="col-md-4">
            <form method="POST" action="{{route('students.search')}}">
                @csrf
                <div class="d-flex justify-content-between">
                    <input required style="width: 67%" name="search" type="search" class="form-control"
                           placeholder="Search"/>
                    <button class="btn btn-primary" type="submit">Search</button>
                </div>

            </form>


        </div>

    </div>
    <div class="row match-height mt-2">
        @if($users->count() > 0)
            @foreach($users as $user)
                <div class="col-lg-4 col-md-6 col-12 mt-4">
                    <div class="card card-profile">
                        <div class="card-body">
                            <div class="profile-image-wrapper">
                                <div class="profile-image">
                                    <div class="avatar">
                                        <img
                                            src="{{ @$user->picture ? App::make('url')->to('/') . '/storage' . @$user->picture : asset('images/profile/user-uploads/user-01.jpg')}}"
                                            alt="Profile Picture">
                                    </div>
                                </div>
                            </div>
                            <h3>{{$user->name}}</h3>
                            <h6 class="text-muted">{{$user->father_name}}</h6>
                            <h6 class="text-muted">{{$user->email}}</h6>
                            <h6 class="text-muted">{{$user->phone}}</h6>
                            @php if ($user->status === 1){
                                    $status = 'Active';
                                    $class = 'primary';
                                } else{
                                $status = 'Inactive';
                                $class = 'danger';

                                }
                            @endphp
                            <span class="badge badge-light-{{$class}} profile-badge">{{$status}}</span>
                            <h6 class="text-muted"><strong>Roll No. </strong>#{{$user->id}}</h6>
                            <hr class="mb-2">
                            <div class="d-flex justify-content-between">
                                <a href="{{route('students.edit',$user)}}" class="btn btn-link btn-info"
                                   style="padding: 0.786rem 1.9rem;">View</a>
                                <form action="{{ URL::route('students.destroy', $user)}}"
                                      method="POST" id="delete-form" class="delete-form">
                                    <input type="hidden" name="_method" value="DELETE">
                                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                    <button class="btn btn-link btn-danger delete-btn" type="submit"> Delete
                                    </button>
                                </form>
                            </div>


                        </div>
                    </div>
                </div>
            @endforeach
            {!! $users->withQueryString()->links('pagination::bootstrap-5') !!}
        @else
            <div class="card-datatable py-2 px-2">
                <div class="d-flex justify-content-center">
                                <span class="alert alert-danger">
                                    No Record Found
                                </span>
                </div>
            </div>
        @endif
    </div>

    <!--/ Responsive Datatable -->
    <!-- Delete confirmation modal -->
    <div class="modal fade" id="confirmDeleteModal" tabindex="-1" role="dialog"
         aria-labelledby="confirmDeleteModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmDeleteModalLabel">Confirm Delete</h5>
                    <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete this record?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn">Delete</button>
                </div>
            </div>
        </div>
    </div>

@endsection


@section('vendor-script')
    {{-- vendor files --}}
    <script src="{{ asset(mix('vendors/js/extensions/toastr.min.js')) }}"></script>

@endsection

@section('page-script')
    {{-- Page js files --}}
    @livewireScripts
    <script>
        $(document).ready(function () {
            toastr.options.timeOut = 10000;
            @if(session()->has('error'))
            toastr.error('{{ session('error') }}');
            @elseif(session()->has('success'))
            toastr.success('{{ session('success') }}');
            @endif

            $('.delete-btn').click(function (e) {
                // Prevent the default form submission
                e.preventDefault();
                // Get the corresponding delete form for this button
                var deleteForm = $(this).closest('.delete-form');

                // Display the Bootstrap modal dialog
                $('#confirmDeleteModal').modal('show');

                // Attach a click event listener to the confirm button
                $('#confirmDeleteBtn').click(function () {
                    // Hide the Bootstrap modal dialog
                    $('#confirmDeleteModal').modal('hide');

                    // Submit the delete form
                    deleteForm.submit();
                });
                // Attach a click event listener to the cancel button
                $('.modal-footer .btn-secondary').off('click').on('click', function () {
                    // Hide the Bootstrap modal dialog
                    $('#confirmDeleteModal').modal('hide');
                });
                $('.btn-close').off('click').on('click', function () {
                    // Hide the Bootstrap modal dialog
                    $('#confirmDeleteModal').modal('hide');
                });

            });

        });


    </script>
@endsection