@extends('layouts.app')

@push('css')
    <!-- Styles -->
    <link href="{{ asset('css/library/select2.min.css') }}" rel="stylesheet">
    <link href="{{ asset('css/bs-stepper.min.css') }}" rel="stylesheet">
@endpush

@php
    if(isset($project))
    {
        $id                = $project->id;
        $title             = $project->title;
        $start_date        = date('m/d/Y',strtotime($project->start_date));
        $end_date          = date('m/d/Y',strtotime($project->end_date));
        $description       = $project->description;
        $document          = $project->document;
    }
    else
    {
        $title             = old('title');
        $start_date        = old('start_date');
        $end_date          = old('end_date');
        $description       = old('description');
        $document          = old('document');
    }
@endphp

@section('content')
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6 d-flex align-items-center">
                    <h1 class="m-0 text-dark">Manage Projects</h1>
                    <a class="ml-2 btn btn-outline-primary btn-sm" href="{{ route("projects.show", $project->id) }}" role="button">
                        <i class="fa fa-eye"></i>
                    </a>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('projects.index') }}">Manage Projects</a></li>
                        <li class="breadcrumb-item active">Edit Project</li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Edit Project</h3>
                        </div>

                        <div class="card-body p-0">
                            <div class="bs-stepper">
                                <div class="bs-stepper-header" role="tablist">
                                    <!-- your steps here -->
                                    <div class="step active" data-target="#basic-details">
                                        <button type="button" class="step-trigger" role="tab" aria-controls="basic-details" id="basic-details-trigger" aria-selected="true">
                                            <span class="bs-stepper-circle">1</span>
                                            <span class="bs-stepper-label">Basic</span>
                                          </button>
                                    </div>
                                    <div class="line1"></div>
                                    <div class="step" data-target="#tender-scope">
                                        <button type="button" class="step-trigger" role="tab" aria-controls="tender-scope" id="tender-scope-trigger" aria-selected="false">
                                            <span class="bs-stepper-circle">2</span>
                                            <span class="bs-stepper-label">Tender scope</span>
                                        </button>
                                    </div>
                                    <div class="line1"></div>
                                    <div class="step" data-target="#project-spec">
                                        <button type="button" class="step-trigger" role="tab" aria-controls="project-spec" id="project-spec-trigger" aria-selected="false">
                                            <span class="bs-stepper-circle">3</span>
                                            <span class="bs-stepper-label">Specifications</span>
                                        </button>
                                    </div>
                                    <div class="line1"></div>
                                    <div class="step" data-target="#boq-part">
                                        <button type="button" class="step-trigger" role="tab" aria-controls="boq-part" id="boq-part-trigger" aria-selected="false">
                                            <span class="bs-stepper-circle">4</span>
                                            <span class="bs-stepper-label">BOQ</span>
                                        </button>
                                    </div>

                                    <div class="line1"></div>
                                    <div class="step" data-target="#drwaings-part">
                                        <button type="button" class="step-trigger" role="tab" aria-controls="drwaings-part" id="drwaings-part-trigger" aria-selected="false">
                                            <span class="bs-stepper-circle">5</span>
                                            <span class="bs-stepper-label">Drawings</span>
                                        </button>
                                    </div>
                                    <div class="line1"></div>
                                    <div class="step" data-target="#requirements-part">
                                        <button type="button" class="step-trigger" role="tab" aria-controls="requirements-part" id="requirements-part-trigger" aria-selected="false">
                                            <span class="bs-stepper-circle">6</span>
                                            <span class="bs-stepper-label">T.Requirements</span>
                                        </button>
                                    </div>
                                </div>
                                <div class="bs-stepper-content">
                                    <!-- Include the step 1 -->
                                    @include('admin.projects.partials.edit-step1')

                                    <!-- Include the step 1 -->
                                    @include('admin.projects.partials.edit-step2')

                                    <!-- Include the step 3 -->
                                    @include('admin.projects.partials.edit-step3')

                                    <!-- Include the step 4 -->
                                    @include('admin.projects.partials.edit-step4')

                                    <!-- Include the step 5 -->
                                    @include('admin.projects.partials.edit-step5')

                                    <!-- Include the step 6 -->
                                    @include('admin.projects.partials.edit-step6')
                                </div>
                            </div>
                        </div>

                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
@endsection

@push('script')

    <script type="text/javascript" src="{{ asset('js/bs-stepper.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/project.js') }}"></script>
    <script type="text/javascript">
        var stepper = '';
        $(document).ready(function () {
            stepper = new Stepper($('.bs-stepper')[0], {
                linear: false,
                animation: false,
                selectors: {
                    steps: '.step',
                    trigger: '.step-trigger',
                    stepper: '.bs-stepper'
                }
            });

            let currentStep = 1;
            const hasStepId = window.location.hash;

            if (hasStepId !== '' && hasStepId.includes('#')) {
                const getStep = $(`div[data-target="${hasStepId}"] .bs-stepper-circle`).html();
                if (getStep && getStep !== '') {
                    currentStep = parseInt(getStep);
                }
            }

            if (currentStep > 1) {
                stepper.to(currentStep);
            }
        });

        function next() {
            stepper.next();
        }

        function previous() {
            stepper.previous();
        }

        function Mynext() {
            $('#details-part-trigger').trigger('click');
        }

        // Remove Uploaded Document.

        function removeDocument(document_id) {

            Swal.fire({
                text: "Are you sure you want to delete this document?",
                icon: 'warning',
                showCancelButton: true,
                cancelButtonText: 'Cancel',
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Delete'
            }).then((result) => {
                if (result.value) {
                    //send request to server
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $.ajax({
                        type:"DELETE",
                        url:"{{ url('projects/document') }}"+'/'+document_id,
                        success: function(data) {
                            Swal.fire(
                                data['title'],
                                data['message'],
                                data['type']
                            ).then((result) => {
                                $(document).find('#doc_'+document_id).remove();
                                //project_list_table.ajax.reload();
                            });
                        }
                    });
                }
            })

        }
    </script>

@endpush