@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" />
<link rel="stylesheet" href="{{ config('env.themes.dreams_tech.folder') }}/css/bootstrap-nav-wizard.min.css" rel="stylesheet" />
<link rel="stylesheet" href="{{ config('env.themes.dreams_tech.folder') }}/plugins/fullcalendar/fullcalendar.min.css" />
<link rel="stylesheet" href="{{ config('env.themes.dreams_tech.folder') }}/plugins/owlcarousel/owl.carousel.min.css" />
<link rel="stylesheet" href="{{ config('env.themes.dreams_tech.folder') }}/plugins/owlcarousel/owl.theme.default.min.css" />
<link rel="stylesheet" href="{{ config('env.themes.dreams_tech.folder') }}/plugins/summernote/summernote-bs4.min.css" />
<link rel="stylesheet" href="{{ config('env.themes.dreams_tech.folder') }}/plugins/summernote/summernote-lite.min.css">
<style type="text/css">
.nav-wizard>li {
    width: {{ 100 / count($stages) }}%;
}
.nav-wizard>li>a {
    position: relative;
    display: block;
    padding: 10px 10px;
    font-size: 13px;
}
/* Notes CSS Styles */
.section-bulk-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    -ms-flex-pack: space-between;
    margin: 0px 0 24px 0;
    padding: 20px;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0px 4px 60px 0px rgba(231, 231, 231, 0.47);
}
.section-bulk-wrap .bulk-action-type {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
}
.section-bulk-wrap .form-sort {
    position: relative;
    width: 149px;
    height: 40px;
}
.notes-top-head-submenu .nav.todo-inbox a.todo-inbox {
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #6F6F6F;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    border-radius: 5px;
}
.notes-top-head-submenu .nav.todo-inbox a.todo-inbox:hover {
    background: #212B36;
    color: #FFF;
}
.notes-top-head-submenu .nav.todo-inbox a.todo-inbox.active {
    border-radius: 5px;
    background: #212B36;
    padding: 10px;
    color: #FFF;
}
.notes-top-head-submenu .nav.todo-inbox a.todo-inbox svg {
    width: 16px;
    height: 16px;
    margin-right: 8px;
}
.notes-top-head-submenu .nav.todo-inbox a.todo-inbox span {
    display: flex;
    width: 20px;
    height: 20px;
    padding: 0px 3px;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    background: #E41F07;
    color: #FFF;
}
.wrap-cal svg {
    margin-right: 5px;
    width: 16px;
    height: 16px;
}

.todo-wrapper-list .todo-inbox-check.todo-inbox-check-list {
    width: 75%!important;
}
.todo-wrapper-list .notes-card-body {
    width: 15%!important;
}
.todo-wrapper-list .todo-profile {
    width: 10%!important;
}
/* Notes CSS Styles */

/* Pipeline CSS Styles */
.pipeline-list ul li a {
    width: 100%;
    min-width: 100%!important;
}
.pipeline-list ul li{
    width: {{ (100 / count($stages)) - 1 }}%;
}
#sort_order_selector{
    padding-left:22px;
}
.tasks-activity.tasks > ul .task-wrap .task-info .task-checkbox {
    margin: 0 0px 10px 0!important;
}
</style>
@endsection

@section('page_content')
<!-- Page Wrapper -->
<div class="page-wrapper">
    <div class="content">
        <div class="row">
            <div class="col-md-12">

                <!-- Page Header -->
                <div class="page-header">
                    <div class="row align-items-center">
                        <div class="col-8">
                            <h4 class="page-title">{{ $page_title }}</h4>
                        </div>
                        <div class="col-4 text-end">
                            <div class="head-icons">
                                <a href="" data-bs-toggle="tooltip" data-bs-placement="top"
                                    data-bs-original-title="Refresh"><i class="ti ti-refresh-dot"></i></a>
                                <a href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-placement="top"
                                    data-bs-original-title="Collapse" id="collapse-header"><i class="ti ti-chevrons-up"></i></a>
                            </div>
                        </div>
                    </div>
                </div>

                @livewire('tenant.lemarex.lead.edit-lead-details', ['lead' => $lead, 'tab' => $tab])

            </div>
        </div>
    </div>
</div>
@stop

@section('page_js')
{{-- <script src="/assets/js/livewire-sortable.js"></script> --}}
<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="{{ 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 src="{{ config('env.themes.dreams_tech.folder') }}/plugins/summernote/summernote-lite.min.js"></script>
@if($tab == 'events')
<script src="{{ config('env.themes.dreams_tech.folder') }}/plugins/fullcalendar/fullcalendar.min.js"></script>
<script src="{{ config('env.themes.dreams_tech.folder') }}/plugins/fullcalendar/jquery.fullcalendar.js"></script>
@elseif($tab == 'notes')
<script src="{{ config('env.themes.dreams_tech.folder') }}/plugins/owlcarousel/owl.carousel.min.js"></script>
@elseif($tab == 'files')
<!--script src="/assets/js/jquery.validate.min.js"></script-->
@endif
<script>
/* Field Scripts */
window.addEventListener('lead-updated', event => {
    Swal.fire({
        icon: 'success',
        title: "{{ config('env.themes.dreams_tech.swal.success.title') }}",
        text: 'The lead was updated successfully!',
        timer: {{ config('env.themes.dreams_tech.swal.success.timer') }}
    });
});
@if($tab == 'event-calendar')

@endif

@include('livewire.tenant.lemarex.note.partials._js')

window.addEventListener('show-update-stage-modal', event => {
    $('#change_stage_modal').modal('show');
});

window.addEventListener('pipeline-stage-updated', event => {
    $('#change_stage_modal').modal('hide');
    Swal.fire({
        icon: 'success',
        title: "{{ config('env.themes.dreams_tech.swal.success.title') }}",
        text: 'Lead stage updated Successfully',
        showConfirmButton: false,
        timer: {{ config('env.themes.dreams_tech.swal.success.timer') }}
    });
});

window.addEventListener('lead-deleted', event => {
    Swal.fire({
        icon: 'success',
        title: "{{ config('env.themes.dreams_tech.swal.success.title') }}",
        text: "The note(s) was deleted successfully!",
        timer: {{ config('env.themes.dreams_tech.swal.success.timer') }}
    });
});

window.addEventListener('document-attached', event => {
    $('#new_file').modal('hide');
    Swal.fire({
        icon: 'success',
        title: "{{ config('env.themes.dreams_tech.swal.success.title') }}",
        text: 'The attachment was saved successfully!',
        timer: {{ config('env.themes.dreams_tech.swal.success.timer') }}
    });
});

window.addEventListener('leads-conversion-completed', event => {
    $('#offcanvas_convert_leads').offcanvas('hide');
    Swal.fire({
        icon: 'success',
        title: "{{ config('env.themes.dreams_tech.swal.success.title') }}",
        text: 'Lead converted successfully!',
        showConfirmButton: true,
        showCancelButton: false,
        confirmButtonText: "Continue",
    }).then((result) => {
        if (result.isConfirmed) {
            window.location.href = "{{ route('tenant.lemarex.deals.index') }}";
        }
    });
});

window.addEventListener('show-contact-canvas', event => {
    $('#add_edit_contact').offcanvas('show');
});

window.addEventListener('contact-created', event => {
    $('#add_edit_contact').offcanvas('hide');
});
</script>
@endsection