@extends('Admin.layout')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<style>
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f3f4f6;
}

/* HEADER */
.topbar {
  padding: 15px;
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topbar h2 {
  margin: 0;
}

/* CONTAINER */
.container {
  max-width: 900px;
  margin: 30px auto;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

/* TITLE */
input.title {
  width: 100%;
  font-size: 22px;
  padding: 10px;
  border: 1px solid #ddd;
  margin-bottom: 15px;
}

/* EDITOR */
.editor {
  min-height: 350px;
  border: 1px solid #ddd;
  padding: 15px;
  outline: none;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}

/* Default desktop: row layout */
.buttons {
  display: flex;
  gap: 10px;
}

/* 🔥 Mobile (Bootstrap sm breakpoint ~576px) */
@media (max-width: 576px) {

  .footer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .buttons {
    flex-direction: column;
    width: 100%;
  }

  .buttons button {
    width: 100%;
  }

  .status {
    text-align: center;
    width: 100%;
  }
}

.buttons button {
  padding: 8px 14px;
  border: none;
  margin-left: 8px;
  cursor: pointer;
  border-radius: 4px;
}

.save {
  background: #2563eb;
  color: white;
}

/* .draft {
  background: #e5e7eb;
} */

.email {
  background: green;
  color: white;
}

/* STATUS */
.status {
  font-size: 13px;
  color: gray;
}
/* Match select2 to your form-select look */
.select2-container .select2-selection--single {
    height: 42px !important;
    border-radius: 6px !important;
    border: 1px solid #ddd !important;
    background: #fff !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #333 !important;
    line-height: 40px !important;
    padding-left: 14px !important;
    padding-right: 40px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
    right: 10px;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute !important;
    right: 28px !important;
    top: 50% !important;
    transform: translateY(-50%);
    float: none !important;
    color: #333;
    font-size: 16px;
}

.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 .18rem rgba(37, 99, 235, .15) !important;
}

.select2-dropdown {
    border-radius: 6px !important;
    border: 1px solid #ddd !important;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border-radius: 6px !important;
    border: 1px solid #ddd !important;
    padding: 8px 12px !important;
    outline: none;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 .18rem rgba(37, 99, 235, .15) !important;
}

.select2-container--default .select2-results__option {
    padding: 8px 14px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #2563eb !important;
    color: #fff !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background: rgba(37, 99, 235, .08);
}
</style>

@section('content')
 <div class="row d-flex justify-content-between">
        <div class="col-auto">
            <h5> <button type="button" class="btn btn-icon bg-white waves-effect me-2"
                    style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                    <a href="{{ route('view_doc') }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M15 6l-6 6l6 6"></path>
                        </svg>
                    </a>
                </button>
               Create Document
            </h5>
        </div>


    </div>
<!-- TOP BAR -->
<div class="card topbar d-flex flex-row justify-content-between align-items-center p-4">

  <div>
    <h6 class="mb-0">Document Editor</h6>
  </div>



</div>
<div class="col-lg-4 mb-4">

    <label class="form-label">
        Choose Project
    </label>

    <select name="project_id"
        id="project_id"
        class="form-select">

        <option value="">
            Select Project
        </option>

        @foreach ($projects as $proj)

            <option value="{{ $proj->id }}"
                {{ (isset($project) && $project->id == $proj->id) ? 'selected' : '' }}>

                {{ $proj->project_name }}

            </option>

        @endforeach

    </select>

</div>

<!-- MAIN -->

<div class="container card">

    <input class="title"
        id="title"
        placeholder="Enter Document Title"/>

    <div class="editor"
        contenteditable="true"
        id="editor">

        <!-- Start writing your document here... -->

    </div>

    <div class="text-center mt-3">

        <button class="btn btn-primary"
            id="saveBtn"
            onclick="saveDoc()">

            Save

        </button>

    </div>

</div>

<!-- JQUERY -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
    $(document).ready(function () {
        $('#project_id').select2({
            placeholder: "Select Project",
            allowClear: true,
            width: '100%'
        });
    });
</script>
<script>

function saveDoc() {

    let project_id = $('#project_id').val();

    let document_name = $('#title').val();

    let content = $('#editor').html();

    let plainText = $('#editor').text().trim();

    console.log("PROJECT ID => ", project_id);
    console.log("DOCUMENT NAME => ", document_name);
    console.log("CONTENT => ", content);

    // VALIDATION

    if(project_id == '') {

        alert('Please select project');

        return;
    }

    if(document_name == '') {

        alert('Please enter document title');

        return;
    }

    if(plainText == '') {

        alert('Please enter content');

        return;
    }

    // BUTTON LOADING

    $('#saveBtn')
        .prop('disabled', true)
        .text('Saving...');

    // AJAX

    $.ajax({

        url: "{{ route('document_store') }}",

        type: "POST",

        data: {

            _token: "{{ csrf_token() }}",

            project_id: project_id,

            document_name: document_name,

            content: content
        },

        success: function(response) {

    console.log("SUCCESS RESPONSE => ", response);

    $('#saveBtn')
        .prop('disabled', false)
        .text('Save');

    if(response.status == true) {

        // SUCCESS TO VIEW DOC PAGE
        window.location.href =
            "{{ route('view_doc') }}?success=1";

    } else {

        // FAILED RESPONSE
        window.location.href =
            "{{ route('view_doc') }}?error=1";
    }
},

error: function(xhr) {

    $('#saveBtn')
        .prop('disabled', false)
        .text('Save');

    console.log("FULL ERROR => ", xhr);

    // ERROR TO VIEW DOC PAGE
    window.location.href =
        "{{ route('view_doc') }}?error=1";
}
    });
}

</script>

@endsection