<?php include "../assets/folder_name.php"; ?>

<style>
    .modal {
        font-family: var(--regular-font);
    }
    .customalert .modal-dialog {
        max-width: 400px;
        margin: auto;
    }
    .customalert .modal-content {
        border-radius: 10px;
        box-shadow: 5px 5px 10px 1px black;
    }
    .customalert .modal-body {
        padding: 0;
        border-radius: 10px; 
        background-color: #f2f2f2;
    }
    .alertContainer {
        padding: 1rem 0.5rem 0.5rem 0.5rem;
        display: flex;
        justify-content: center;
    }
    .customalert .alertIcon {  
        width: 15%;
        height: 3rem;
    }
    .customalert .alertIcon img { 
        width: 100%;
        height: 100%; 
    }
    .customalert .alertTitle {  
        width: 83%;
        height: fit-content;
        padding: 0.5rem;
        color: gray; 
        font-weight: 600; 
        font-size: 1rem;
    }
    .customalert .alertButtons, .formalert .formalertButtons { 
        margin: 0.5rem;
        text-align: right;
    }
    .customalert .alertButtons .btn, .formalert .formalertButtons .btn {
        color: white; 
        font-weight: 600;
        font-size: 0.9rem; 
    } 
    .customalert .alertButtons .noBtn, .formalert .formalertButtons .noBtn {
        background: rgba(231, 231, 232, 1);
        color: gray;
        border: gray;
    } 
    .customalert .alertButtons .yesBtn, .formalert .formalertButtons .yesBtn {
        background: rgb(226, 239, 249);
        color: rgb(110, 161, 200);
        border: 2px solid rgb(110, 161, 200);
    } 
    .customalert .alertButtons .okBtn, .formalert .formalertButtons .okBtn {
        background: rgb(226, 239, 249);
        color: rgb(110, 161, 200);
        border: 2px solid rgb(110, 161, 200);
    } 
    .formalert .modal-dialog {
        max-width: 700px;
        margin: auto;
    }
    .formalert .modal-content {
        border-radius: 10px;
        box-shadow: 5px 5px 10px 1px black;
    }
    .formalert .modal-body {
        padding: 0;
        border-radius: 10px; 
    }
    .form-type-selection-text {
        font-family: monospace;
        color: rgb(113, 172, 150);
        font-weight: 350;
        padding: 1rem 0.5rem;
        margin: 1rem 2rem;
        font-size: 1.1rem;
        text-align: justify;
    }
    .form-type-selection {
        cursor: pointer;
        background: linear-gradient(to bottom, cornflowerblue, rgba(227, 168, 188, 0.5));
        color: black;
        font-weight: 600;
        padding: 1rem 2rem;
        margin: 1rem 2rem;
        border-radius: 7px;
        display: flex;
        align-items: center;
        transition: 0.2s ease-in;
        text-decoration: none;
    }
    .form-type-selection i {
        font-size: 2rem;
        margin-right: 1rem;
    }
    .form-type-selection:hover {
        background: linear-gradient(to bottom, black, rgba(0, 0, 0, 0.5));
        color: white;
        transform: scale(1.03);
        text-decoration: none;
    }

    
    .formContainer {
        margin: 2rem auto;
        width: 95%;
    }
    .field-row {
        margin: 1rem auto;
    }
    .each-field-column {
        display: flex;
        align-items: center;
    }
    .form-general-labels {
        display: inline-block;
        width: 35%;
        border: 1px solid gainsboro;
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
        font-weight: 600;
        background-color: #f1f1f1;
        color: gray;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }
    .form-general-fields {
        display: inline-block;
        width: 65%;
        border: 1px solid gainsboro;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    .general-field {
        padding: 0.5rem 1rem;
        border: none;
        outline: none;
        background-color: transparent;
        color: black;
        font-size: 0.9rem;
        width: 100%;
    }
</style>  

<div class="modal fade customalert" id="confirmationModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content"> 
            <div class="modal-body"> 
                <input type="hidden" value="" id="deleteid">
                <input type="hidden" value="" id="deletecategory">
                <div class="alertContainer">
                    <div class="alertIcon"><img src="<?php echo $folder_name; ?>assets/images/alert_confirmation_icon.webp" alt=""></div>
                    <div class="alertTitle"></div>
                </div>
                <div class="alertButtons">
                    <div class="btn noBtn" data-dismiss="modal">No</div>
                    <div class="btn yesBtn">Yes</div> 
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade customalert" id="warningModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content"> 
            <div class="modal-body"> 
                <div class="alertContainer">
                    <div class="alertIcon"><img src="<?php echo $folder_name; ?>assets/images/alert_warning_icon.webp" alt=""></div>
                    <div class="alertTitle"></div>
                </div>
                <div class="alertButtons"> 
                    <div class="btn okBtn" data-dismiss="modal">Ok</div> 
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade customalert" id="successModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content"> 
            <div class="modal-body"> 
                <div class="alertContainer">
                    <div class="alertIcon"><img src="<?php echo $folder_name; ?>assets/images/alert_success_icon.webp" alt=""></div>
                    <div class="alertTitle"></div>
                </div>
                <div class="alertButtons"> 
                    <div class="btn okBtn" data-dismiss="modal">Ok</div> 
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade customalert" id="deleteModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content"> 
            <div class="modal-body"> 
                <div class="alertContainer">
                    <div class="alertIcon"><img src="<?php echo $folder_name; ?>assets/images/alert_restrict_icon.webp" alt=""></div>
                    <div class="alertTitle"></div>
                    <input type="hidden" id="delete-id">
                </div>
                <div class="alertButtons"> 
                    <div class="btn noBtn" data-dismiss="modal">No</div> 
                    <div class="btn yesBtn" data-dismiss="modal">Yes</div> 
                </div>
            </div>
        </div>
    </div>
</div> 


<script>
    function showModal(modalId) {
        $('#'+modalId).modal('show');
    }
</script>