@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 }}%;
}
.pipeline-list ul li a.bg-dark {
    color: #FFF;
}
.pipeline-list ul li a.bg-dark::after {
    background: #171724;
}
.pipeline-list ul li a.bg-gray {
    color: #000!important;
}
.pipeline-list ul li a.bg-primary{
    color:#fff;
}
.pipeline-list ul li a.bg-primary::after {
    background: #E41F07;
}
#sort_order_selector{
    padding-left:22px;
}
</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.project.project-edit-details', ['project' => $project, 'tab' => $tab])

            </div>
        </div>
    </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 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>
window.addEventListener('deal-updated', event => {
    Swal.fire({
         title: "Good job!",
        text: "The deal was updated successfully!",
        timer: {{ config('env.themes.dreams_tech.swal.success.timer') }}
    });
});
window.addEventListener('deal-completed', event => {
    $('#offcanvas_close_deal').offcanvas('hide');
    Swal.fire({
        icon: 'success',
        title: "{{ config('env.themes.dreams_tech.swal.success.title') }}",
        text: 'Deal closed successfully!',
        showConfirmButton: true,
        showCancelButton: false,
        confirmButtonText: "Continue",
    }).then((result) => {
        if (result.isConfirmed) {
            window.location.href = "{{ route('tenant.lemarex.projects.index') }}";
        }
    });
});
window.addEventListener('hide-close-deal', event => {
    Swal.fire({
         title: "Good job!",
        text: "The deal was closed successfully!",
        timer: {{ config('env.themes.dreams_tech.swal.success.timer') }}
    });
});
window.addEventListener('show-update-stage-modal', event => {
    $('#change_stage_modal').modal('show');
});
window.addEventListener('deal-stage-updated', event => {
    $('#change_stage_modal').modal('hide');
    Swal.fire({
         title: "Good job!",
        text: "The deal was updated successfully!",
        timer: {{ config('env.themes.dreams_tech.swal.success.timer') }}
    });
});
window.addEventListener('pipeline-stage-updated', event => {
    Swal.fire({
        title: "Good job!",
        text: "Pipeline stage was updated successfully!",
        timer: {{ config('env.themes.dreams_tech.swal.success.timer') }}
    });
});
window.addEventListener('some-var-not-found', event => {
    $('#change_stage_modal').modal('hide');
    Swal.fire({
        title: "Error!",
        text: "Please check the contract document, found no variables to map!",
        timer: {{ config('env.themes.dreams_tech.swal.success.timer') }}
    });
});
</script>
@endsection