@extends('admin::layouts.master')
@section('content')
    <div class="row">
        <div class="col-md-12 col-12">
            <div class="card">
                <div class="card-header border-0 pb-0">
                    <div class="chart-head-text project-cri">
                        <div class="row align-items-center">
                            <div class="col-md-12">
                                <h4 class="card-title float-none">Project: {{ $project->name }}
                                    ({{ isset($project->country) ? $project->country->name : '' }})</h4>
                            </div>
                        </div>
                    </div>
                    <div class="border-bottom my-3"></div>
                </div>
                <div class="card-body pt-0">
                    <div class="row padd-bot-one">
                        <div class="col-md-12">
                            <div class="row mt-sm-3 mt-2 align-items-center">
                                <div class="col-md-9 mt-sm-0 mt-2 text-sm-right">
                                    <div class="filename-box" data-toggle="modal" data-target="#upload-plant-modal">
                                        @if (count($project->species) > 0)
                                            <div class="row align-items-center">
                                                <div class="col-md-9 col-9 border-right">
                                                    <div class="filter-context text-center">
                                                        <p>Import Plants</p>
                                                    </div>
                                                </div>
                                                <div class="col-md-3 pl-0 col-3">
                                                    <div class="filter-context text-center">
                                                        <i class="fa fa-pencil" aria-hidden="true"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-3 mt-sm-0 mt-2 text-sm-right">
                                    <div class="filename-box" data-toggle="modal" data-target="#project-boundaries-modal">
                                        <div class="row align-items-center">
                                            <div class="col-md-9 col-9 border-right">
                                                <div class="filter-context text-center">
                                                    <p>Import Boundaries</p>
                                                </div>
                                            </div>
                                            <div class="col-md-3 pl-0 col-3">
                                                <div class="filter-context text-center">
                                                    <i class="fa fa-pencil" aria-hidden="true"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-md-12">
                                    <div class="Azadirachta-indica-map">
                                        <div class="map" id="map"></div>
                                    </div>
                                    <div class="edit-box">
                                        <a href="#" class="text-decoration-none">
                                            <div class="row align-items-center">
                                                <div class="col-md-5 border-right col-5">
                                                    <div class="edit-context text-center">
                                                        <img src="{{ Module::asset('admin:img/filter-icon.svg') }}"
                                                            alt="/">
                                                    </div>
                                                </div>
                                                <div class="col-md-7 col-7">
                                                    <div class="edit-context text-center">
                                                        <p>Edit</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <form class="form" role="post-data" method="POST"
                                action="/api/admin/projects/{{ $project->id }}" redirect="/admin/projects"
                                enctype="multipart/form-data">
                                @csrf
                                @method('PUT')

                                @php
                                    $speciesIds = $project->species->pluck('id')->toArray();
                                @endphp
                                <div class="row mt-4">
                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group project-select">
                                                    <label for="plant-capacity">Plant Capacity</label>
                                                    <input type="text" name="plant_capacity"
                                                        value="{{ old('plant_capacity', $project->capacity ? $project->capacity : '') }}"
                                                        class="form-control numberonly" id="plant-capacity"
                                                        aria-describedby="emailHelp">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group project-select">
                                                    <label for="">Project Status</label>
                                                    <select class="form-control select2" name="status">
                                                        @foreach ($status as $value)
                                                            <option value="{{ $value }}"
                                                                @if (old('status', $project->status) == $value) selected @endif>
                                                                {{ ucfirst($value) }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class=" position-relative">
                                            <label for="text" class="">Project thumbnail image</label>
                                            <a id="preview-thumbnail-image"
                                                href="{{ $project->thumbnail_image ? $project->thumbnail_image : '#' }}"
                                                target="_blank">
                                                <input type="text" class="form-control" id="selected-thumbnail-image"
                                                    aria-describedby="emailHelp" readonly
                                                    value="{{ $project->thumbnail_media ? $project->thumbnail_media->file_name : 'No' }}"
                                                    name="existing_thumbnail_image">
                                            </a>
                                            <div class="upload-btn-wrapper upload-lable-wrapper">
                                                <button class="uploadBtn px-3 ">
                                                    Browse
                                                </button>
                                                <input type="file" name="thumbnail_image" id="thumbnail-image"
                                                    accept="image/png, image/jpeg, image/jpg">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group project-select">
                                            <label for="">Assign Species</label>
                                            <select class="form-control select2 new-select" id="species" name="species[]"
                                                multiple>
                                                @foreach ($species as $specie)
                                                    <option value="{{ $specie->id }}"
                                                        @if (in_array($specie->id, $speciesIds)) selected @endif>
                                                        {{ ucfirst($specie->name) }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group project-select">
                                            <label for="">Assign Project Supervisor</label>
                                            <select class="form-control select2 new-select" name="supervisor">
                                                @foreach ($supervisors as $supervisor)
                                                    <option value="{{ $supervisor->id }}"
                                                        @if (old('supervisor', $project->supervisor) == $supervisor->id) selected @endif>
                                                        {{ ucfirst($supervisor->name) }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div id="species_input_container">
                                    @if ($project->species->count() > 0)
                                        @foreach ($project->species as $projectSpecie)
                                            @php
                                                $pivotData = $projectSpecie->pivot;
                                            @endphp
                                            <div class="species-row" data-id="{{ $pivotData->specie_id }}">
                                                <div class="border-bottom my-3 my-sm-4"></div>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="text">Basic Price of
                                                                {{ $projectSpecie->name }}</label>
                                                            <input type="text"
                                                                name="data[{{ $pivotData->specie_id }}][basic_price]"
                                                                value="{{ $pivotData->basic_price ?? '' }}"
                                                                class="form-control numberonly"
                                                                placeholder="Write about trees.....">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="text">Carbon Value of
                                                                {{ $projectSpecie->name }}</label>
                                                            <input type="text"
                                                                name="data[{{ $pivotData->specie_id }}][carbon_value]"
                                                                value="{{ $pivotData->carbon_value ?? '' }}"
                                                                class="form-control numberonly"
                                                                placeholder="Write about trees.....">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="text">Total Quantity of
                                                                {{ $projectSpecie->name }}</label>
                                                            <input type="text"
                                                                name="data[{{ $pivotData->specie_id }}][quantity]"
                                                                value="{{ $pivotData->total_quantity ?? '' }}"
                                                                class="form-control numberonly"
                                                                placeholder="Write about trees.....">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                                <div class="border-bottom my-3 my-sm-4"></div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="text">Title 01</label>
                                            <input type="text" name="title1"
                                                value="{{ old('title1', $project->title1) }}" class="form-control"
                                                placeholder="Write about trees.....">
                                        </div>
                                        <div class="form-group position-relative">
                                            <label for="text" class="">Upload right photos</label>
                                            <a id="preview-right-image"
                                                href="{{ isset($project->right_image) ? $project->right_image : '#' }}"
                                                target="_blank">
                                                <input type="text" class="form-control" id="selected-right-image"
                                                    aria-describedby="emailHelp" readonly
                                                    value="{{ $project->right_image_media ? $project->right_image_media->file_name : 'No' }}"
                                                    name="existing_right_image">
                                            </a>
                                            <div
                                                class="upload-btn-wrapper
                                                upload-lable-wrapper">
                                                <button class="uploadBtn px-3 ">
                                                    Browse
                                                </button>
                                                <input type="file" name="right_image"
                                                    accept="image/png, image/jpeg, image/jpg" id="right-image">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group plant-add-textarea project-textarea">
                                            <label class="form-label" for="textAreaExample">
                                                Description</label>
                                            <textarea class="form-control summernote" id="description1" name="description1">{!! old('description1', $project->description1) !!}</textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="border-bottom my-3 my-sm-4"></div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="text">Title 02</label>
                                            <input type="text" name="title2"
                                                value="{{ old('title2', $project->title2) }}" class="form-control"
                                                placeholder="Write about trees.....">
                                        </div>
                                        <div class="form-group position-relative">
                                            <label for="text" class="">Upload left photos</label>
                                            <a id="preview-left-image"
                                                href="{{ isset($project->left_image) ? $project->left_image : '#' }}"
                                                target="_blank">
                                                <input type="text" class="form-control" id="selected-left-image"
                                                    aria-describedby="emailHelp" readonly name="existing_left_image"
                                                    value="{{ $project->left_image_media ? $project->left_image_media->file_name : 'No' }}">
                                            </a>
                                            <div
                                                class="upload-btn-wrapper
                                                upload-lable-wrapper">
                                                <button class="uploadBtn px-3 ">
                                                    Browse
                                                </button>
                                                <input type="file" name="left_image"
                                                    accept="image/png, image/jpeg, image/jpg" id="left-image">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group plant-add-textarea project-textarea">
                                            <label class="form-label" for="textAreaExample">
                                                Description</label>
                                            <textarea class="form-control summernote" name="description2">{!! old('description2', $project->description2) !!}</textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="border-bottom my-3 my-sm-4"></div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="text">Title 03</label>
                                            <input type="text" name="title3"
                                                value="{{ old('title3', $project->title3) }}" class="form-control"
                                                placeholder="Write about trees.....">
                                        </div>
                                        <div class="form-group position-relative">
                                            <label for="text" class="">Upload back photos</label>
                                            <a id="preview-back-image"
                                                href="{{ isset($project->back_image) ? $project->back_image : '#' }}"
                                                target="_blank">
                                                <input type="text" class="form-control" id="selected-back-image"
                                                    aria-describedby="emailHelp" readonly
                                                    value="{{ $project->back_image_media ? $project->back_image_media->file_name : 'No' }}"
                                                    name="existing_back_image">
                                            </a>
                                            <div
                                                class="upload-btn-wrapper
                                                upload-lable-wrapper">
                                                <button class="uploadBtn px-3 ">
                                                    Browse
                                                </button>
                                                <input type="file" name="back_image"
                                                    accept="image/png, image/jpeg, image/jpg" id="back-image">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group plant-add-textarea project-textarea">
                                            <label class="form-label" for="textAreaExample">
                                                Description</label>
                                            <textarea class="form-control summernote" placeholder="Write..." name="description3">{!! old('description3', $project->description3) !!}</textarea>
                                        </div>
                                    </div>
                                </div>

                                <div class="row justify-content-center my-3 my-sm-5">
                                    <div class="col-md-6">
                                        <button type="button" role="button" class="btn btn-primary btn-block"
                                            data-request="ajax-submit" data-target="[role=post-data]"> Submit</button>
                                    </div>
                                </div>
                            </form>


                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- Upload Plant Modal --}}
    @if (count($project->species) > 0)
        <div class="modal fade" id="upload-plant-modal" tabindex="-1" role="dialog"
            aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header py-3">
                        <h5 class="modal-title" id="exampleModalLabel"></h5>
                        <button type="button" class="close close-btn-filter" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">Close <i class="fa fa-times" aria-hidden="true"></i></span>
                        </button>
                    </div>
                    <div class="modal-body pb-4">
                        <div class="text-center modal-top-head pb-3">
                            <h1>Import Plant</h1>
                        </div>
                        <form class="form" role="upload-plant-data" method="POST"
                            action="/api/admin/projects/import-plant" redirect="/admin/projects/edit/{{ $project->id }}"
                            enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group project-select">
                                        <select class="form-control select2" id="project-specie-id"
                                            name="project_specie_id">
                                            <option value="">Select Specie</option>
                                            @foreach ($project->species as $projectSpecie)
                                                <option value="{{ $projectSpecie->pivot->id }}"
                                                    data-specieid="{{ $projectSpecie->id }}"
                                                    @if (old('project_specie_id') == $projectSpecie->pivot->id) selected @endif>
                                                    {{ ucfirst($projectSpecie->name) }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group position-relative">
                                <input type="hidden" name="project_id" id="project-id" value="{{ $project->id }}" />
                                <input type="hidden" name="specie_id" id="specie-id" value="" />
                                <a id="preview-plant-file" href="#" target="_blank">
                                    <input type="text" class="form-control" placeholder="Upload CSV file"
                                        id="selected-plant-file" aria-describedby="emailHelp" readonly value=""
                                        name="existing_back_image">
                                </a>
                                <div class="upload-btn-wrapper">
                                    <button class="uploadBtn px-3">
                                        Browse
                                    </button>
                                    <input type="file" name="plant_csv" id="plant-csv">

                                </div>
                                <p class="support-text p-2">Upload limit: 100 MB, current usage 0 MB</p>
                                <p class="mt-4 pl-2"><a href="{{ Module::asset('admin:sample/plant-tree.csv') }}">click
                                        here</a>
                                    to
                                    download sample file</p>
                            </div>
                            <button type="button" class="btn-primary btn btn-block" role="button"
                                data-request="ajax-submit" data-target="[role=upload-plant-data]">Submit</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @endif

    {{-- Upload Project Boundaries --}}
    <div class="modal fade" id="project-boundaries-modal" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header py-3">
                    <h5 class="modal-title" id="exampleModalLabel"></h5>
                    <button type="button" class="close close-btn-filter" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">Close <i class="fa fa-times" aria-hidden="true"></i></span>
                    </button>
                </div>
                <div class="modal-body pb-4">
                    <div class="text-center modal-top-head pb-3">
                        <h1>Import Project Boundaries</h1>
                    </div>
                    <form class="form" role="upload-project-boundaries" method="POST"
                        action="/api/admin/projects/import-boundaries"
                        redirect="/admin/projects/edit/{{ $project->id }}" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group position-relative">
                            <input type="hidden" name="project_id" value="{{ $project->id }}" />
                            <a id="preview-boundaries-file" href="#" target="_blank">
                                <input type="text" class="form-control" placeholder="Upload CSV file"
                                    id="selected-boundaries-file" aria-describedby="emailHelp" readonly value=""
                                    name="existing_back_image">
                            </a>
                            <div class="upload-btn-wrapper">
                                <button class="uploadBtn px-3">
                                    Browse
                                </button>
                                <input type="file" name="project_boundaries_csv" id="project-boundaries-file">
                            </div>
                            <p class="support-text p-2">Upload limit: 100 MB, current usage 0 MB</p>
                            <p class="mt-4 pl-2"><a
                                    href="{{ Module::asset('admin:sample/project-boundaries.csv') }}">click
                                    here</a> to
                                download sample file</p>
                        </div>
                        <button type="button" class="btn-primary btn btn-block" role="button"
                            data-request="ajax-submit" data-target="[role=upload-project-boundaries]">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key={{env('GOOGLE_MAP_KEY')}}&libraries=places">
    </script>
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>

    <script>
        $('select2').select2({
            placeholder: 'This is my placeholder',
            allowClear: true
        });

        $('#thumbnail-image').on('change', function(event) {
            handleFileChange(event, 'selected-thumbnail-image',
                'preview-thumbnail-image');
        });
        $('#project-specie-id').on('change', function() {
            let selectedSpecieId = $(this).find(':selected').data('specieid');
            if (selectedSpecieId) {
                $('#specie-id').val(selectedSpecieId);
            } else {
                $('#specie-id').val('');
            }
        });

        $('#left-image').on('change', function(event) {
            handleFileChange(event, 'selected-left-image', 'preview-left-image');
        });
        $('#right-image').on('change', function(event) {
            handleFileChange(event, 'selected-right-image', 'preview-right-image');
        });
        $('#back-image').on('change', function(event) {
            handleFileChange(event, 'selected-back-image', 'preview-back-image');
        });

        $('#project-boundaries-file').on('change', function(event) {
            handleFileChange(event, 'selected-boundaries-file', 'preview-boundaries-file');
        });

        $('#plant-csv').on('change', function(event) {
            handleFileChange(event, 'selected-plant-file', 'preview-plant-file');
        });
        // Event listener for option selection
        $('#species').on('select2:select', function(e) {
            let data = e.params.data;
            let html;
            if (data) {
                html = '<div class="species-row" data-id="' + data.id + '">';
                html += '<div class="border-bottom my-3 my-sm-4"></div>';
                html += '<div class="row"><div class="col-md-6"><div class="form-group">';
                html +=
                    '<label for="text">Basic Price for ' + data.text + '</label><input type="text" name="data[' +
                    data.id +
                    '][basic_price]" value="" class="form-control numberonly" placeholder="Write about trees.....">';
                html += '</div></div><div class="col-md-6"><div class="form-group">';
                html +=
                    '<label for="text">Carbon Value for ' + data.text + '</label><input type="text" name="data[' +
                    data.id +
                    '][carbon_value]" value="" class="form-control numberonly" placeholder="Write about trees.....">'
                html += '</div></div><div class="col-md-6"><div class="form-group">';
                html +=
                    '<label for="text">Total Quantity for ' + data.text + '</label><input type="text" name="data[' +
                    data.id +
                    '][quantity]" value="" class="form-control numberonly" placeholder="Write about trees.....">';
                html += '</div></div></div></div>';
                console.log(html);
                $('#species_input_container').append(html);
            }
        })

        // Event listener for option deselection
        $('#species').on('select2:unselect', function(e) {
            let deselectedOption = e.params.data.id;
            $('#species_input_container').find('.species-row[data-id="' + deselectedOption + '"]').remove();
        });

        // Initiate Map
        function initMap() {
            // map options
            var options = {
                center: {
                    lng: 50.0787,
                    lat: 26.1767,
                },
                zoom: 18,
                mapTypeId: "satellite",
            };

            var map = new google.maps.Map(document.getElementById("map"), options);

            //Add marker
            var markers = ;

            // Loop through markers
            var gmarkers = [];
            for (var i = 0; i < markers.length; i++) {
                gmarkers.push(addMarker(markers[i]));
            }

            //Add MArker function
            function addMarker(props) {
                var marker = new google.maps.Marker({
                    position: props,
                    map: map,
                });

                if (props.image) {
                    marker.setIcon(props.image);
                }

                //Check content
                var infoWindow = new google.maps.InfoWindow({
                    content: props.content,
                    maxWidth: 400,
                });
                marker.addListener("click", function() {
                    infoWindow.open(map, marker);
                });

                const projectBorderCoordinates = ;

                // Construct the Polyline.
                const linePath = new google.maps.Polyline({
                    path: projectBorderCoordinates,
                    geodesic: true,
                    strokeColor: "white",
                    strokeOpacity: 2.0,
                    strokeWeight: 2,
                });

                linePath.setMap(map);

                return marker;
            }
        }
        google.maps.event.addDomListener(window, "load", initMap);
    </script>
@endsection