<?php
include "db.class.php";

$db = new DBMain();

$jobcard_res = $db->exec_query('jobcards', ['*']);
$jobcard_number = $jobcard_res->num_rows + 1;

?>
<style>
    .apple-form {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-family: 'Arial', sans-serif;
        width: 80%;
        border: #007AFF 1px solid;
        border-radius: 25px;
        margin-left: auto;
        padding: 5vw;
        margin-right: auto;
    }

    .form-group {
        display: flex;
        flex-direction: column;
        margin-bottom: 10px;
        width: 90%;
        margin-left: auto;
        margin-right: auto
    }

    .form-group label {
        margin-bottom: 5px;
    }

    .form-group input[type=text],
    [type=date],
    [type=number] {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        width: 100%;
    }

    .radio {
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    .form-group select {
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
        width: 100%;
        max-width: 300px;
    }

    .form-group textarea {
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
        width: 100%;
        max-width: 300px;
    }


    .form-group input[type=submit] {
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        background-color: #007AFF;
        color: #fff;
        cursor: pointer;
        margin-top: 10px;
    }

    .apple-form button {
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        background-color: #007AFF;
        color: #fff;
        cursor: pointer;
        margin-top: 10px;
    }

    @media (max-width: 480px) {
        .apple-form {
            flex-direction: column;
        }

        .form-group {
            margin-bottom: 5px;
        }
    }

    .l_title {
        display: flex;
        justify-content: center;
        width: 100%;
        text-align: center;

    }
</style>
<style>
    .back_btn {
        position: absolute;
        left: 1%;
        top: 1%;
        width: 25%;
        height: fit-content;
        background-color: #007AFF;
        color: #fff;
        border-radius: 10px;
        padding: 1%;
        text-align: center;
    }
</style>
<a href='index.php'>
    <div class='back_btn'>
        BACK
    </div>
</a>

<br><br><br>
<form class="jobcard_form" method="POST" action="save_new_jobcard.php">
    <div class="form-group">
        <table style='width:100%;'>
            <tr>
                <td>
                    <label for="jobcard_number">Jobcard Number</label>
                    <input type="number" name="jobcard_number" id="jobcard_number" class="input" readonly
                        value='<?php echo $jobcard_number ?>'>
                </td>
                <td>
                    <label for="jobcard_date">Date</label>
                    <input type="date" name="jobcard_date" id="jobcard_date">
                </td>
            </tr>
        </table>
    </div>
    <div class="form-group">
        <table style='width:100%;'>
            <tr>
                <td>
                    <label for="artist_name">Artist Name</label>
                    <input type="text" name="artist_name" id="artist_name">
                </td>
                <td>
                    <label for="sculpture_name">Sculpture Name</label>
                    <input type="text" name="sculpture_name" id="sculpture_name">
                </td>
            </tr>
        </table>
    </div>
    <div class="form-group">
        <table style='width:100%;'>
            <tr>
                <td>
                    <label for="account_no">Account NR</label>
                    <input type="text" name="account_no" id="account_no">
                </td>
                <td>
                    <label for="quantity">Quantity</label>
                    <input type="number" name="quantity" id="quantity" value=1>
                </td>
                <td>
                    <label for="serial_nr">Serial NR</label>
                    <input type="text" name="serial_nr" id="serial_nr">
                </td>
                <td>
                    <label for="inv_nr">Inv NR</label>
                    <input type="text" name="inv_nr" id="inv_nr">
                </td>
            </tr>
        </table>
    </div>

    <div class="form-group">
        <div class="l_title">
            <h2 for="wax-paint-department">Wax Paint Department</h2>
        </div>

        <div class="form-group">
            <table style='width:100%;'>
                <tr>
                    <td>
                        <label for="wax_paint_dep_painter_name">Name</label>
                        <input type="text" name="wax_paint_dep_painter_name" id="wax_paint_dep_painter_name">
                    </td>
                    <td>
                        <label for="wax_paint_dep_date_in">Date In</label>
                        <input type="date" name="wax_paint_dep_date_in" id="wax_paint_dep_date_in">
                    </td>
                    <td>
                        <label for="wax_paint_dep_date_out">Date Out</label>
                        <input type="date" name="wax_paint_dep_date_out" id="wax_paint_dep_date_out">
                    </td>
                </tr>
            </table>
        </div>

        <div>
            <div class="l_title">
                <h2 for="wax-paint-department">Wax Department Work</h2>
            </div>

            <div class="form-group">
                <table style='width:100%;'>
                    <tr>
                        <td>
                            <label for="wax_work_dep_name">Name</label>
                            <input type="text" name="wax_work_dep_name" id="wax_work_dep_name">
                        </td>
                        <td>
                            <label for=">wax_work_dep_date_in">Date In</label>
                            <input type="date" name="wax_work_dep_date_in" id="wax_work_dep_date_in">
                        </td>
                        <td>
                            <label for="wax_work_dep_date_out">Date Out</label>
                            <input type="date" name="wax_work_dep_date_out" id="wax_work_dep_date_out">
                        </td>
                        <td>
                            <label for="wax_work_dep_wax_kg">Wax KG</label>
                            <input type="number" name="wax_work_dep_wax_kg" step="0.001" id="wax_work_dep_wax_kg"
                                value=1>
                        </td>
                    </tr>
                </table>
            </div>

            <div>
                <div class="l_title">
                    <h2 for="wax-paint-department">Wax Department Runner</h2>
                </div>

                <div class="form-group">
                    <table style='width:100%;'>
                        <tr>
                            <td>
                                <label for="wax_runner_dep_name">Name</label>
                                <input type="text" name="wax_runner_dep_name" id="wax_runner_dep_name">
                            </td>
                            <td>
                                <label for=">wax_runner_dep_date_in">Date In</label>
                                <input type="date" name="wax_runner_dep_date_in" id="wax_runner_dep_date_in">
                            </td>
                            <td>
                                <label for="wax_runner_dep_date_out">Date Out</label>
                                <input type="date" name="wax_runner_dep_date_out" id="wax_runner_dep_date_out">
                            </td>
                        </tr>
                    </table>
                </div>

                <div>
                    <div class="l_title">
                        <h2 for="wax-paint-department">Ceramics Department</h2>
                    </div>

                    <div class="form-group">
                        <table style='width:100%;'>
                            <tr>
                                <td>
                                    <label for="ceramics_dep_name">Name</label>
                                    <input type="text" name="ceramics_dep_name" id="ceramics_dep_name">
                                </td>
                                <td>
                                    <label for=">ceramics_dep_date_in">Date In</label>
                                    <input type="date" name="ceramics_dep_date_in" id="ceramics_dep_date_in">
                                </td>
                                <td>
                                    <label for="ceramics_dep_date_out">Date Out</label>
                                    <input type="date" name="ceramics_dep_date_out" id="ceramics_dep_date_out">
                                </td>
                            </tr>
                        </table>
                    </div>

                    <div>
                        <div class="l_title">
                            <h2 for="wax-paint-department">Dewax Department</h2>
                        </div>


                        <div class="form-group">
                            <table style='width:100%;'>
                                <tr>
                                    <td>
                                        <label for="dewax_dep_name">Name</label>
                                        <input type="text" name="dewax_dep_name" id="dewax_dep_name">
                                    </td>
                                    <td>
                                        <label for=">dewax_dep_date_in">Date In</label>
                                        <input type="date" name="dewax_dep_date_in" id="dewax_dep_date_in">
                                    </td>
                                    <td>
                                        <label for="dewax_dep_date_out">Date Out</label>
                                        <input type="date" name="dewax_dep_date_out" id="dewax_dep_date_out">
                                    </td>
                                </tr>
                            </table>
                        </div>

                        <div>
                            <div class="l_title">
                                <h2 for="wax-paint-department">Casting Department</h2>
                            </div>

                            <div class="form-group">
                                <table style='width:100%;'>
                                    <tr>
                                        <td>
                                            <label for="casting_dept_name">Name</label>
                                            <input type="text" name="casting_dept_name" id="casting_dept_name">
                                        </td>
                                        <td>
                                            <label for="casting_dep_date_in">Date In</label>
                                            <input type="date" name="casting_dep_date_in" id="casting_dep_date_in">
                                        </td>
                                        <td>
                                            <label for="casting_dep_date_out">Date Out</label>
                                            <input type="date" name="casting_dep_date_out" id="casting_dep_date_out">
                                        </td>
                                    </tr>
                                </table>
                            </div>

                            <div>
                                <div class="l_title">
                                    <h2 for="wax-paint-department">Sandblast Department</h2>
                                </div>

                                <div class="form-group">
                                    <table style='width:100%;'>
                                        <tr>
                                            <td>
                                                <label for="sandblast_dep_name">Name</label>
                                                <input type="text" name="sandblast_dep_name" id="sandblast_dep_name">
                                            </td>
                                            <td>
                                                <label for="sandblast_dep_date_in">Date In</label>
                                                <input type="date" name="sandblast_dep_date_in"
                                                    id="sandblast_dep_date_in">
                                            </td>
                                            <td>
                                                <label for="sandblast_dep_date_out">Date Out</label>
                                                <input type="date" name="sandblast_dep_date_out"
                                                    id="sandblast_dep_date_out">
                                            </td>
                                        </tr>
                                    </table>
                                </div>

                                <div class="l_title">
                                    <h2 for="wax-paint-department">Metal Department</h2>
                                </div>
                                <div class="form-group">
                                    <table style='width:100%;'>
                                        <tr>
                                            <td>
                                                <label for="metal_dep_name">Name</label>
                                                <input type="text" name="metal_dep_name" id="metal_dep_name">
                                            </td>
                                            <td>
                                                <label for="metal_dep_date_in">Date In</label>
                                                <input type="date" name="metal_dep_date_in" id="metal_dep_date_in">
                                            </td>
                                            <td>
                                                <label for="metal_dep_date_out">Date Out</label>
                                                <input type="date" name="metal_dep_date_out" id="metal_dep_date_out">
                                            </td>
                                            <td>
                                                <label for="metal_dep_bronze_kg">Bronze KG</label>
                                                <input type="number" name="metal_dep_bronze_kg" step="0.001"
                                                    id="metal_dep_bronze_kg" value=1>
                                            </td>
                                        </tr>
                                    </table>
                                </div>

                                <div class="form-group">
                                    <table style='width:100%;'>
                                        <tr>
                                            <td>
                                                <label for="drill_tap">Drill & Tap</label>
                                                <input type="text" name="drill_tap" id="drill_tap">
                                            </td>
                                            <td>
                                                <label for="leveld">Leveld</label>
                                                <input type="text" name="leveld" id="leveld">
                                            </td>
                                        </tr>
                                    </table>
                                </div>

                                <div class="l_title">
                                    <h2 for="wax-paint-department">Patina Department</h2>
                                </div>


                                <div class="form-group">
                                    <table style='width:100%;'>
                                        <tr>
                                            <td>
                                                <label for="patina_dept_name">Name</label>
                                                <input type="text" name="patina_dept_name" id="patina_dept_name">
                                            </td>
                                            <td>
                                                <label for="patina_dept_date_in">Date In</label>
                                                <input type="date" name="patina_dept_date_in" id="patina_dept_date_in">
                                            </td>
                                            <td>
                                                <label for="patina_dept_date_out">Date Out</label>
                                                <input type="date" name="patina_dept_date_out"
                                                    id="patina_dept_date_out">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <label for="special_patina">Special Patin</label>
                                                <input type="radio" class="radio" id="patina_type1" name="patina_type"
                                                    value="Special Patin">

                                            </td>
                                            <td>
                                                <label for="foundry_patina">Foundry Patina</label>
                                                <input type="radio" class="radio" id="patina_type2" name="patina_type"
                                                    value="Foundry Patina">
                                            </td>
                                            <td>
                                                <label for="polish">Polish</label>
                                                <input type="radio" class="radio" id="patina_type3" name="patina_type"
                                                    value="Polish">
                                            </td>
                                        </tr>
                                    </table>
                                </div>

                                <div class="l_title">
                                    <h2 for="wax-paint-department">Base</h2>
                                </div>

                                <div class="form-group">
                                    <table style='width:100%;'>
                                        <tr>
                                            <td>
                                                <label for="base">YES</label>
                                                <input type="radio" name="base" required id="base" value=1>

                                            </td>
                                            <td>
                                                <label for="base">NO</label>
                                                <input class="radio" type="radio" name="base" required id="base"
                                                    value=0>

                                            </td>
                                        </tr>
                                    </table>
                                </div>

                                <div class="form-group">
                                    <table style='width:100%;'>
                                        <tr>
                                            <td>
                                                <label for="height">Height</label>
                                                <input type="number" name="height" step="0.001" id="height" value=1>
                                            </td>
                                            <td>
                                                <label for="length">Length</label>
                                                <input type="number" name="length" step="0.001" id="length" value=1>
                                            </td>
                                            <td>
                                                <label for="width">Width</label>
                                                <input type="number" name="width" step="0.001" id="width" value=1>
                                            </td>
                                        </tr>
                                    </table>
                                </div>

                                <div class="form-group">
                                    <label for="notes">Note</label>
                                    <textarea name="notes" id="notes" style="width: 100%;"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="deadline">Deadline</label>
                                    <input type="date" name="deadline" id="deadline">
                                </div>
                                <div class="form-group">
                                    <label for="date_out">Date Out Of The Foundry</label>
                                    <input type="date" name="date_out" id="date_out">
                                    <input type="submit" value="Submit" id="button" onclick="disable_for_a_time()">
                                    <input type="submit" value="Loading..." id="laoding_btn" hidden>
                                </div>

</form>

<script>
    function disable_for_a_time() {
        document.getElementById("button").hidden = true;
        document.getElementById("laoding_btn").hidden = false;
        setTimeout(function () {
            document.getElementById("button").hidden = false;
            document.getElementById("laoding_btn").hidden = true;
        }, 5000);
    }
</script>