@extends('layouts.metronic')

@section('title')
    <h1 class="d-flex align-items-center text-dark fw-bolder fs-3 my-1">ToDo</h1>
@endsection


@section('content')
<div id="kt_content_container" class="container-xxl">
    <div >
        <div class="row">
            <form action="{{ route('todos') }}" method="POST" class="form fv-plugins-bootstrap5 fv-plugins-framework">
                <input type="hidden" name="_token" value="{{ csrf_token() }}">                                    
                <div class="d-flex justify-content-start" data-kt-customer-table-toolbar="base">
                    <div class="col-md-3 fv-row fv-plugins-icon-container">
                        <label class="fs-5 fw-bold mb-2">Utilizator</label>
                        <select name="user_id" onchange="this.form.submit()" class="form-select form-select-solid select2-hidden-accessible"  data-control="select2" data-hide-search="true" tabindex="-1" aria-hidden="true">
                            @foreach ($users as $user)
                            <option value="{{ $user->_id }}" {{ ($user->_id== $user_id)?'selected':'' }}>{{ $user->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </form>
            <div class="d-flex justify-content-end" data-kt-customer-table-toolbar="base">
                <a href="#" class="btn btn-primary er fs-6 px-8 py-4" data-bs-toggle="modal" data-bs-target="#kt_modal_upgrade_plan">Adaugă ToDo</a>
            </div>
        </div>
    </div><br>
    
    <div class="col-md-12 pe-md-10 mb-10 mb-md-0">
        <div class="m-0">
            <div class="d-flex align-items-center collapsible py-3 toggle mb-0 active" data-bs-toggle="collapse" data-bs-target="#kt_job_6_active" aria-expanded="true">
                <div class="btn btn-sm btn-icon mw-20px btn-active-color-primary me-5">
                    <span class="svg-icon toggle-on svg-icon-primary svg-icon-1">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <rect opacity="0.3" x="2" y="2" width="20" height="20" rx="5" fill="black"></rect>
                            <rect x="6.0104" y="10.9247" width="12" height="2" rx="1" fill="black"></rect>
                        </svg>
                    </span>
                    <span class="svg-icon toggle-off svg-icon-1">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <rect opacity="0.3" x="2" y="2" width="20" height="20" rx="5" fill="black"></rect>
                            <rect x="10.8891" y="17.8033" width="12" height="2" rx="1" transform="rotate(-90 10.8891 17.8033)" fill="black"></rect>
                            <rect x="6.01041" y="10.9247" width="12" height="2" rx="1" fill="black"></rect>
                        </svg>
                    </span>
                </div>
                <h4 class="text-gray-700 fw-bolder cursor-pointer mb-0">Active</h4>
            </div>
            <div id="kt_job_6_active" class="row g-5 g-xl-10 mb-xl-10 collapse show">
                @foreach ($todos as $todo)
                @if ($todo->status == "Deschis")
                <div class="col-12" >
                    <div class="card"  style="background-color: #f3fff3;">
                        <div class="card-header pt-5">
                            <div class="card-title d-flex flex-column">
                                <table class="table table-row-dashed align-middle gs-0 gy-4 my-0" id="todos_active_table">
                                    <tbody>
                                        <tr>
                                            <td class="text-end">  
                                                @if (Auth::user()->_id == $user_id)
                                                <a href="{{ route('todo.changeStatus', [$todo->_id]) }}" class="btn btn-icon btn-bg-light btn-active-color-primary btn-sm" data-action="delete_row">
                                                    <span class="svg-icon svg-icon-3">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512" fill="none">
                                                            <path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z" fill="black"/>

                                                        </svg>
                                                    </span>
                                                </a>
                                                @endif
                                            </td> 
                                            
                                            <td>
                                                <div class="d-flex align-items-center mb-8">
                                                    &nbsp;
													<div class="d-flex justify-content-start flex-column">
                                                        <span class="fw-bold d-block fs-7">{{$todo->message}}</span>
                                                    </div> 
												</div>
                                            </td> 
                                            
                                        </tr>                               
                                    </tbody>
                                </table>                           
                            </div>                        
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <span class="col-6 text-gray-400 fw-bold fs-7 d-block text-start ps-0">Creat de: <span style="color:#3366ff"><b>{{$todo->created_by->name}}</b></span></span>
                                <span class="col-6 text-gray-400 fw-bold fs-7 d-block text-end ps-0">La data de: <span style="color:#3366ff"><b>{{$todo->created_at->format('d-m-Y')}}</b></span></span>
                            </div>
                        </div>
                    </div>  
                </div>
                @endif
                @endforeach   
            </div>
            <div class="separator separator-dashed"></div>
        </div>   
        
        <div class="m-0">
            <div class="d-flex align-items-center collapsible py-3 toggle mb-0 collapsed" data-bs-toggle="collapse" data-bs-target="#kt_job_6_inactive" aria-expanded="true">
                <div class="btn btn-sm btn-icon mw-20px btn-active-color-primary me-5">
                    <span class="svg-icon toggle-on svg-icon-primary svg-icon-1">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <rect opacity="0.3" x="2" y="2" width="20" height="20" rx="5" fill="black"></rect>
                            <rect x="6.0104" y="10.9247" width="12" height="2" rx="1" fill="black"></rect>
                        </svg>
                    </span>
                    <span class="svg-icon toggle-off svg-icon-1">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <rect opacity="0.3" x="2" y="2" width="20" height="20" rx="5" fill="black"></rect>
                            <rect x="10.8891" y="17.8033" width="12" height="2" rx="1" transform="rotate(-90 10.8891 17.8033)" fill="black"></rect>
                            <rect x="6.01041" y="10.9247" width="12" height="2" rx="1" fill="black"></rect>
                        </svg>
                    </span>
                </div>
                <h4 class="text-gray-700 fw-bolder cursor-pointer mb-0">Inactive</h4>
            </div>
            <div id="kt_job_6_inactive" class="row g-5 g-xl-10 mb-xl-10 collapse">
                @foreach ($todos as $todo)
                @if ($todo->status != "Deschis")
                <div class="col-12" >
                    <div class="card" style="background-color: #fff3f3;">
                        <div class="card-header pt-5">
                            <div class="card-title d-flex flex-column">
                                <table class="table table-row-dashed align-middle gs-0 gy-4 my-0" id="todos_inactive_table">
                                    <tbody>
                                        <tr>
                                            
                                            <td class="ps-0">
                                                <div class="d-flex align-items-center mb-8">
                                                    &nbsp;
													<div class="d-flex justify-content-start flex-column">
                                                        <span class="fw-bold d-block fs-7">{{$todo->message}}</span>
                                                    </div> 
												</div>
                                            </td> 
                                            
                                        </tr>                               
                                    </tbody>
                                </table>                           
                            </div>                        
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <span class="col-6 text-gray-400 fw-bold fs-7 d-block text-start ps-0">Creat de: <span style="color:#3366ff"><b>{{$todo->created_by->name}}</b></span></span>
                                <span class="col-6 text-gray-400 fw-bold fs-7 d-block text-end ps-0">La data de: <span style="color:#3366ff"><b>{{$todo->created_at->format('d-m-Y')}}</b></span></span>
                            </div>
                        </div>
                    </div>  
                </div>
                @endif
                @endforeach   
            </div>
            <div class="separator separator-dashed"></div>
        </div>
        
    </div>
    

    <div class="modal fade" id="kt_modal_upgrade_plan" tabindex="-1" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-xl">
            <div class="modal-content rounded">
                <div class="modal-header justify-content-end border-0 pb-0">
                    <!--begin::Close-->
                    <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                        <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                        <span class="svg-icon svg-icon-1">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="black"></rect>
                                <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="black"></rect>
                            </svg>
                        </span>
                        <!--end::Svg Icon-->
                    </div>
                    <!--end::Close-->
                </div>
                <form action="{{ route('todo.save') }}" method="POST" class="form fv-plugins-bootstrap5 fv-plugins-framework">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">                                    
                    <div class="modal-body pt-0 pb-15 px-5 px-xl-20">
                        <div class="mb-13 text-center">
                            <h1 class="mb-3">Adauga todo</h1>
                        </div>
                        
                        <div class="col-md-3 fv-row fv-plugins-icon-container">
                            <label class="fs-5 fw-bold mb-2">Utilizator</label>
                            <select name="user_id" onchange="this.form.submit()" class="form-select form-select-solid select2-hidden-accessible"  data-control="select2" data-hide-search="true" tabindex="-1" aria-hidden="true">
                                @foreach ($users as $user)
                                <option value="{{ $user->_id }}" {{ ($user->_id== $user_id)?'selected':'' }}>{{ $user->name }}</option>
                                @endforeach
                            </select>
                        </div>
                            
                        <div class="d-flex flex-column mb-8">
                            <label class="fs-6 fw-bold mb-2">Mesaj</label>
                            <textarea class="form-control form-control-solid" rows="3" name="message" placeholder="Introduceți mesajul"></textarea>
                        </div>                  

                        <div class="d-flex flex-center flex-row-fluid pt-12">
                            <button type="submit" class="btn btn-primary">Salveaza</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="assets/plugins/custom/datatables/datatables.bundle.js"></script>
<script>
    const deleteButtons = document.querySelectorAll('[data-action="delete_row"]');

    deleteButtons.forEach(d => {
        d.addEventListener('click', function (e) {
            e.preventDefault();

            const parent = e.target.closest('tr');

            Swal.fire({
                html: "Ești sigur că vrei să modifici statusul?",
                icon: "warning",
                showCancelButton: true,
                buttonsStyling: false,
                confirmButtonText: "Da, modifică!",
                cancelButtonText: "Nu, anulează",
                customClass: {
                    confirmButton: "btn fw-bold btn-danger",
                    cancelButton: "btn fw-bold btn-active-light-primary"
                }
            }).then(function (result) {
                if (result.value) {
                    document.location.href = d.getAttribute('href');
                } 
            });
        })
    });
</script>
@endsection

@section('menuVariables')
<script>
    var menuItemName = "menuToDo";
</script>
@endsection