@extends('layouts.master')
@section('title')
    @lang('translation.crm')
@endsection
@section('css')
    <!-- jsvectormap css -->
    <link href="{{URL::asset('build/libs/jsvectormap/css/jsvectormap.min.css')}}" rel="stylesheet" type="text/css"/>
    <link href="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css"/>

    <!-- gridjs css -->
    <link rel="stylesheet" href="{{URL::asset('build/libs/gridjs/theme/mermaid.min.css')}}">
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1')
            Dashboards
        @endslot
        @slot('title')
            @if(Auth::user()->role === '3')
                {{' Welcome Super Admin'}}
            @elseif(Auth::user()->role === '2')
                {{ 'Welcome Admin' }}
            @endif
        @endslot
    @endcomponent

    {{--    @php--}}
    {{--    dd($trademarks)--}}
    {{--    @endphp--}}


    <div class="row">
        <div class="col-xl-12">
            <div class="d-flex flex-column h-100">
                <div class="row">
                    <div class="col-xl-6 col-md-6">
                        <div class="card card-animate overflow-hidden">
                            <div class="position-absolute start-0" style="z-index: 0;">
                                <svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 120" width="200"
                                     height="120">
                                    <style>
                                        .s0 {
                                            opacity: .05;
                                            fill: var(--vz-info)
                                        }

                                    </style>
                                    <path id="Shape 8" class="s0"
                                          d="m189.5-25.8c0 0 20.1 46.2-26.7 71.4 0 0-60 15.4-62.3 65.3-2.2 49.8-50.6 59.3-57.8 61.5-7.2 2.3-60.8 0-60.8 0l-11.9-199.4z"/>
                                </svg>
                            </div>
                            <div class="card-body" style="z-index:1 ;">
                                <div class="d-flex align-items-center">
                                    <div class="flex-grow-1 overflow-hidden">
                                        <p class="text-uppercase fw-medium text-muted text-truncate mb-3"> Total
                                            Jobs</p>
                                        <h4 class="fs-22 fw-semibold ff-secondary mb-0"><span class="counter-value"
                                                                                              data-target="36894">0</span>
                                        </h4>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <div id="total_jobs" data-colors='["--vz-success"]' class="apex-charts"
                                             dir="ltr"></div>
                                    </div>
                                </div>
                            </div><!-- end card body -->
                        </div><!-- end card -->
                    </div>
                    <!--end col-->
                    <div class="col-xl-6 col-md-6">
                        <!-- card -->
                        <div class="card card-animate overflow-hidden">
                            <div class="position-absolute start-0" style="z-index: 0;">
                                <svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 120" width="200"
                                     height="120">
                                    <style>
                                        .s0 {
                                            opacity: .05;
                                            fill: var(--vz-info)
                                        }

                                    </style>
                                    <path id="Shape 8" class="s0"
                                          d="m189.5-25.8c0 0 20.1 46.2-26.7 71.4 0 0-60 15.4-62.3 65.3-2.2 49.8-50.6 59.3-57.8 61.5-7.2 2.3-60.8 0-60.8 0l-11.9-199.4z"/>
                                </svg>
                            </div>
                            <div class="card-body" style="z-index:1 ;">
                                <div class="d-flex align-items-center">
                                    <div class="flex-grow-1 overflow-hidden">
                                        <p class="text-uppercase fw-medium text-muted text-truncate mb-3"> Apply
                                            Jobs</p>
                                        <h4 class="fs-22 fw-semibold ff-secondary mb-0"><span class="counter-value"
                                                                                              data-target="28410">0</span>
                                        </h4>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <div id="apply_jobs" data-colors='["--vz-success"]' class="apex-charts"
                                             dir="ltr"></div>
                                    </div>
                                </div>
                            </div><!-- end card body -->
                        </div><!-- end card -->
                    </div><!-- end col -->
                    <div class="col-xl-6 col-md-6">
                        <!-- card -->
                        <div class="card card-animate overflow-hidden">
                            <div class="position-absolute start-0" style="z-index: 0;">
                                <svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 120" width="200"
                                     height="120">
                                    <style>
                                        .s0 {
                                            opacity: .05;
                                            fill: var(--vz-info)
                                        }

                                    </style>
                                    <path id="Shape 8" class="s0"
                                          d="m189.5-25.8c0 0 20.1 46.2-26.7 71.4 0 0-60 15.4-62.3 65.3-2.2 49.8-50.6 59.3-57.8 61.5-7.2 2.3-60.8 0-60.8 0l-11.9-199.4z"/>
                                </svg>
                            </div>
                            <div class="card-body" style="z-index:1 ;">
                                <div class="d-flex align-items-center">
                                    <div class="flex-grow-1 overflow-hidden">
                                        <p class="text-uppercase fw-medium text-muted text-truncate mb-3">New Jobs</p>
                                        <h4 class="fs-22 fw-semibold ff-secondary mb-0"><span class="counter-value"
                                                                                              data-target="4305">0</span>
                                        </h4>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <div id="new_jobs_chart" data-colors='["--vz-success"]' class="apex-charts"
                                             dir="ltr"></div>
                                    </div>
                                </div>
                            </div><!-- end card body -->
                        </div><!-- end card -->
                    </div><!-- end col -->
                    <div class="col-xl-6 col-md-6">
                        <!-- card -->
                        <div class="card card-animate overflow-hidden">
                            <div class="position-absolute start-0" style="z-index: 0;">
                                <svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 120" width="200"
                                     height="120">
                                    <style>
                                        .s0 {
                                            opacity: .05;
                                            fill: var(--vz-info)
                                        }

                                    </style>
                                    <path id="Shape 8" class="s0"
                                          d="m189.5-25.8c0 0 20.1 46.2-26.7 71.4 0 0-60 15.4-62.3 65.3-2.2 49.8-50.6 59.3-57.8 61.5-7.2 2.3-60.8 0-60.8 0l-11.9-199.4z"/>
                                </svg>
                            </div>
                            <div class="card-body" style="z-index:1 ;">
                                <div class="d-flex align-items-center">
                                    <div class="flex-grow-1 overflow-hidden">
                                        <p class="text-uppercase fw-medium text-muted text-truncate mb-3"> Interview</p>
                                        <h4 class="fs-22 fw-semibold ff-secondary mb-0"><span class="counter-value"
                                                                                              data-target="5021">0</span>
                                        </h4>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <div id="interview_chart" data-colors='["--vz-danger"]' class="apex-charts"
                                             dir="ltr"></div>
                                    </div>
                                </div>
                            </div><!-- end card body -->
                        </div><!-- end card -->
                    </div><!-- end col -->
                    <div class="col-xl-6 col-md-6">
                        <div class="card card-animate overflow-hidden">
                            <div class="position-absolute start-0" style="z-index: 0;">
                                <svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 120" width="200"
                                     height="120">
                                    <style>
                                        .s0 {
                                            opacity: .05;
                                            fill: var(--vz-info)
                                        }

                                    </style>
                                    <path id="Shape 8" class="s0"
                                          d="m189.5-25.8c0 0 20.1 46.2-26.7 71.4 0 0-60 15.4-62.3 65.3-2.2 49.8-50.6 59.3-57.8 61.5-7.2 2.3-60.8 0-60.8 0l-11.9-199.4z"/>
                                </svg>
                            </div>
                            <div class="card-body" style="z-index:1 ;">
                                <div class="d-flex align-items-center">
                                    <div class="flex-grow-1 overflow-hidden">
                                        <p class="text-uppercase fw-medium text-muted text-truncate mb-3"> Hired</p>
                                        <h4 class="fs-22 fw-semibold ff-secondary mb-0"><span class="counter-value"
                                                                                              data-target="3948">0</span>
                                        </h4>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <div id="hired_chart" data-colors='["--vz-success"]' class="apex-charts"
                                             dir="ltr"></div>
                                    </div>
                                </div>
                            </div><!-- end card body -->
                        </div><!-- end card -->
                    </div>
                    <!--end col-->
                    <div class="col-xl-6 col-md-6">
                        <!-- card -->
                        <div class="card card-animate overflow-hidden">
                            <div class="position-absolute start-0" style="z-index: 0;">
                                <svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 120" width="200"
                                     height="120">
                                    <style>
                                        .s0 {
                                            opacity: .05;
                                            fill: var(--vz-info)
                                        }

                                    </style>
                                    <path id="Shape 8" class="s0"
                                          d="m189.5-25.8c0 0 20.1 46.2-26.7 71.4 0 0-60 15.4-62.3 65.3-2.2 49.8-50.6 59.3-57.8 61.5-7.2 2.3-60.8 0-60.8 0l-11.9-199.4z"/>
                                </svg>
                            </div>
                            <div class="card-body" style="z-index:1 ;">
                                <div class="d-flex align-items-center">
                                    <div class="flex-grow-1 overflow-hidden">
                                        <p class="text-uppercase fw-medium text-muted text-truncate mb-3">Rejected</p>
                                        <h4 class="fs-22 fw-semibold ff-secondary mb-0"><span class="counter-value"
                                                                                              data-target="1340">0</span>
                                        </h4>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <div id="rejected_chart" data-colors='["--vz-danger"]' class="apex-charts"
                                             dir="ltr"></div>
                                    </div>
                                </div>
                            </div><!-- end card body -->
                        </div><!-- end card -->
                    </div><!-- end col -->
                </div>
                <!--end row-->
            </div>
        </div>
        <!--end col-->
    </div>
    <!--end row-->

    <div class="row">
        <div class="col-xxl-12">
            <div class="card card-height-100">
                <div class="card-header border-0 align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1">Applications Statistic</h4>
                    <div>
                        <button type="button" class="btn btn-soft-secondary btn-sm">
                            ALL
                        </button>
                        <button type="button" class="btn btn-soft-secondary btn-sm">
                            1M
                        </button>
                        <button type="button" class="btn btn-soft-secondary btn-sm">
                            6M
                        </button>
                        <button type="button" class="btn btn-soft-primary btn-sm">
                            1Y
                        </button>
                    </div>
                </div><!-- end card header -->

                <div class="card-header p-0 border-0 bg-light-subtle">
                    <div class="row g-0 text-center">
                        <div class="col-6 col-sm-3">
                            <div class="p-3 border border-dashed border-start-0">
                                <h5 class="mb-1 fs-17 fw-semibold"><span class="counter-value"
                                                                         data-target="3364">0</span></h5>
                                <p class="text-muted mb-0">New Applications</p>
                            </div>
                        </div>
                        <!--end col-->
                        <div class="col-6 col-sm-3">
                            <div class="p-3 border border-dashed border-start-0">
                                <h5 class="mb-1 fs-17 fw-semibold"><span class="counter-value"
                                                                         data-target="2804">0</span></h5>
                                <p class="text-muted mb-0">Interview</p>
                            </div>
                        </div>
                        <!--end col-->
                        <div class="col-6 col-sm-3">
                            <div class="p-3 border border-dashed border-start-0">
                                <h5 class="mb-1 fs-17 fw-semibold"><span class="counter-value"
                                                                         data-target="2402">0</span></h5>
                                <p class="text-muted mb-0">Hired</p>
                            </div>
                        </div>
                        <!--end col-->
                        <div class="col-6 col-sm-3">
                            <div class="p-3 border border-dashed border-start-0 border-end-0">
                                <h5 class="mb-1 text-success"><span class="counter-value" data-target="8">0</span>k</h5>
                                <p class="text-muted mb-0">Total Applications</p>
                            </div>
                        </div>
                        <!--end col-->
                    </div>
                </div><!-- end card header -->

                <div class="card-body p-0 pb-2">
                    <div class="w-100">
                        <div id="line_chart_dashed" data-colors='["--vz-success", "--vz-primary", "--vz-secondary"]'
                             class="apex-charts" dir="ltr"></div>
                    </div>
                </div><!-- end card body -->
            </div><!-- end card -->
        </div><!-- end col -->
        <!-- end col -->
    </div>
    <!--end row-->

    <div class="row">
        <div class="col-lg-12">
            <div class="card" id="invoiceList">
                <div class="card-header border-0">
                    <div class="d-flex align-items-center">
                        <h5 class="card-title mb-0 flex-grow-1">Invoices</h5>
                        <div class="flex-shrink-0">
                            <div class="d-flex gap-2 flex-wrap">
                                <button class="btn btn-danger" id="remove-actions" onClick="deleteMultiple()"><i
                                        class="ri-delete-bin-2-line"></i></button>
                                <a href="apps-invoices-create" class="btn btn-success"><i
                                        class="ri-add-line align-bottom me-1"></i> Create Invoice</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body bg-light-subtle border border-dashed border-start-0 border-end-0">
                    <form>
                        <div class="row g-3">
                            <div class="col-xxl-5 col-sm-12">
                                <div class="search-box">
                                    <input type="text" class="form-control search bg-light border-light"
                                           placeholder="Search for customer, email, country, status or something...">
                                    <i class="ri-search-line search-icon"></i>
                                </div>
                            </div>
                            <!--end col-->
                            <div class="col-xxl-3 col-sm-4">
                                <input type="text" class="form-control bg-light border-light" id="datepicker-range"
                                       placeholder="Select date">
                            </div>
                            <!--end col-->
                            <div class="col-xxl-3 col-sm-4">
                                <div class="input-light">
                                    <select class="form-control" data-choices data-choices-search-false
                                            name="choices-single-default" id="idStatus">
                                        <option value="">Status</option>
                                        <option value="all" selected>All</option>
                                        <option value="Unpaid">Unpaid</option>
                                        <option value="Paid">Paid</option>
                                        <option value="Cancel">Cancel</option>
                                        <option value="Refund">Refund</option>
                                    </select>
                                </div>
                            </div>
                            <!--end col-->

                            <div class="col-xxl-1 col-sm-4">
                                <button type="button" class="btn btn-primary w-100" onclick="SearchData();">
                                    <i class="ri-equalizer-fill me-1 align-bottom"></i> Filters
                                </button>
                            </div>
                            <!--end col-->
                        </div>
                        <!--end row-->
                    </form>
                </div>
                <div class="card-body">
                    <div>
                        <div class="table-responsive table-card">
                            <table class="table align-middle table-nowrap" id="invoiceTable">
                                <thead class="text-muted">
                                <tr>
                                    <th scope="col" style="width: 50px;">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="checkAll"
                                                   value="option">
                                        </div>
                                    </th>
                                    <th class="sort text-uppercase" data-sort="invoice_id">ID</th>
                                    <th class="sort text-uppercase" data-sort="customer_name">
                                        Customer
                                    </th>
                                    <th class="sort text-uppercase" data-sort="date">Applied</th>
                                    <th class="sort text-uppercase" data-sort="email">Usage</th>
                                    <th class="sort text-uppercase" data-sort="country">Ownership</th>
                                    <th class="sort text-uppercase" data-sort="date">Name</th>
                                    <th class="sort text-uppercase" data-sort="invoice_amount">
                                        Type
                                    </th>
                                    <th class="sort text-uppercase" data-sort="status">
                                        Status
                                    </th>
                                    <th class="sort text-uppercase" data-sort="action">Action</th>
                                </tr>
                                </thead>
                                <tbody class="list form-check-all">
                                @foreach($trademarks as $trademark)
                                    <tr>
                                        <td>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="{{ $trademark->id }}">
                                            </div>
                                        </td>
                                        <td>{{ $trademark->id }}</td>
                                        <td>{{ optional($trademark->user)->first_name . ' ' . optional($trademark->user)->last_name ?? 'N/A' }}</td>
                                        <td>{{ $trademark->created_at->format('Y-m-d H:i') }}</td>

                                        <td>@lang('admin-dashboard.' . $trademark->usage)</td>
                                        <td>{{ ucfirst($trademark->ownership) ?? 'N/A' }}</td>
                                        <td>{{ ucfirst($trademark->trademark_type == 'word' ? optional($trademark->wordMark)->trademark_name : optional($trademark->logoMark)->trademark_name) ?? 'N/A' }}</td>
                                        <td>{{ ucfirst($trademark->trademark_type) ?? 'N/A' }}</td>

                                        <td class="table-column-orders text-start py-1">
        <span class="badge @switch($trademark->status)
            @case('pending') bg-warning-subtle text-warning @break
            @case('missing_doc') bg-primary-subtle text-primary @break
            @case('rejected') bg-danger-subtle text-danger @break
            @case('approved') bg-success-subtle text-success @break
            @endswitch text-uppercase">
            {{ ucfirst($trademark->status) }}
        </span>
                                        </td>

                                        <td class="table-column-actions text-start px-2 py-1">
                                            <div class="dropdown">
                                                <button class="btn btn-soft-secondary btn-sm dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                    <i class="ri-more-fill"></i>
                                                </button>
                                                <ul class="dropdown-menu dropdown-menu-end">
                                                    <li>
                                                        <a class="dropdown-item" href="product.create">
                                                            <i class="ri-eye-fill align-bottom me-2 text-muted"></i>View
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item edit-list" data-edit-id="{{ $trademark->id }}" href="apps-ecommerce-add-product">
                                                            <i class="ri-pencil-fill align-bottom me-2 text-muted"></i>Edit
                                                        </a>
                                                    </li>
                                                    <li class="dropdown-divider"></li>
                                                    <li>
                                                        <a class="dropdown-item remove-list" href="#" data-id="{{ $trademark->id }}" data-bs-toggle="modal" data-bs-target="#removeItemModal">
                                                            <i class="ri-delete-bin-fill align-bottom me-2 text-muted"></i>Delete
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach

                                </tbody>
                            </table>
                            <div class="noresult" style="display: none">
                                <div class="text-center">
                                    <lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop"
                                               colors="primary:#121331,secondary:#08a88a"
                                               style="width:75px;height:75px">
                                    </lord-icon>
                                    <h5 class="mt-2">Sorry! No Result Found</h5>
                                    <p class="text-muted mb-0">We've searched more than 150+ Orders We did not find any
                                        orders for you search.</p>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-end mt-3">
                            <div class="pagination-wrap hstack gap-2">
                                <a class="page-item pagination-prev disabled" href="#">
                                    Previous
                                </a>
                                <ul class="pagination listjs-pagination mb-0"></ul>
                                <a class="page-item pagination-next" href="#">
                                    Next
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Modal -->
                    <div class="modal fade flip" id="deleteOrder" tabindex="-1" aria-labelledby="deleteOrderLabel"
                         aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-body p-5 text-center">
                                    <lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop"
                                               colors="primary:#405189,secondary:#f06548"
                                               style="width:90px;height:90px">
                                    </lord-icon>
                                    <div class="mt-4 text-center">
                                        <h4>You are about to delete a order ?</h4>
                                        <p class="text-muted fs-15 mb-4">Deleting your order will remove all of
                                            your information from our database.</p>
                                        <div class="hstack gap-2 justify-content-center remove">
                                            <button class="btn btn-link link-success fw-medium text-decoration-none"
                                                    id="deleteRecord-close" data-bs-dismiss="modal"><i
                                                    class="ri-close-line me-1 align-middle"></i>
                                                Close
                                            </button>
                                            <button class="btn btn-danger" id="delete-record">Yes, Delete It</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--end modal -->
                </div>
            </div>

        </div>
        <!--end col-->
    </div>
@endsection
@section('script')
    <!-- apexcharts -->
    <script src="{{URL::asset('build/libs/apexcharts/apexcharts.min.js')}}"></script>

    <!-- Vector map-->
    <script src="{{URL::asset('build/libs/jsvectormap/js/jsvectormap.min.js')}}"></script>
    <script src="{{ URL::asset('build/libs/jsvectormap/maps/world-merc.js') }}"></script>
    <!-- gridjs js -->
    <script src="{{URL::asset('build/libs/gridjs/gridjs.umd.js')}}"></script>

    <!-- Dashboard init -->
    <script src="{{URL::asset('build/js/pages/dashboard-job.init.js')}}"></script>


    {{--    Used for dashboard should check--}}
    <script src="{{ URL::asset('build/libs/list.js/list.min.js') }}"></script>
    {{--    <script src="{{ URL::asset('build/libs/list.pagination.js/list.pagination.min.js') }}"></script>--}}
    {{--        <script src="{{ URL::asset('build/js/pages/invoiceslist.init.js') }}"></script>--}}
    <script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>


    <!-- App js -->
    <script src="{{URL::asset('build/js/app.js')}}"></script>
@endsection