@php(
    $headerOption = [
        'title' => '',
        'noCardView' => true,
    ]
)
@extends('front.layouts.layout', $headerOption)

@section('content')
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-flex align-items-center justify-content-between">
                <h4 class="mb-0 font-size-18">Policy Center</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">Dashboard</a></li>
                        <li class="breadcrumb-item active">Policy Center</li>
                    </ol>
                </div>

            </div>
        </div>
    </div>
    <!-- end page title -->

    <div class="card">
        <div class="card-body">
            <!-- <div class="alert alert-info alert-dismissible fade show mb-3" role="alert">
                <div class="d-flex gap-5">
                    <i class="mdi mdi-alert-circle-outline mr-2"></i>
                    This compliance policy serves as a guide for all individuals associated with the organization and outlines the expectations for maintaining legal and ethical standards. It is the responsibility of each individual to adhere to this policy and contribute to a culture of compliance within the organization.
                </div>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div> -->
            <div class="d-flex justify-content-between mb-3">
                <div class="w-f-150">
                    <select class="form-control border-radius-100">
                        <option>All Status</option>
                    </select>
                </div>
                <div class="d-flex align-items-center gap-10">
                    <div class="search-box">
                        <div class="position-relative">
                            <input type="text" class="form-control" placeholder="Search...">
                            <i class="bx bx-search-alt search-icon"></i>
                        </div>
                    </div>
                    <a href="javascript:void(0);" class="btn btn-light btn-rounded waves-effect">Download All</a>
                    <a href="javascript:void(0);"
                        class="btn btn-primary btn-rounded waves-effect waves-light right-bar-toggle">Create Custom
                        Policy</a>
                </div>
            </div>
            <div class="table-responsive policy-table mb-0" data-pattern="priority-columns">
                <table id="tech-companies-1" class="table table-striped">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Policy Name <i class="bx bx-chevron-up ml-1"></i></th>
                            <th data-priority="1">Approved On</th>
                            <th data-priority="3">Renew On</th>
                            <th data-priority="1">SLA</th>
                            <th data-priority="3">Version</th>
                            <th data-priority="3">Assign To</th>
                            <th data-priority="6">Owner</th>
                            <th data-priority="6">Created On</th>
                            <th data-priority="6">Last Draft</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($policies as $key => $val)
                            <tr>
                                <td>
                                    <a href="javascript:void(0);" data-id="{{ $val->code }}"
                                        class="right-bar-toggle policy"><i class="bx bx-edit font-size-20"></i></a>
                                    <a href="#"><i class="bx bx-box font-size-20 ml-1 mr-1"></i></a>
                                    <a href="#"><i class="bx bx-file font-size-20"></i></a>
                                </td>
                                <td>{{ $val->title }}</td>
                                <td>{{ date('F j, Y', strtotime($val->approved_at)) }}</td>
                                {{-- <td>{{ date("F j, Y", strtotime($val->renewal_at)) }}</td> --}}
                                <td>{{ $val->renewal_at }}</td>
                                <td><i class="bx bx-check-circle"></i></td>
                                <td><span class="badge badge-soft-success badge-pill ml-1 font-size-12">V1</span></td>
                                <td>All Personnel</td>
                                <td>
                                    <div class="media">
                                        <div class="avatar-xs align-self-center mr-3">
                                            <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                K
                                            </span>
                                        </div>
                                        <div class="media-body overflow-hidden">
                                            <h5 class="text-truncate font-size-14 mb-1">Keith Gonzales</h5>
                                            <p class="text-truncate mb-0">This theme is awesome!</p>
                                        </div>
                                    </div>
                                </td>
                                <td>{{ date('F j, Y', strtotime($val->created_at)) }}</td>
                                <td>{{ '2nd Dec 2022' }}</td>
                            </tr>
                        @endforeach
                        {{-- <tr>
                        <td>
                            <a href="#"><i class="bx bx-edit font-size-20"></i></a>
                            <a href="#"><i class="bx bx-box font-size-20 ml-1 mr-1"></i></a>
                            <a href="#"><i class="bx bx-file font-size-20"></i></a>
                        </td>
                        <td>Acceptable User Policy</td>
                        <td>16th May 2023</td>
                        <td>16th May 2023</td>
                        <td><i class="bx bx-check-circle"></i></td>
                        <td><span class="badge badge-soft-success badge-pill ml-1 font-size-12">V1</span></td>
                        <td>All Personnel</td>
                        <td>
                            <div class="media">
                                <div class="avatar-xs align-self-center mr-3">
                                    <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                        K
                                    </span>
                                </div>
                                <div class="media-body overflow-hidden">
                                    <h5 class="text-truncate font-size-14 mb-1">Keith Gonzales</h5>
                                    <p class="text-truncate mb-0">This theme is awesome!</p>
                                </div>
                            </div>
                        </td>
                        <td>8 months ago via Drata</td>
                        <td>a month ago</td>
                    </tr> --}}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- modal -->
    <div class="right-bar right-bar-xl">
        <div data-simplebar class="h-100">
            <div class="rightbar-title px-3 py-4">
                <a href="javascript:void(0);" class="right-bar-toggle float-right">
                    <i class="mdi mdi-close noti-icon"></i>
                </a>
                <h5 class="m-0">Create Custom Policy</h5>
            </div>

            <div class="px-3 pt-4">

                <div class="connection-block-wrapper">
                    <div class="pol-sec">
                        <h2 class="card-title mb-2">Policy Source</h2>
                        <p class="text-muted">Choose how to create and upload your new <a href="#">custom policy :</a>
                        </p>
                    </div>
                    <hr>
                    <div class="up-policy-btn">
                        <button class="up-in-btn mb-2 active" type="button">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="radio1" name="radio" class="custom-control-input"
                                    value="success" checked="true">
                                <label class="custom-control-label" for="radio1"></label>
                            </div>
                            <div class="up-policy-btn-text">
                                <h4>Upload Policy</h4>
                                <span>You'll need to upload a new file for each update.</span>
                            </div>
                        </button>
                        <button class="up-in-btn" type="button">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="radio2" name="radio" class="custom-control-input"
                                    value="success">
                                <label class="custom-control-label" for="radio2"></label>
                            </div>
                            <div class="up-policy-btn-text">
                                <h4>Author policy in Drata</h4>
                                <span>You'll need to upload a new file for each update.</span>
                            </div>
                        </button>
                    </div>
                </div>

                <div class="connection-block-wrapper">
                    <div class="up-pol">
                        <h2 class="card-title mb-2 mt-4">Upload Policy</h2>
                        <hr>
                        <form action="#" class="dropzone dz-clickable text-center p-3">

                            <div class="dz-message needsclick upload-policy-document">
                                <div class="mb-2">
                                    <i class="display-4 text-muted bx bxs-cloud-upload"></i>
                                </div>

                                <h4>Upload File</h4>
                            </div>
                            <input name="policy_doc" type="file" class="up-file policy_doc-file d-none"
                                id="actual-file"
                                accept="application/pdf,application/msword,
                                        application/vnd.openxmlformats-officedocument.wordprocessingml.document" />
                        </form>
                        <span class="mt-1 text-muted d-block">Accepted file extension: .pdf, .docx, .odt, .xlsx, .ods,
                            .pptx, .odp</span>
                    </div>
                </div>
                <div class="connection-block-wrapper">
                    <div class="up-form-sec">
                        <h2 class="card-title mb-2 mt-4">Details</h2>
                        <hr>
                        <form class="">

                            <div class="form-group">
                                <label for="formrow-firstname-input"> Name <sup class="text-danger">*</sup></label>
                                <input type="text" class="form-control" id="formrow-firstname-input">
                            </div>

                            <div class="row">

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="formrow-email-input">Description<sup
                                                class="text-danger">*</sup></label>
                                        <input type="textarea" class="form-control" id="formrow-email-input"
                                            rows="4">
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="formrow-password-input">Renewal Date<sup
                                                class="text-danger">*</sup></label>
                                        <div class="row">
                                            <div class="col-lg-6 col-12">
                                                <select class="form-control">
                                                    <option>1 Year</option>
                                                    <option>2 Year</option>
                                                    <option>3 Year</option>
                                                </select>
                                            </div>
                                            <div class="col-lg-6 col-12">
                                                <input type="text" class="form-control" placeholder="July 7 , 2024"
                                                    id="renewal_at">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="formrow-password-input">Owner <sup class="text-danger">*</sup></label>
                                        <select class="form-control">
                                            <option>Search for personnel...</option>
                                            {{-- <option>Name 01</option>
                                <option>Name 02</option> --}}
                                        </select>
                                    </div>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
                <div class="connection-block-wrapper">
                    <div class="personal-sec">
                        <h2 class="card-title mb-2 mt-4">Personnel</h2>
                        <p class="text-muted">Choose who need to accept the policy: <sup class="text-danger">*</sup></p>
                        <hr>
                        <div class="control-group" id="toastTypeGroup">
                            <div class="controls mb-4">
                                <div class="custom-control custom-radio mb-2">
                                    <input type="radio" id="radio5" name="policy" class="custom-control-input"
                                        value="success" checked="true">
                                    <label class="custom-control-label" for="radio5">All Personnel</label>
                                </div>

                                <div class="custom-control custom-radio mb-2">
                                    <input type="radio" id="radio6" name="policy" class="custom-control-input"
                                        value="info">
                                    <label class="custom-control-label" for="radio6">Specific groups</label>
                                </div>

                                <div class="custom-control custom-radio mb-2">
                                    <input type="radio" id="radio3" name="policy" class="custom-control-input"
                                        value="warning">
                                    <label class="custom-control-label" for="radio3">Policy dose't apply to
                                        personnel</label>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="connection-block-wrapper">
                    <div class="drata-policy">
                        <h2 class="card-title mb-2 mt-4">Personnel</h2>
                        <p class="text-muted">You can <a href="javascript:void(0);" style="color: #000;">replace the
                                corporate governance policy</a> with this custom policy if you want.</p>
                        <hr>
                        <button type="button" class="btn btn-primary btn-rounded waves-effect w-100 text-center">Select
                            policies</button>
                    </div>
                </div>
                <div class="d-flex justify-content-end gap-10 border-top pt-4 pb-4">
                    <a href="#"
                        class="btn btn-outline-primary btn-rounded waves-effect waves-light px-5 py-2">Cancel</a>
                    <a href="#" class="btn btn-primary btn-rounded waves-effect waves-light px-5 py-2"
                        id="policy-data">Create</a>
                </div>
            </div>



        </div> <!-- end slimscroll-menu-->
    </div>
@endsection
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        // var app_url = "http://127.0.0.1:8000"
        $('body').on('click', '.policy', function() {
            var id = $(this).attr('data-id')
            var app_url = "