@extends('layouts.master')


@section('title')
{{__('Project buyer detail')}}
@endsection



@section('breadcrumb')
<div class="row page-title">
    <div class="col-sm-8 col-xl-6">
        <h3 class="mb-1 mt-0">{{__('Project buyer detail')}}</h3>
        <nav aria-label="breadcrumb" class="float-left mt-1">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{route('dashboard')}}">{{__('Home')}}</a></li>
                <li class="breadcrumb-item"><a href="{{route('project-buyer')}}">{{__('Project buyer list')}}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{__('Project buyer detail')}}</li>
            </ol>
        </nav>
    </div>
    <div class="col-sm-4 col-xl-6 text-sm-right">
        <div class="btn-group ml-2 d-none d-sm-inline-block">
            <a href="javascript:;" role="button" class="btn btn-soft-primary btn-sm" data-toggle="modal" data-target="#editBuyer"><i
                    class="uil uil-edit mr-1" ></i>{{__('Edit')}}</a>

        </div>
        <div class="btn-group d-none d-sm-inline-block">
            <button type="button" class="btn btn-soft-danger btn-sm btnDelete"><i
                    class="uil uil-trash-alt mr-1"></i>{{__('Delete')}}</button>
        </div>
    </div>
</div>
@endsection

@section('content')
<style>
    .scrollbar{
        font-size:small; 
        overflow-y:scroll; 
        height:720px; 
        scrollbar-width: none;
    }
