@extends('layouts.tenant.dreams_tech.app')

@section('page_css')
    <link rel="stylesheet" href="{{ config('env.themes.dreams_tech.folder') }}/css/bootstrap-datetimepicker.min.css" />
    <link rel="stylesheet" href="{{ config('env.themes.dreams_tech.folder') }}/plugins/select2/css/select2.min.css" />
    <link rel="stylesheet" href="{{ config('env.themes.dreams_tech.folder') }}/plugins/icons/feather/feather.css" />
    <style>
        @if ($page_type == 'contacts')
            .option-item {
                margin-bottom: 4px;
            }

            .option-item td:first-child,
            .option-item td:last-child {
                position: relative;
            }

            .option-item td:first-child::before {
                position: absolute;
                top: 0;
                left: 0;
                content: "";
                width: 2px;
                height: 100%;
                background: #FFA201;
            }

            .option-item td:last-child::after {
                position: absolute;
                top: 0;
                right: 0;
                content: "";
                width: 2px;
                height: 100%;
                background: #FFA201;
            }

            .table-column {
                cursor: pointer;
            }

            .mr-5 {
                margin-right: 5px;
            }

            .mr-10 {
                margin-right: 10px;
            }

            .ml-5 {
                margin-left: 5px;
            }

            .ml-10 {
                margin-left: 10px;
            }

            .status-toggles {
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .status-toggles input[type="checkbox"] {
                display: none;
            }

            .custom-table .table-responsive {
                overflow: visible !important;
            }
        @endif
    </style>
@endsection

@section('page_content')
    <div class="row">
        <div class="col-lg-12">
            @livewire('tenant.lemarex.pipeline.pipeline-landing-page', ['page_title' => $page_title])
        </div>
    </div>
@stop

@section('page_js')
    <script src="https://cdn.jsdelivr.net/gh/livewire/sortable@v1.x.x/dist/livewire-sortable.js"></script>
    <script src="{{ config('env.themes.dreams_tech.folder') }}/js/jquery-ui.min.js"></script>
    <script src="{{ config('env.themes.dreams_tech.folder') }}/js/bootstrap-datetimepicker.min.js"></script>
    <script src="{{ config('env.themes.dreams_tech.folder') }}/plugins/select2/js/select2.min.js"></script>
    <script src="{{ config('env.themes.dreams_tech.folder') }}/plugins/sweetalert/sweetalert2.all.min.js"></script>
    <script src="{{ config('env.themes.dreams_tech.folder') }}/plugins/sweetalert/sweetalerts.min.js"></script>
    <script type="text/javascript">
        window.addEventListener('pipeline-created', event => {
            $('#add_pipeline').offcanvas('hide');
            Swal.fire({
                title: "Pipeline Created!",
                text: "The pipeline has been created!",
            }).then(function() {
                window.location.href = event.detail.redirect_link;
            });
        });
        window.addEventListener('pipeline-created-close', event => {
            $('#add_pipeline').offcanvas('hide');
        });
        window.addEventListener('{{ $page_type }}-deleted', event => {
            Swal.fire({
                title: "{{ ucfirst($page_type) }}(s) Deleted!",
                text: "The {{ $page_type }}(s) has been deleted!",
            });
        });
        window.addEventListener('{{ $page_type }}-restored', event => {
            Swal.fire({
                title: "{{ ucfirst($page_type) }}(s) Restored!",
                text: "The deleted {{ $page_type }}(s) has been restored!",
            });
        });
        window.addEventListener('{{ $page_type }}-updated', event => {
            Swal.fire({
                title: "{{ ucfirst($page_type) }} Updated!",
                text: "The {{ $page_type }} has been updated!",
            });
        });
        window.addEventListener('{{ $page_type }}-deleted', event => {
            Swal.fire({
                title: "{{ ucfirst($page_type) }} Deleted!",
                text: "The {{ $page_type }} has been deleted!",
            });
        });
    </script>
@endsection