@extends('layouts.metronic')

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


@section('content')
<div id="kt_content_container" class="container-xxl">
    @if (Auth::user()->role->code == 'CLIENT')
    <div >
        <div class="row">
            <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ă tichet</a>
            </div>
        </div>
    </div><br>
    @else
        <form action="{{ route('tickets') }}" 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">Proiect</label>
                    <select name="project_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 ($projects_for_combo as $project)
                        <option value="{{ $project->_id }}" {{ ($project->_id== $project_id)?'selected':'' }}>{{ $project->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </form>
    @endif
    
    <div class="col-md-12 pe-md-10 mb-10 mb-md-0">
        @foreach($projects as $project)
        <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_{{$project->_id}}" 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">{{$project->name}}</h4>
            </div>
            <div id="kt_job_6_{{$project->_id}}" class="row g-5 g-xl-10 mb-xl-10 collapse show">
                @foreach ($project->tickets as $ticket)
                <div class="col-12" >
                    <div class="card" >
                        <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">
                                    <tbody>
                                        <tr>
                                            <td>
                                                @if ($ticket->status == "Deschis" && Auth::user()->role->code != "CLIENT")
                                                    <a href="{{ route('ticket.changeStatus', [$project_id, $ticket->_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 class="ps-0">
                                                <div class="d-flex align-items-center mb-8">
                                                    
                                                    
                                                    &nbsp;
													<div class="d-flex justify-content-start flex-column">
                                                        <a href="#" class="text-dark fw-bolder text-hover-primary fs-6">{{$ticket->subject}}
                                                            @if ($ticket->status == "Deschis")
                                                        <span class="badge badge-light-success fs-8 fw-bolder">Deschis</span>
                                                    @else
                                                        <span class="badge badge-light-danger fs-8 fw-bolder">Închis</span>
                                                    @endif
                                                        </a>
                                                        
                                                        <span class="text-muted fw-bold text-muted d-block fs-7">{{$ticket->message}}</span>
                                                    </div> 
													<!--end::Description-->
													
												</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">
                                    @if (Auth::user()->role->code != "CLIENT") 
                                    @if ($ticket->user_names != null)
                                    Asignat lui: 
                                    @foreach($ticket->user_names as $user_name)

                                    <span style="color:#3366ff"><b>{{$user_name}}, </b></span>
                                    @endforeach
                                    @endif
                                    @endif
                                </span>
                                
                                <span class="col-6 text-gray-400 fw-bold fs-7 d-block text-end ps-0">Creat la data: <span style="color:#3366ff"><b>{{$ticket->created_at->format('d-m-Y')}}</b></span></span>
                            </div>
                            
                        </div>
                    </div>  
                </div>
                @endforeach   
            </div>
            <div class="separator separator-dashed"></div>
        </div>
        @endforeach    
        
    </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('ticket.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 ticket</h1>
                        </div>
                        
                        <div class="d-flex flex-column mb-8">
                                <label class="required fs-5 fw-bold mb-2">Subiect</label>
                                <input type="text" class="form-control form-control-solid" placeholder="" name="subject" required>
                            </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="Type Target Details"></textarea>
                            </div> 
                        

                            <div class="d-flex flex-column mb-8">
                            <label class="required fs-5 fw-bold mb-2">Proiect</label>
                                <select class="form-select form-select-solid select2-hidden-accessible" name="project_id" data-control="select2" data-hide-search="true" data-placeholder="Select a Team Member"  data-select2-id="" tabindex="-1" aria-hidden="true">
                                    @foreach ($projects as $project)
                                    <option value="{{$project->_id}}" data-select2-id="{{$project->_id}}">{{$project->name}}</option>
                                    @endforeach
                                </select>
                        </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 = "menuTickets";
</script>
@endsection