</style>
<div class="row">
    <div class="col-lg-7">
        <div class="card">
            <div class="card-body pb-2">
            <h5 class="header-title mb-4 mt-0">{{__('Buyer details')}}</h5>
                <div class="row">
                    <div class="col-lg-5">
                        <div class="text-center mt-3">
                            <img src="{{asset('assets/images/users/avatar-7.jpg')}}" alt=""
                                class="avatar-lg rounded-circle" />
                            <h5 class="mt-2 mb-0">John</h5>
                            <h6 class="text-muted font-weight-normal mt-2 mb-0">Real Estate Experience
                            </h6>
                            <h6 class="text-muted font-weight-normal mt-1 mb-4">San Francisco, CA</h6>

                        </div>
                    </div>
                    <div class="col-lg-7">
                        <div class="mt-2 ">
                            <h4 class="mb-3 font-size-15">{{__('Contact information')}}</h4>
                            <div class="table-responsive">
                                <table class="table table-borderless mb-0 text-muted">
                                    <tbody>
                                        <tr>
                                            <th scope="row">Email</th>
                                            <td>xyz123@gmail.com</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">Phone</th>
                                            <td>(123) 123 1234</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">Address</th>
                                            <td>1975 Boring Lane, San Francisco, California, United States -
                                                94108</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class=" pt-2 ">
                    <h4 class="mb-3 font-size-15">{{__('About')}}</h4>
                    <p class="text-muted mb-4">Hi I'm John. I am user experience
                        interior designer.
                        I have been working on interior designing since last 10 years.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-5">
        <div class="card">
            <div class="card-body" >
            <h5 class="header-title mb-4 mt-0">{{__('Buyer project services history')}}</h5>
                <div class="left-timeline mt-3 mb-3 pl-4 scrollbar" style="height: 291px;" >
                    <ul class="list-unstyled events mb-0">
                        <li class="event-list">
                            <div class="pb-4">
                                <div class="media">
                                    <div class="event-date text-center mr-4">
                                        <div class="bg-soft-primary p-1 rounded text-primary font-size-14">
                                            01 month ago</div>
                                    </div>
                                    <div class="media-body">
                                        <h6 class="font-size-15 mt-0 mb-1">
                                        Architectural</h6>
                                        <p class="text-muted font-size-14">
                                            <span class="badge badge-soft-warning taxt-warning">Pending</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="event-list">
                            <div class="pb-4">
                                <div class="media">
                                    <div class="event-date text-center mr-4">
                                        <div class="bg-soft-primary p-1 rounded text-primary font-size-14">
                                            01 month ago</div>
                                    </div>
                                    <div class="media-body">
                                        <h6 class="font-size-15 mt-0 mb-1">
                                        Vantilation</h6>
                                        <p class="text-muted font-size-14">
                                            <span class="badge badge-soft-success taxt-success">Complete</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="event-list">
                            <div class="pb-4">
                                <div class="media">
                                    <div class="event-date text-center mr-4">
                                        <div class="bg-soft-primary p-1 rounded text-primary font-size-14">
                                            06 months ago</div>
                                    </div>
                                    <div class="media-body">
                                        <h6 class="font-size-15 mt-0 mb-1">Plumbing</h6>
                                        <p class="text-muted font-size-14">
                                            <span class="badge badge-soft-info taxt-info">Inprogress</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="event-list">
                            <div class="pb-4">
                                <div class="media">
                                    <div class="event-date text-center mr-4">
                                        <div class="bg-soft-primary p-1 rounded text-primary font-size-14">
                                            01 year ago</div>
                                    </div>
                                    <div class="media-body">
                                        <h6 class="font-size-15 mt-0 mb-1">Electrical</h6>
                                        <p class="text-muted font-size-14">
                                            <span class="badge badge-soft-success taxt-success">Completed</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <h5 class="header-title mb-4 mt-0">{{__('Details')}}</h5>

                <ul class="nav nav-pills navtab-bg nav-justified">
                    <li class="nav-item">
                        <a href="#description" data-toggle="tab" aria-expanded="false" class="nav-link active">
                            <span class="d-block d-sm-none"><i class="uil-home-alt"></i></span>
                            <span class="d-none d-sm-block">{{__('Addtional Note')}}</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#files" data-toggle="tab" aria-expanded="false" class="nav-link">
                            <span class="d-block d-sm-none"><i class="uil-file"></i></span>
                            <span class="d-none d-sm-block">{{__('Files')}}</span>
                        </a>
                    </li>
                </ul>
                <div class="tab-content text-muted">
                    <div class="tab-pane  active" id="description">
                        <p>To an English person, it will seem like simplified English, as a skeptical Cambridge friend
                            of
                            mine told me what Occidental is. The European languages are members of the same family.
                            Their
                            separate existence is a myth.</p>
                        <p>Everyone realizes why a new common language would be desirable: one could refuse to pay
                            expensive
                            translators. To achieve this, it would be necessary to have uniform grammar, pronunciation
                            and
                            more common words. If several languages coalesce, the grammar of the resulting language is
                            more
                            simple and regular than that of the individual languages.</p>
                    </div>
                    <div class="tab-pane" id="files">
                        <div class="card mb-2 shadow-none border">
                            <div class="p-1 px-2">
                                <div class="row align-items-center">
                                    <div class="col-auto">
                                        <img src="/assets/images/projects/project-1.jpg" class="avatar-sm rounded"
                                            alt="file-image">
                                    </div>
                                    <div class="col pl-0">
                                        <a href="javascript:void(0);"
                                            class="text-muted font-weight-bold">sales-assets.zip</a>
                                        <p class="mb-0">2.3 MB</p>
                                    </div>
                                    <div class="col-auto">
                                        <!-- Button -->
                                        <a href="javascript:void(0);" data-toggle="tooltip" data-placement="bottom"
                                            title="Download" class="btn btn-link text-muted btn-lg p-0">
                                            <i class='uil uil-cloud-download font-size-14'></i>
                                        </a>
                                        <a href="javascript:void(0);" data-toggle="tooltip" data-placement="bottom"
                                            title="Delete" class="btn btn-link text-danger btn-lg p-0">
                                            <i class='uil uil-multiply font-size-14'></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card mb-2 shadow-none border">
                            <div class="p-1 px-2">
                                <div class="row align-items-center">
                                    <div class="col-auto">
                                        <img src="/assets/images/projects/project-2.jpg" class="avatar-sm rounded"
                                            alt="file-image">
                                    </div>
                                    <div class="col pl-0">
                                        <a href="javascript:void(0);"
                                            class="text-muted font-weight-bold">new-contarcts.docx</a>
                                        <p class="mb-0">1.25 MB</p>
                                    </div>
                                    <div class="col-auto">
                                        <!-- Button -->
                                        <a href="javascript:void(0);" data-toggle="tooltip" data-placement="bottom"
                                            title="Download" class="btn btn-link text-muted btn-lg p-0">
                                            <i class='uil uil-cloud-download font-size-14'></i>
                                        </a>
                                        <a href="javascript:void(0);" data-toggle="tooltip" data-placement="bottom"
                                            title="Delete" class="btn btn-link text-danger btn-lg p-0">
                                            <i class='uil uil-multiply font-size-14'></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- end attachments -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Buyer modal content -->
