@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
        #stage_wrapper {}

        #stage_wrapper td {
            position: relative;
        }

        @foreach (config('env.stage_colors') as $key => $color)
            #stage_wrapper .{{ str_replace('bg-', '', $key) }}::before {
                background-color: {{ $color }};
            }
        @endforeach
        .bg-gray {
            background-color: #C0C0C0;
        }

        .stage-wrap::before {
            content: "";
            width: 3px;
            height: 100%;
            border-radius: 5px;
            position: absolute;
            top: 0;
            left: 0;
        }

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

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

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

        .custom-table .table-responsive {
            border-radius: 0px !important;
        }
    </style>
@endsection

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

@section('page_js')
    <script src="{{ config('env.themes.dreams_tech.folder') }}/plugins/theia-sticky-sidebar/ResizeSensor.js"></script>
    <script src="{{ config('env.themes.dreams_tech.folder') }}/plugins/theia-sticky-sidebar/theia-sticky-sidebar.js"></script>
    <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-updated', event => {
            Swal.fire({
                title: "Pipeline Updated!",
                text: "The pipeline has been updated!",
            });
        });
        window.addEventListener('pipeline-stage-deleted', event => {
            Swal.fire({
                title: "Stage Deleted!",
                text: "The pipeline stage has been deleted!",
            });
        });
        window.addEventListener('pipeline-sorted', event => {
            Swal.fire({
                title: "Sorted!",
                text: "Pipeline stages sorted successfully!",
            });
        });
        window.addEventListener('set-edit-form', event => {
            $('#loader').modal('show');
        });
        window.addEventListener('show-edit-form', event => {
            $('#loader').modal('hide');
            $('#add_edit_stage').offcanvas('show');
        });
        window.addEventListener('pipeline-stage-updated', event => {
            $('#add_edit_stage').offcanvas('hide');
            Swal.fire({
                title: "Pipeline Stage Updated!",
                text: "The pipeline stage has been updated!",
            });
        });
        window.addEventListener('pipeline-stage-created', event => {
            $('#add_edit_stage').offcanvas('hide');
            Swal.fire({
                title: "Pipeline Stage Created!",
                text: "The pipeline stage has been created!",
            });
        });
    </script>
@endsection