<div id="editBuyer" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="editRoleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editBuyerLabel">{{__('Edit project buyer')}}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label class="col-form-label">{{__('Project buyer')}}</label>
                    <select class="custom-select" required>
                        <option selected disabled>{{__('Select project buyer')}}</option>
                        <option value="1">John Botham</option>
                        <option value="2">Sam Billing</option>
                        <option value="3">James Anderson</option>
                        <option value="3">Rory Burns</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="col-form-label">{{__('Project')}}</label>
                    <select class="custom-select" required>
                        <option selected disabled>{{__('Select project')}}</option>
                        <option value="1">Agriculture</option>
                        <option value="2">Electrical</option>
                        <option value="3">Reparing stairs</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="col-form-label" for="">{{__('Detail despcription')}} <span class="text-danger"></span></label>
                    <textarea name="" id="" cols="30" rows="2" required class="form-control"
                        placeholder="{{__('Enter detail description')}}"></textarea>
                </div>
                <div class="form-group">
                    <div class="col-lg-12 col-sm-4">
                        <form action="/" method="post" class="dropzone" id="myAwesomeDropzone">
                            <div class="fallback">
                                <input name="file" type="file" multiple />
                            </div>

                            <div class="dz-message needsclick">
                                <i class="h1 text-muted  uil-cloud-upload"></i>
                                <h3>{{__('Drop files here or click to upload')}}.</h3>
                                <span class="text-muted font-13">( {{__('drag’n’drop multiple photos and files to upload')}} )
                                </span>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn custom-button">{{__('Save')}}</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


@endsection

@section('script-bottom')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.10/dist/sweetalert2.all.min.js"></script>

<script type="text/javascript">
    // Delete

    $(document).on('click', '.btnDelete', function (e) {
        var member = $(this).attr('id');
        Swal.fire({
                title: "Are you sure?",
                text: "You will not be able to recover this buyer project!",
                type: "warning",
                buttons: true,
                confirmButtonColor: "#ff5e5e",
                confirmButtonText: "Yes, delete it!",
                closeOnConfirm: false,
                dangerMode: true,
                showCancelButton: true
            })
            .then((deleteThis) => {
                if (deleteThis.isConfirmed) {
                    $.ajax({
                        url: '',
                        type: "GET",
                        dataType: "JSON",
                        data: {
                            member: member

                        },
                        success: function (response) {

                            if (response["status"] == "fail") {
                                Swal.fire("Failed!", "Failed to delete buyer project.", "error");
                            } else if (response["status"] == "success") {
                                Swal.fire("Deleted!", "Buyer project has been deleted.",
                                    "success");

                                // Using .reload() method.
                                location.reload();
                            }
                        },
                        error: function (error) {
                            console.log(error);
                        },
                        async: false
                    });
                } else {
                    Swal.close();
                }
            });
    });

</script>
@endsection
